/*
  K3 Ingenieria -- Consultoria en Administracion page-specific styles
  Typography- and structure-led per DESIGN-PLAN.md Sec.4 Option C: no
  hero photograph, no wide imagery anywhere on this page. Depends on
  tokens/base/layout/components being loaded first. Shared primitives
  (.page-head, .image-placeholder, .cross-link*) live in components.css.
  The contact-strip module once shared with Inicio/Comercio was removed
  sitewide in a later session.
*/

/* =========================================================
   Que hacemos
   Label-rail rows (cols 1-3 label, 4-12 prose). A row may carry one
   detail image, right-aligned in the row.

   DEVIATION FROM DESIGN-PLAN.md Sec.4 Option C: the plan's "no image
   wider than 2 grid columns" rule for this page assumed only tiny
   instrument-detail insets. These three images carry (or will carry)
   real supporting photography of people (consultants reviewing plans /
   verifying measurements / coordinating on-site), which doesn't read at
   2-column width -- so all three rows span 4 columns at desktop
   instead. This exception is scoped to `.what-we-do-media`/
   `.what-we-do-row--media` only; no other page's imagery rules
   change. Organizacion's slot was added after Planeacion/Control to
   match them exactly -- all three rows now carry an image, not just two.
   ========================================================= */
.what-we-do {
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.what-we-do-heading { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.what-we-do-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: start;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--rule-soft);
}
.what-we-do-row:last-child { border-bottom: 1px solid var(--rule-soft); }

.what-we-do-label { grid-column: 1 / 4; }
.what-we-do-label h3 { margin: 0; }

.what-we-do-prose { grid-column: 4 / 13; margin: 0; }
.what-we-do-row--media .what-we-do-prose { grid-column: 4 / 9; }

.what-we-do-media { grid-column: 9 / 13; }

/* Real photo, replacing a .what-we-do-media placeholder box. Sizing is
   entirely owned by .what-we-do-media above (grid-column span at
   desktop, the capped max-width when stacked) -- this rule only governs
   the image itself. */
.what-we-do-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

@media (max-width: 1099.98px) {
  .what-we-do-row { grid-template-columns: 1fr; }
  .what-we-do-label,
  .what-we-do-prose,
  .what-we-do-media { grid-column: 1 / -1; }
  /* Capped rather than left at 100% so the photo doesn't stretch to
     the full tablet-width column; min() lets it still yield to a
     narrower phone column without an extra breakpoint. */
  .what-we-do-media { max-width: min(360px, 100%); }
}

/* At true mobile width, the stacked label/prose/media column uses a
   single uniform grid gap for every pair, which reads fine between
   label and prose but leaves the detail image looking disconnected
   from the paragraph it belongs to -- and, with no track to stretch
   into, its default alignment fallback isn't worth leaving implicit.
   Tighten just the prose-to-image gap and pin the image to the same
   left edge as the text; label-to-prose spacing is restored via
   margin so it doesn't shrink along with the row's gap. */
@media (max-width: 759.98px) {
  .what-we-do-row--media { row-gap: 0.5rem; }
  .what-we-do-row--media .what-we-do-label { margin-bottom: 1rem; }
  .what-we-do-media { justify-self: start; }
}

/* =========================================================
   Como se entrega
   The vertical tick rail -- placement 3 of the 3 approved sitewide
   (footer top edge, page head, this rail). Order is carried by
   position on the rail, never by decorative numerals; it's a real
   <ol> so assistive tech still gets the sequence, just with
   list-style suppressed visually.
   ========================================================= */
.how-delivered {
  padding-block: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--rule-soft);
}
.how-delivered-heading { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.process-rail {
  list-style: none;
  margin: 0;
  padding-left: clamp(28px, 4vw, 40px);
  position: relative;
  max-width: 66ch;
}
.process-rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 8px;
  background-image:
    linear-gradient(var(--rule) 0 0),
    repeating-linear-gradient(to bottom, var(--teal) 0 2px, transparent 2px 24px);
  background-position: right center, left top;
  background-repeat: no-repeat, repeat-y;
  background-size: 1px 100%, 8px 100%;
}

.process-rail li {
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule-soft);
}
.process-rail li:first-child { border-top: none; padding-top: 0; }
.process-rail li:last-child { padding-bottom: 0; }

.process-rail h3 { margin-bottom: 0.4em; }
.process-rail p { margin: 0; }

/* =========================================================
   Para quien / Que recibe el cliente
   Deliverables described in words -- no document mockups.
   ========================================================= */
.deliverables {
  padding-block: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--rule-soft);
}
.deliverables-row {
  padding-block: clamp(1.5rem, 4vw, 2rem);
  border-top: 1px solid var(--rule-soft);
}
.deliverables-row:first-child { border-top: none; padding-top: 0; }
.deliverables-row:last-child { padding-bottom: 0; }
.deliverables-row h2 { margin-bottom: 0.6em; }
.deliverables-row p { margin: 0; max-width: 66ch; }