/* wp-content/themes/mosaic/assets/css/front-page.css */
/* ============================================================================
   Landing-page section styles. Loaded only on the front page (see
   inc/enqueue.php → mosaic_conditional_page_styles). Tokens come from
   design-system.css; component-internal pixel values (hero rhythm, motif
   geometry) are the authoritative §4.6 / handoff hero spec. Mobile-first.
   ============================================================================ */

/* ============================================================================
   HERO  (#top) — DSB §4.6 / handoff README §Hero
   ============================================================================ */
.hero {
  padding: 88px 0 72px; /* §4.6 hero spec */
  position: relative;
  overflow: hidden;
}

/* Mobile-first: single column; two columns from 881px up. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.hero .eyebrow {
  margin: 0;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: 1.02; /* hero display spec */
  letter-spacing: -0.025em; /* hero display spec */
  margin: 18px 0 0;
  text-wrap: balance;
}

.hero-title em {
  font-style: normal;
  color: var(--sage-600); /* accent word */
}

/* Inherits font/colour from global .lead; hero adds measure + rhythm. */
.hero-lead {
  max-width: 30ch;
  margin: 22px 0 30px;
}

.hero-cta {
  display: flex;
  gap: 14px; /* hero spec */
  flex-wrap: wrap;
}

/* ----- Triad chips (Create · Grow · Connect) ----------------------------- */
.triad {
  display: flex;
  gap: 10px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.triad span {
  font-family: var(--font-mono);
  font-size: 12px; /* mono chip spec */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-700);
  padding: 7px 14px;
  border: 1px solid var(--sage-200);
  border-radius: var(--r-pill);
  background: var(--sage-50);
}

/* ============================================================================
   MOSAIC-M MOTIF  (decorative, aria-hidden) — 5×3 tile grid spelling "M"
   Grid map + palette mirror MotifM in the handoff ui.jsx.
   ============================================================================ */
.motif {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  aspect-ratio: 5 / 4;
}

.motif .t {
  border-radius: var(--r-sm); /* 8px */
}

/* Outer corners get a stadium radius to echo the logo silhouette. */
.motif .t.q-tl { border-top-left-radius: 90px; }
.motif .t.q-tr { border-top-right-radius: 90px; }
.motif .t.q-bl { border-bottom-left-radius: 90px; }
.motif .t.q-br { border-bottom-right-radius: 90px; }

.motif .t--s500 { background: var(--sage-500); }
.motif .t--s700 { background: var(--sage-700); }
.motif .t--s300 { background: var(--sage-300); }
.motif .t--s800 { background: var(--sage-800); }

/* ============================================================================
   RESPONSIVE — two-column hero from 881px (handoff collapse point)
   ============================================================================ */
@media (min-width: 881px) {
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr; /* §4.6 hero spec */
    gap: 56px;
  }
}

/* ============================================================================
   SPOTLIGHT  (#approach) — DSB §4.6 / handoff §Spotlight
   Full dark band; image placeholder (swap for real photography at MOS-124) +
   featured-client copy. White headings use --primary-ink (the system white).
   Mobile-first: stacked; two columns from 881px.
   ============================================================================ */
.spot {
  background: var(--sage-800);
  color: var(--on-dark);
}

.spot .eyebrow {
  color: var(--sage-300);
}

.spot .rule {
  background: color-mix(in srgb, var(--surface) 18%, transparent); /* §4.6: rgba(255,255,255,.18) on dark */
}

.spot h2 {
  color: var(--primary-ink);
}

.spot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

.spot-img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--sage-400), var(--sage-700)); /* placeholder — swap for photo (MOS-124) */
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Real spotlight photo (set in Customize → Mosaic Images) over the gradient. */
.spot-img-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spot-img .tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-ink);
  background: rgba(0, 0, 0, 0.3); /* photographic scrim — no black token */
  padding: 7px 13px;
  border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.spot h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--primary-ink);
  letter-spacing: var(--tracking-tight);
  margin: 10px 0 16px;
}

.spot p {
  color: var(--on-dark-muted);
  max-width: 46ch;
}

.spot .lnk {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 18px;
  font-size: 15px;
  font-weight: var(--fw-semi);
  color: var(--sage-300);
}

.spot .lnk:hover {
  gap: var(--space-3);
  color: var(--primary-ink);
}

.spot .lnk svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease);
}

@media (min-width: 881px) {
  .spot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spot .lnk,
  .spot .lnk svg {
    transition: none;
  }
}

/* ============================================================================
   SELECTED WORK  (#work) — DSB §4.6 / handoff §Work grid + modal
   Filter chips + 3→2→1 card grid + detail modal. Per-project card gradients
   come from the inline `.grad-{id}` stylesheet (inc/enqueue.php). F04: chips
   and modal close use ≥44px tap targets.
   ============================================================================ */

/* ----- Filter chips ------------------------------------------------------- */
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* F04 tap target */
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.chip:hover {
  border-color: var(--sage-400);
  color: var(--sage-700);
}

