/**
 * layout.css — Novagroup Layout Primitives
 * Container, 12-col grid, section rhythm, header/footer structural rules.
 * ALL values reference tokens from css/tokens.css.
 *
 * Load order: tokens.css → reset.css → fonts.css → base.css → layout.css
 */

/* ============================================================
 * CONTAINER
 * ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Narrower reading container for editorial / legal pages */
.container--narrow {
  max-width: 800px;
}

/* ============================================================
 * SECTION — vertical rhythm
 * ============================================================ */
.section {
  padding-block: var(--sp-7); /* 64px mobile */
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--sp-9); /* 120px desktop */
  }
}

/* ------------------------------------------------------------
 * SECTION RHYTHM MODIFIERS (#18)
 * One vertical-rhythm contract sourced from tokens. Bands opt into a
 * tighter or wider cadence instead of hand-setting padding overrides
 * (which silently discarded the responsive .section mobile value).
 *   tight  = marquee / industries strip   (48 mobile / 96 desktop)
 *   wide   = closing CTA                   (96 mobile / 160 desktop)
 * Standard .section stays 64 mobile / 120 desktop.
 * ------------------------------------------------------------ */
.section--rhythm-tight {
  padding-block: var(--sp-6); /* 48px mobile */
}

@media (min-width: 768px) {
  .section--rhythm-tight {
    padding-block: var(--sp-8); /* 96px desktop */
  }
}

.section--rhythm-wide {
  padding-block: var(--sp-8); /* 96px mobile */
}

@media (min-width: 768px) {
  .section--rhythm-wide {
    padding-block: var(--sp-10); /* 160px desktop */
  }
}

/* Dark section variant */
.section--dark {
  background-color: var(--c-navy);
  color: var(--c-white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--c-white);
}

.section--dark p {
  color: var(--c-fog);
}

/* Bone/light section variant (default) */
.section--light {
  background-color: var(--c-bone);
}

/* ============================================================
 * 12-COLUMN GRID
 * ============================================================ */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--gutter);
}

/* Responsive: collapse to fewer columns at smaller breakpoints */
@media (max-width: 1024px) {
  .grid-12 {
    grid-template-columns: repeat(8, 1fr);
    --grid-cols: 8;
  }
}

@media (max-width: 768px) {
  .grid-12 {
    grid-template-columns: repeat(4, 1fr);
    --grid-cols: 4;
  }
}

/* Column span utilities */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (max-width: 768px) {
  .col-1, .col-2, .col-3, .col-4,
  .col-5, .col-6, .col-7, .col-8,
  .col-9, .col-10, .col-11, .col-12 {
    grid-column: span 4;
  }
}

/* ============================================================
 * FLEX ROW / COLUMN UTILITIES
 * ============================================================ */
.flex-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.flex-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ============================================================
 * HEADER — structural
 * Visual styles (sticky, compact, nav colors) are in css/components/nav.css
 * ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  height: 80px;
  display: flex;
  align-items: center;
  transition:
    height var(--dur-short) var(--ease-out),
    background-color var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}

/* Compact state — applied by js/nav.js at 80px scroll */
.site-header.is-compact {
  height: 60px;
  background-color: var(--c-navy);
  box-shadow: var(--shadow-md);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Body padding top to account for fixed header */
.has-fixed-header {
  padding-top: 80px;
}

/* ============================================================
 * MAIN — page main content
 * ============================================================ */
.site-main {
  min-height: 60vh;
}

/* ============================================================
 * FOOTER
 * ============================================================ */
.site-footer {
  background-color: var(--c-navy);
  color: rgba(247, 248, 250, 0.85);
  padding-block: var(--sp-8);
}

.site-footer a {
  color: rgba(247, 248, 250, 0.85);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}

.site-footer a:hover {
  color: var(--c-copper);
}

.site-footer a::after {
  display: none; /* no underline draw in footer — use color change only */
}

/* 4-col grid: brand | contact | links (spans 2 cols internally) */
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr 2fr;
  gap: var(--sp-6);
  align-items: start;
}

@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

/* Brand column */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.site-footer__logo {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-bone) !important;
  text-decoration: none;
}

.site-footer__tagline {
  font-size: var(--fs-small);
  color: rgba(247, 248, 250, 0.7);
  line-height: var(--leading-snug);
  max-width: 28ch;
}

/* Contact column */
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.site-footer__contact-label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-bone);
  margin-bottom: var(--sp-1);
}

.site-footer__email,
.site-footer__phone {
  font-size: var(--fs-small);
  color: rgba(247, 248, 250, 0.85);
}

.site-footer__address {
  font-size: var(--fs-small);
  color: rgba(247, 248, 250, 0.7);
  line-height: var(--leading-snug);
}

/* Links column — contains 3 sub-columns (Services / Industries / Legal) */
.site-footer__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

@media (max-width: 900px) {
  .site-footer__links {
    grid-template-columns: repeat(3, 1fr);
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .site-footer__links {
    grid-template-columns: 1fr 1fr;
    grid-column: auto;
  }
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.site-footer__col-title {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-bone);
  margin-bottom: var(--sp-2);
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.site-footer__col ul li {
  margin: 0;
  padding: 0;
}

.site-footer__col ul li a {
  font-size: var(--fs-small);
  color: rgba(247, 248, 250, 0.85);
  text-decoration: none;
}

.site-footer__col ul li a:hover {
  color: var(--c-copper);
}

/* Coarse-pointer (touch) 44px tap targets — desktop hover spacing untouched (#25) */
@media (pointer: coarse) {
  .site-footer__col ul li a,
  .site-footer__lang a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Legacy nav-based column titles (kept for compat) */
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.site-footer__nav-title {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-bone);
  margin-bottom: var(--sp-2);
}

/* Bottom bar */
.site-footer__bottom {
  border-top: 1px solid rgba(247, 248, 250, 0.1);
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--c-white);
}

.site-footer .site-footer__copy,
.site-footer p.site-footer__copy {
  color: #ffffff !important;
  margin: 0;
  opacity: 0.92;
}

/* Footer language switcher — align to header style */
.site-footer__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-footer__lang a {
  color: rgba(247, 248, 250, 0.65);
}

.site-footer__lang a:hover {
  color: var(--c-copper);
}

.site-footer__lang a[aria-current="page"] {
  color: var(--c-copper);
}

/* Separator between EN and ES in footer — match header style (pipe) */
.site-footer__lang span[aria-hidden="true"] {
  color: rgba(247, 248, 250, 0.25);
  font-weight: 400;
}

/* ============================================================
 * SECTION DIVIDERS
 * ============================================================ */
.divider {
  height: 1px;
  background-color: var(--c-fog);
  margin-block: var(--sp-7);
}

/* Diagonal clip-path transition — used between major sections */
.section-clip {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  margin-bottom: calc(-1 * var(--sp-8));
}

.section-clip--reverse {
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
  margin-top: calc(-1 * var(--sp-8));
}

/* ============================================================
 * SCROLL REVEAL — base state (animated by scroll-animations.js)
 * ============================================================ */
[data-animate] {
  opacity: 0;
  transform: translateY(var(--reveal-translate-y));
  transition:
    opacity var(--dur-medium) var(--ease-out),
    transform var(--dur-medium) var(--ease-out);
  transition-delay: var(--animation-delay, 0ms);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Larger reveal travel for big headers/bands so the rise reads deliberate (#31) */
[data-animate][data-reveal="lg"] {
  --reveal-translate-y: 28px;
}

/* Reduced motion: show immediately without motion */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}