/* ==========================================================================
   MILEX — SERVICES (template T7)

   A vertical stack of service sections. Each is a large photograph on one
   side with a white text card overlapping it from the other, centred against
   the photo. Sections alternate: photo right, photo left, photo right…

   Geometry, as a share of the content box (the container minus its gutters),
   measured off the reference at a 1526px viewport where its content box is
   1311px wide:

     photo 73.4% · card 48.9% · overlap 22.3%

   Those three are one number, not three: photo + card − overlap = 100%. So
   the layout needs no overlap declaration at all — the photo is flush to one
   edge, the card to the other, and the overlap is what is left over. Change
   one and the other two follow.

   The card's height follows its own content and it is centred on the photo,
   which is exactly what the reference does: its six cards sit 137, 90, 103,
   2, 117 and 131px inside the photo's top edge, purely as a consequence of
   how long each paragraph is. There is no fixed inset to implement.

   Pages using this template load tokens → base → components → this file.
   They must NOT load home.css, category.css or product-detail.css.
   ========================================================================== */

:root {
  --svc-photo: 73.4%;
  --svc-card:  48.9%;
  --svc-gap:   90px;    /* section to section; the reference uses 60 */

  /* Page-local: the site's --fs-h2 is 35px, which is the section-heading
     size. These headings sit inside a card and match the H1 above them. */
  --fs-h2-svc: 25px;
}

/* --------------------------------------------------------------------------
   1. Section
   -------------------------------------------------------------------------- */

/* The space above the first photograph belongs to the page head, which uses
   the same .c-pagehead--spaced as every other inner page. */
.s-services-page { padding-bottom: var(--space-section); }

.s-service + .s-service { margin-top: var(--svc-gap); }

/* The positioning context is the content box, not the container's padding
   box: `left: 0` on the card has to mean the text edge, not the gutter edge.
   Hence the extra element inside .l-container rather than position:relative
   on the container itself. */
.s-service__inner { position: relative; }

/* --------------------------------------------------------------------------
   2. Photograph
   -------------------------------------------------------------------------- */

.s-service__photo {
  width: var(--svc-photo);
  margin: 0 0 0 auto;                     /* flush right by default */
}

/* The ratio lives on the image. width/height describe the slot rather than
   the file — the six photographs range from 859x493 to 1400x1093 — so the box
   is reserved at the right shape before any of them decode and nothing
   shifts. cover, because these are application photographs rather than
   cut-outs: a crop is fine, letterboxing on a white card is not. */
.s-service__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   3. Text card
   -------------------------------------------------------------------------- */

.s-service__card {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: var(--svc-card);
  padding: 56px 60px 56px 44px;           /* text 44px in from the outer edge */
  background: var(--paper);
}

/* Square, flat, no border. The card reads as a card only because it sits on
   the photograph — over the page's own white it is simply text, which is why
   the overlap is the whole character of this page and not decoration. */

.s-service__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2-svc);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

/* 44px, measured. The brief estimated ~62 from the screenshots. */
.s-service__text {
  margin-top: 44px;
  font-size: var(--fs-body);
  line-height: var(--lh);
  color: var(--ink);
}

.s-service__cta { margin-top: 40px; }

/* --------------------------------------------------------------------------
   4. Mirrored sections
   -------------------------------------------------------------------------- */

.s-service--flip .s-service__photo { margin-left: 0; margin-right: auto; }

.s-service--flip .s-service__card {
  left: auto;
  right: 0;
  padding: 56px 44px 56px 60px;
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */

/* The card cannot keep shrinking with the column or the measure collapses, so
   below 1120 both boxes grow and the overlap deepens from 22.3% to 32%. */
@media (max-width: 1119px) {
  :root {
    --svc-photo: 78%;
    --svc-card:  54%;
    --svc-gap:   72px;
  }

  .s-service__card,
  .s-service--flip .s-service__card { padding: 40px 44px; }
}

/* Overlap off. The card becomes an ordinary block under a full-width
   photograph — which is the DOM order already, so nothing is reordered and
   the alternation simply stops mattering. 16:9 because a 3:2 photograph at
   full width eats most of a phone screen before a word of text appears. */
@media (max-width: 991px) {
  :root { --svc-gap: 56px; }

  .s-service__photo,
  .s-service--flip .s-service__photo {
    width: 100%;
    margin: 0;
  }

  .s-service__img { aspect-ratio: 16 / 9; }

  .s-service__card,
  .s-service--flip .s-service__card {
    position: static;
    width: 100%;
    padding: 32px 24px;
    transform: none;
  }

  .s-service__text { margin-top: 24px; }
  .s-service__cta  { margin-top: 32px; }
}

@media (max-width: 767px) {
  :root { --fs-h2-svc: 22px; }

  /* A 250px button in a 287px measure looks like a mistake; full width reads
     as the deliberate end of the card. */
  .s-service__cta {
    display: flex;
    width: 100%;
  }
}