/* ---------- Final homepage (Plan 008) ----------
   Loaded only on is_front_page() (see inc/enqueue.php). Extends the
   existing token/global/component system rather than introducing a
   parallel one — every colour, space, radius and font below is a
   var(--ga-*) already defined in tokens.css. Breakpoints follow the
   project's mobile-first convention already used in components.css
   (max-width: 47.9375em for the nav): min-width 48em (~768px), 64em
   (~1024px) and 90em (~1440px) here, so 375px is the unprefixed base. */

/* ---------- Hero ---------- */

.ga-home-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ga-space-5);
  align-items: center;
}

.ga-home-hero-copy .lead {
  max-width: 28rem;
}

.ga-home-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-space-2);
  margin-block-start: var(--ga-space-4);
}

.ga-home-hero-media {
  aspect-ratio: 4 / 3;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--ga-radius-sm);
}

.ga-home-hero-media .ga-work-viewer {
  margin-block: 0;
  height: 100%;
}

.ga-home-hero-media .ga-work-viewer-stage {
  height: 100%;
}

.ga-home-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 64em) {
  .ga-home-hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--ga-space-6);
    align-items: stretch;
  }

  .ga-home-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ga-home-hero-media {
    aspect-ratio: auto;
    min-height: 30rem;
  }
}

/* ---------- Premium Home placeholder (hero media, workshop tiles) ---------- */

.ga-home-placeholder {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  padding: var(--ga-space-3);
  background: linear-gradient(155deg, var(--ga-oak) 0%, var(--ga-black) 78%);
  border: var(--ga-border-width) solid var(--ga-surface-dark-border);
  overflow: hidden;
}

.ga-home-placeholder-motif {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ga-surface-dark-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--ga-surface-dark-border) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, black, transparent 70%);
  mask-image: radial-gradient(ellipse at 30% 20%, black, transparent 70%);
}

.ga-home-placeholder::after {
  content: "";
  position: absolute;
  top: var(--ga-space-2);
  right: var(--ga-space-2);
  width: 0.9rem;
  height: 0.9rem;
  border-top: var(--ga-rule-width) solid var(--ga-gold);
  border-right: var(--ga-rule-width) solid var(--ga-gold);
}

.ga-home-placeholder-label {
  position: relative;
  font-family: var(--ga-font-body);
  font-size: var(--ga-text-xs);
  font-weight: 600;
  letter-spacing: var(--ga-tracking-label);
  text-transform: uppercase;
  color: var(--ga-surface-dark-text);
}

/* ---------- Credibility strip ---------- */

.ga-home-credibility-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-space-2) var(--ga-space-4);
  list-style: none;
  margin: 0;
  padding-block: var(--ga-space-2);
  padding-inline: 0;
  border-block: var(--ga-border-width) solid var(--ga-border);
  font-family: var(--ga-font-body);
  font-size: var(--ga-text-sm);
  font-weight: 600;
  letter-spacing: var(--ga-tracking-wide);
  text-transform: uppercase;
  color: var(--ga-muted);
}

@media (min-width: 64em) {
  .ga-home-credibility-list {
    justify-content: space-between;
  }
}

.ga-home-credibility-list li {
  position: relative;
  padding-inline-start: var(--ga-space-3);
}

.ga-home-credibility-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5em;
  height: var(--ga-rule-width);
  background: var(--ga-gold);
}

.ga-home-credibility-list li:first-child {
  padding-inline-start: 0;
}

.ga-home-credibility-list li:first-child::before {
  display: none;
}

/* ---------- Connected capabilities ---------- */

.ga-home-capabilities h2 {
  max-width: 18ch;
}

.ga-home-capabilities > .ga-container > .lead {
  max-width: 32rem;
}

.ga-home-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: var(--ga-space-5) 0;
  padding: 0;
  counter-reset: none;
}

.ga-home-flow-item {
  display: flex;
  align-items: baseline;
  gap: var(--ga-space-2);
  padding-block: var(--ga-space-2);
  border-block-end: var(--ga-border-width) solid var(--ga-border);
}

.ga-home-flow-item:first-child {
  border-block-start: var(--ga-border-width) solid var(--ga-border);
}

.ga-home-flow-index {
  flex: none;
  font-family: var(--ga-font-display);
  font-size: var(--ga-text-2xl);
  font-weight: 600;
  color: var(--ga-gold);
  opacity: 0.55;
  line-height: 1;
}

.ga-home-flow-label {
  font-family: var(--ga-font-display);
  font-size: var(--ga-text-xl);
  font-weight: 600;
}

@media (min-width: 64em) {
  .ga-home-flow {
    flex-direction: row;
    align-items: stretch;
    gap: var(--ga-space-2);
  }

  .ga-home-flow-item {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ga-space-1);
    border-block-end: none;
    border-inline-start: var(--ga-border-width) solid var(--ga-border);
    padding-inline-start: var(--ga-space-2);
  }

  .ga-home-flow-item:first-child {
    border-block-start: none;
  }
}

