/**
 * Phase S2 — Service Pages Visual & Design System.
 *
 * Unified, additive CSS for the 6 service pages (نقل الأثاث، تغليف الأثاث،
 * ونش، فك وتركيب الأثاث، فك وتركيب التكييفات، تخزين العفش).
 *
 * IMPORTANT (S2 scope): the 6 pages' post_content still carries its own
 * inline <style> blocks (two slightly different legacy variants — see the
 * S2 report). This file deliberately does NOT redefine any selector already
 * used by either inline variant (__intro, __lead, __trust, __cta, __grid,
 * __steps, __factors, __link, __related, __areas, __safe, __faq,
 * __finalcta, and bare h2/p/ul/li under .alm-service-page) — reusing those
 * names here would just be shadowed by the inline styles anyway (inline
 * <style> in the body cascades after enqueued <head> stylesheets at equal
 * specificity), and could also invite confusing conflicts later. Every
 * class below is new, so this file has ZERO visual effect on the 6 pages
 * until S3 actually rewires a page's markup to use these components and
 * removes its old inline <style> block.
 *
 * Scope: everything is nested under .alm-service-page (the existing outer
 * wrapper div already present in all 6 pages' post_content).
 *
 * Phase S3 addendum: نقل الأثاث (ID 180) is the first page to actually have
 * its old inline <style> block removed and be rewired onto these classes —
 * so this file now also carries base typography for .alm-service-page
 * (h2/p/ul/li/section spacing), ported from page 180's own original inline
 * "premium" variant (the richer of the two legacy styles found in S2's
 * audit — cf. font-weight 1000 headings, slate body copy, generous section
 * spacing). This is the "Premium Hybrid" base the S3 brief asked for. The
 * other 5 service pages still carry their own inline <style> for their own
 * base typography, which continues to win the cascade for them (later in
 * DOM order at equal specificity), so these base rules have no visible
 * effect there until/unless a future phase does the same cleanup.
 */