.chip.on {
  background: var(--sage-800);
  border-color: var(--sage-800);
  color: var(--primary-ink);
}

/* ----- Card grid (mobile-first 1 → 2 → 3) --------------------------------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.card[hidden] {
  display: none;
}

.card-ph {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

/* Real featured image (MOS-124) over the gradient fallback. */
.card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bottom scrim so the white location label stays legible over any photo (F01). */
.card-ph::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
  pointer-events: none;
  z-index: 1;
}

.card-ph .loc {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-ink);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); /* legibility over gradient/photo */
  z-index: 2;
}

.card-bd {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 22px;
}

.card-bd .svc {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage-600);
}

.card-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 21px;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin: 7px 0;
}

.card-title a {
  color: inherit;
}

/* Stretched link — whole card clickable, accessible name = the title only. */
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card-short {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-500);
}

.card .more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: var(--fw-semi);
  color: var(--sage-600);
}

.card .more svg {
  width: 14px;
  height: 14px;
}

@media (min-width: 561px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 881px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----- Detail modal ------------------------------------------------------- */
.modal-bg {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--ink-900) 55%, transparent); /* §4.6 overlay rgba(31,35,30,.55) */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.modal-bg[hidden] {
  display: none;
}

.modal-bg.is-open {
  opacity: 1;
}

.modal {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.modal-bg.is-open .modal {
  opacity: 1;
  transform: none;
}

.modal-ph {
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

/* Card image cloned onto the modal header (MOS-124). */
.modal-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px; /* F04 tap target */
  height: 44px;
  padding: 0;
  color: var(--primary-ink);
  background: rgba(0, 0, 0, 0.35); /* scrim over gradient header */
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal-x svg {
  width: 18px;
  height: 18px;
}

.modal-bd {
  padding: 26px 30px 30px;
}

.modal-bd .modal-svc {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-600);
}

.modal-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 28px;
  letter-spacing: var(--tracking-display);
  color: var(--ink-900);
  margin: 8px 0 14px;
}

.modal-story {
  color: var(--ink-700);
  line-height: 1.6;
}

.modal-story p {
  margin: 0 0 1em;
}

.modal-story p:last-child {
  margin-bottom: 0;
}

.modal-cta {
  margin-top: 22px;
}

.modal-cta[hidden] {
  display: none;
}

/* Background scroll lock while the modal is open (toggled in interactions.js). */
body.modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .chip,
  .modal-bg,
  .modal {
    transition: none;
  }

  .card:hover {
    transform: none;
  }
}

/* ============================================================================
   enoTec SOFTWARE BAND  (#enotec) — DSB §4.6 / handoff §"We build software, too"
   Rounded dark band; copy + App Store CTAs left, portrait image slot right.
   Per CD directive the slot holds a real enoTec-on-mobile image (no CSS phone
   mock) — gradient placeholder until MOS-124. Mobile-first.
   ============================================================================ */
.band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  padding: 38px 32px;
  background: var(--sage-800);
  color: var(--on-dark);
  border-radius: var(--r-2xl);
  overflow: hidden;
}

.band .eyebrow {
  color: var(--sage-300);
}

.band h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: var(--primary-ink);
  margin: 10px 0 14px;
}

.band p {
  max-width: 44ch;
  margin: 0 0 24px;
  color: var(--on-dark-muted);
}

.band-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.enotec-shot {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 9 / 18;
  border-radius: var(--r-xl);
  background: linear-gradient(155deg, var(--sage-400), var(--sage-700)); /* placeholder — real image at MOS-124 */
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* The enoTec image fills the portrait slot; .enotec-shot keeps the size/shape. */
.enotec-shot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 781px) {
  .band {
    grid-template-columns: 1.3fr 0.7fr;
    padding: 52px 56px;
  }
}

/* ============================================================================
   CONTACT  (#contact) — DSB §4.6 / handoff §Contact
   Section head + Contact Form 7 enquiry form, styled to the field spec. CF7's
   response output is restyled to the brand; the honeypot is hidden.
   ============================================================================ */
.contact {
  background: var(--paper-2);
}

.contact .sec-head {
  margin-bottom: 20px;
}

.contact-intro {
  max-width: 48ch;
  margin: 0 0 28px;
}

.form {
  max-width: 540px;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-900);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sage-500);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.field textarea {
  min-height: 96px;
  resize: vertical;
}

/* Honeypot — off-screen, out of the tab order. */
.mosaic-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* CF7 response + validation — restyled to the brand (success = soft green). */
.wpcf7 .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 16px 18px;
  font-weight: var(--fw-semi);
  color: var(--ink-900);
  background: var(--status-good-soft);
  border: 1px solid var(--status-good);
  border-radius: var(--r-md);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  background: var(--status-alert-soft);
  border-color: var(--status-alert);
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--clay-600);
}

.wpcf7-spinner {
  margin-left: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .field input,
  .field textarea {
    transition: none;
  }
}