.ga-home-capability-links h3 {
  font-size: var(--ga-text-base);
  text-transform: uppercase;
  letter-spacing: var(--ga-tracking-label);
  color: var(--ga-muted);
}

.ga-home-capability-links ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ga-home-capability-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ga-space-1) var(--ga-space-3);
  padding-block: var(--ga-space-2);
  border-block-end: var(--ga-border-width) solid var(--ga-border);
  text-decoration: none;
  color: inherit;
}

.ga-home-capability-links li:first-child .ga-home-capability-link {
  border-block-start: var(--ga-border-width) solid var(--ga-border);
}

.ga-home-capability-link-label {
  flex: none;
  font-family: var(--ga-font-body);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ga-gold);
  text-underline-offset: 0.2em;
}

.ga-home-capability-link:hover .ga-home-capability-link-label,
.ga-home-capability-link:focus-visible .ga-home-capability-link-label {
  text-decoration-thickness: var(--ga-rule-width);
}

.ga-home-capability-link-excerpt {
  flex: 1 1 20rem;
  font-family: var(--ga-font-display);
  font-size: var(--ga-text-lg);
  font-style: italic;
  color: var(--ga-muted);
}

/* ---------- Featured project ---------- */

.ga-home-featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ga-space-5);
  align-items: center;
}

.ga-home-featured-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ga-radius-sm);
  background: var(--ga-cream-2);
}

.ga-home-featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ga-home-featured-media .ga-work-viewer {
  margin-block: 0;
  height: 100%;
}

.ga-home-featured-media .ga-work-viewer-stage {
  height: 100%;
}

@media (min-width: 64em) {
  .ga-home-featured-grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: end;
    gap: var(--ga-space-6);
  }

  .ga-home-featured-media {
    aspect-ratio: 3 / 2;
  }
}

/* ---------- Workshop window ----------
   Not currently rendered on the live homepage (front-page.php does not
   call template-parts/home/workshop.php — see that file and Plan 008B in
   docs/exec-plans/active/008-final-homepage.md). Kept unchanged as
   backlog, ready to reactivate once real workshop photography/renders are
   approved. */

.ga-home-workshop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ga-space-2);
  margin-block-start: var(--ga-space-5);
}

.ga-home-workshop-tile {
  aspect-ratio: 1 / 1;
}

.ga-home-workshop-tile-1 {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

@media (min-width: 48em) {
  .ga-home-workshop-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .ga-home-workshop-tile-1 {
    grid-column: span 2;
    aspect-ratio: 1 / 1;
  }
}

@media (min-width: 90em) {
  .ga-home-workshop-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .ga-home-workshop-tile-1 {
    grid-column: span 1;
  }
}

/* ---------- Working method ---------- */

.ga-home-process-list {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-4);
  list-style: none;
  margin: var(--ga-space-5) 0 0;
  padding: 0;
}

.ga-home-process-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--ga-space-3);
}

.ga-home-process-index {
  grid-row: 1 / 3;
  font-family: var(--ga-font-display);
  font-size: var(--ga-text-2xl);
  font-weight: 600;
  color: var(--ga-gold);
  opacity: 0.55;
  line-height: 1;
}

.ga-home-process-label {
  margin: 0;
  font-size: var(--ga-text-lg);
}

.ga-home-process-description {
  margin: var(--ga-space-1) 0 0;
  color: var(--ga-muted);
}

/* ---------- Final project CTA ---------- */

.ga-home-final-cta-inner {
  position: relative;
  padding-block-start: var(--ga-space-4);
  text-align: center;
}

/* Reuses the exact gold rule accent already established by
   .final-cta::before in this file's sibling stylesheet (components.css) —
   the same visual language, not a new decoration. */
.ga-home-final-cta-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 3rem;
  height: var(--ga-rule-width);
  background: var(--ga-gold);
  transform: translateX(-50%);
}

.ga-home-final-cta-ctas {
  margin-block-start: var(--ga-space-3);
}

.ga-home-final-cta-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ga-space-1) var(--ga-space-4);
  list-style: none;
  margin: var(--ga-space-4) 0 0;
  padding: 0;
  font-family: var(--ga-font-body);
  font-size: var(--ga-text-sm);
}

.ga-home-final-cta-contacts a {
  text-decoration: none;
  color: var(--ga-surface-dark-text);
  border-bottom: var(--ga-border-width) solid var(--ga-surface-dark-border);
}

.ga-home-final-cta-contacts a:hover,
.ga-home-final-cta-contacts a:focus-visible {
  border-bottom-color: var(--ga-gold);
}