.alm-service-page {
  color: var(--alm-navy, #102033);
}
.alm-service-page h2 {
  font-weight: 1000;
  color: var(--alm-navy, #102033);
  font-size: 1.3rem;
  margin: 0 0 12px;
}
.alm-service-page p {
  color: var(--alm-slate, #5D6673);
  line-height: 1.8;
  font-weight: 600;
}
.alm-service-page section {
  margin: 0 0 36px;
}
.alm-service-page ul {
  margin: 0 0 1em;
  padding-inline-start: 1.2em;
}
.alm-service-page li {
  margin-bottom: .5em;
}

/* ------------------------------------------------------------------ */
/* A) Service hero media block                                        */
/* ------------------------------------------------------------------ */

.alm-service-page__hero {
  margin: 0 0 1.6em;
}

.alm-service-page__hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--alm-radius-lg, 22px);
  background: var(--alm-sand, #F6F1E8);
  box-shadow: var(--alm-shadow-soft, 0 14px 34px rgba(16, 32, 51, .07));
}

.alm-service-page__hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Optional caption strip inside the hero media, e.g. "فريق المتميز أثناء التنفيذ" */
.alm-service-page__hero-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: .9em 1.2em;
  background: linear-gradient(0deg, rgba(16, 32, 51, .78), rgba(16, 32, 51, 0));
  color: var(--alm-white, #fff);
  font-size: .9em;
  font-weight: 700;
}

@media (max-width: 700px) {
  .alm-service-page__hero-media {
    aspect-ratio: 4 / 3;
    border-radius: var(--alm-radius-md, 18px);
  }
}

/* ------------------------------------------------------------------ */
/* B) Service trust bar                                               */
/* ------------------------------------------------------------------ */

.alm-service-page__trustbar {
  display: flex;
  flex-wrap: wrap;
  gap: .6em;
  margin: 0 0 1.4em;
}

.alm-service-page__trustbar-item {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--alm-white, #fff);
  border: 1px solid rgba(24, 53, 82, .12);
  color: var(--alm-navy, #102033);
  font-weight: 800;
  font-size: .9em;
  padding: .55em 1.1em;
  border-radius: 999px;
}

.alm-service-page__trustbar-item .alm-icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--alm-gold, #C99A3A);
  flex: none;
}

/* Trustbar items can also be links (e.g. "areas served" pills) — same pill
   look, just interactive. */
a.alm-service-page__trustbar-item {
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
a.alm-service-page__trustbar-item:hover {
  border-color: rgba(201, 154, 58, .45);
  color: var(--alm-gold, #C99A3A);
}

/* ------------------------------------------------------------------ */
/* C) Service content cards                                           */
/* ------------------------------------------------------------------ */

.alm-service-page__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1em;
  margin: 1em 0;
}

.alm-service-page__card {
  background: var(--alm-white, #fff);
  border: 1px solid rgba(24, 53, 82, .10);
  border-radius: var(--alm-radius-md, 18px);
  box-shadow: var(--alm-shadow-soft, 0 14px 34px rgba(16, 32, 51, .07));
  padding: 1.2em 1.3em;
  transition: box-shadow .18s ease, transform .18s ease;
}

.alm-service-page__card:hover {
  box-shadow: var(--alm-shadow-strong, 0 18px 46px rgba(16, 32, 51, .12));
  transform: translateY(-2px);
}

.alm-service-page__card-title {
  display: block;
  color: var(--alm-navy, #102033);
  font-weight: 900;
  margin: 0 0 .4em;
}

.alm-service-page .alm-service-page__card .alm-service-page__card-text {
  display: block;
  color: var(--alm-slate, #5D6673);
  font-size: .94em;
  line-height: 1.8;
  margin: 0;
}

/* A card can also be the whole clickable link (e.g. "related services"). */
a.alm-service-page__card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.alm-service-page__card:hover .alm-service-page__card-title {
  color: var(--alm-gold, #C99A3A);
}

@media (max-width: 700px) {
  .alm-service-page__cards {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* D) Service image block (internal, in-article images)               */
/* ------------------------------------------------------------------ */

.alm-service-page__media {
  margin: 1.6em 0;
}

.alm-service-page__media-figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--alm-radius-md, 18px);
  overflow: hidden;
  background: var(--alm-light, #EEF1F4);
  box-shadow: var(--alm-shadow-soft, 0 14px 34px rgba(16, 32, 51, .07));
}

.alm-service-page__media-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.alm-service-page .alm-service-page__media .alm-service-page__media-caption {
  margin: .6em .2em 0;
  color: var(--alm-slate, #5D6673);
  font-size: .85em;
  font-weight: 600;
  text-align: center;
}

@media (min-width: 701px) {
  /* On wider screens an internal image can sit narrower/centered instead
     of stretching full article width — opt-in via this modifier. */
  .alm-service-page__media--narrow {
    max-width: 520px;
    margin-inline: auto;
  }
}

/* Phase S9: optional 2-up image grid (e.g. two internal photos side by
   side instead of stacked) — not used by the current single-image-per-slot
   layout, but available for a future page that wants it. Each card reuses
   the same figure/caption look as .media-figure. */
.alm-service-page__media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  margin: 1.6em 0;
}
.alm-service-page__media-card {
  margin: 0;
}
.alm-service-page__media-card .alm-service-page__media-figure {
  aspect-ratio: 4 / 3;
}
@media (max-width: 700px) {
  .alm-service-page__media-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* E) Service CTA strip                                               */
/* ------------------------------------------------------------------ */

.alm-service-page__ctastrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9em;
  margin: 1.6em 0;
  padding: 1.1em 1.3em;
  background: var(--alm-sand, #F6F1E8);
  border-radius: var(--alm-radius-lg, 22px);
}

.alm-service-page .alm-service-page__ctastrip .alm-service-page__ctastrip-text {
  flex: 1 1 220px;
  color: var(--alm-navy, #102033);
  font-weight: 800;
  margin: 0;
}

.alm-service-page__ctastrip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6em;
}

/* Buttons inside the strip reuse the sitewide .alm-btn / .alm-btn--wa /
   .alm-btn--primary / .alm-btn--ghost classes (colors already come from
   buttons.css) — no new button styling is introduced here, only layout.
   However header.css's ".alm-pagecontent .alm-content a{color:navy}" rule
   (0,2,1 specificity) outranks buttons.css's single-class color rules
   (0,1,0) for any link inside post_content sitewide — a pre-existing
   conflict, not introduced here (out of scope to fix in header.css itself
   in this phase; flagged in the S3 report). Scoped locally so this page's
   own CTAs render with correct brand colors. */
.alm-service-page .alm-service-page__ctastrip .alm-btn--wa {
  color: var(--alm-white, #fff);
}
.alm-service-page .alm-service-page__ctastrip .alm-btn--primary {
  color: var(--alm-white, #fff);
}
.alm-service-page .alm-service-page__ctastrip .alm-btn--ghost {
  color: var(--alm-navy, #102033);
}

@media (max-width: 560px) {
  .alm-service-page__ctastrip {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .alm-service-page__ctastrip-actions {
    justify-content: center;
  }
}

/* Stronger variant for the page's closing CTA — same component, darker
   panel for visual hierarchy (matches the "premium" direction). */
.alm-service-page__ctastrip--final {
  background: linear-gradient(135deg, rgba(16, 32, 51, .98), rgba(24, 53, 82, .98));
}
.alm-service-page .alm-service-page__ctastrip--final .alm-service-page__ctastrip-text {
  color: var(--alm-white, #fff);
}

/* ------------------------------------------------------------------ */
/* FAQ visual support (details/summary), premium look                 */
/* ------------------------------------------------------------------ */

.alm-service-page__faq details {
  background: var(--alm-white, #fff);
  border: 1px solid rgba(24, 53, 82, .10);
  border-radius: var(--alm-radius-md, 18px);
  margin-bottom: 10px;
  padding: 14px 16px;
}
.alm-service-page__faq summary {
  font-weight: 900;
  color: var(--alm-navy, #102033);
  cursor: pointer;
}
.alm-service-page__faq details p {
  margin: 10px 0 0;
}
