/*
  K3 Ingenieria -- Inicio (index.html) page-specific styles
  Hero, "Las dos lineas" and "A quien servimos". Depends on
  tokens/base/layout/components being loaded first. Reused primitives
  (.image-placeholder, .reveal-panel/-media/-rule, .how-we-work-list)
  live in components.css since Nosotros also reuses the definition
  list. The contact-strip module once shared with Consultoria/Comercio
  was removed sitewide in a later session -- see "Contact strip" in
  CLAUDE.md if you need the history.
*/

/* =========================================================
   Hero
   Cols 1-7 text, cols 8-12 image. Not centered. Uses the shared
   .grid + .col-span-* utilities directly in the markup.
   ========================================================= */
.hero {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}
.hero-grid { align-items: center; }
.hero h1 { margin-bottom: 0.6em; }
.hero .standfirst { margin-bottom: 1.25em; }

/* Real photo, replacing the hero's former .image-placeholder box. The
   source asset is pre-cropped to 3:4, but aspect-ratio is set here too
   (rather than relying on the file's intrinsic ratio alone) so the
   layout can't shift if a future re-crop drifts slightly off-spec. */
.hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* =========================================================
   Las dos lineas
   Two stacked full-width rows, not side-by-side cards. Each row:
   cols 1-4 label/prose/title, cols 5-12 image. Whole row is a single
   link using the shared realce-de-panel primitives.
   ========================================================= */
.lines {
  padding-block: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--rule-soft);
}
.lines-heading {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  /* Hero's "Conozca nuestras líneas de negocio" link jumps here; the
     sticky header (components.css) would otherwise cover it on landing.
     Same value and reasoning as #main's rule there. */
  scroll-margin-top: 120px;
}

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

.line-row-text { grid-column: 1 / 5; }
.line-row-media { grid-column: 5 / 13; }

/* Real photo, replacing the Consultoria row's former .image-placeholder
   box (the Comercio row below it is still a placeholder -- not part of
   this swap). Mirrors components.css's .image-placeholder--21-9 re-crop
   rule for the same reason: 21:9 becomes a letterbox slit below 760px. */
.line-row-photo {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
@media (max-width: 759.98px) {
  .line-row-photo { aspect-ratio: 3 / 2; }
}

/* Visible "link" line inside the row. Not a real nested <a> -- the
   whole row is already one <a>, and an anchor can't contain another
   one -- so this is styled to read as a link (matches base.css's `a`
   treatment) while staying plain text; the row's own href carries it. */
.line-row-cta {
  margin: 0.75em 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration-line: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 1099.98px) {
  .line-row { grid-template-columns: 1fr; }
  .line-row-text,
  .line-row-media { grid-column: 1 / -1; }
}

/* =========================================================
   A quien servimos
   Rule-separated list, one line of prose per sector. No client logo
   wall -- there are no logos to show and none should be implied.
   ========================================================= */
/* Now the page's last section before the footer (the contact-strip
   module that used to follow it was removed), so its bottom padding
   matches the closing weight other pages give the section right
   before the footer, not the smaller mid-page value it used before. */
.who-we-serve {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 4rem);
  border-top: 1px solid var(--rule-soft);
}
.who-we-serve-heading { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.who-we-serve-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.who-we-serve-list li {
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule-soft);
}
.who-we-serve-list li:last-child { border-bottom: 1px solid var(--rule-soft); }

.who-we-serve-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: 0.35em;
}
.who-we-serve-list p { margin: 0; max-width: 60ch; }