/* ==========================================================================
   GENESIS EVENTS — COMPONENTS
   Reusable, token-driven building blocks for custom PHP/ACF page templates.
   Requires genesis-tokens.css (loaded first).

   Everything is namespaced under .gen-* so it never collides with Ohio,
   Elementor, or WooCommerce styles. Use these classes in your PHP partials.
   ========================================================================== */

/* --- Layout primitives --------------------------------------------------- */
.gen-section {
  padding-block: var(--gen-section-y);
}
.gen-section--dark {
  background: var(--gen-dark);
  color: var(--gen-color-on-dark);
}
.gen-section--alt {
  background: var(--gen-color-bg-alt);
}
.gen-container {
  width: 100%;
  max-width: var(--gen-container);
  margin-inline: auto;
  padding-inline: var(--gen-gutter);
}
.gen-container--narrow { max-width: var(--gen-container-text); }

.gen-grid { display: grid; gap: var(--gen-space-5); }
.gen-grid--2 { grid-template-columns: repeat(2, 1fr); }
.gen-grid--3 { grid-template-columns: repeat(3, 1fr); }
.gen-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .gen-grid--3, .gen-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .gen-grid--2, .gen-grid--3, .gen-grid--4 { grid-template-columns: 1fr; }
}

/* --- Typography ---------------------------------------------------------- */
.gen-eyebrow {
  font-family: var(--gen-font-body);
  font-size: var(--gen-eyebrow);
  font-weight: var(--gen-fw-semibold);
  letter-spacing: var(--gen-ls-eyebrow);
  text-transform: uppercase;
  color: var(--gen-gold);
  display: inline-block;
  margin-bottom: var(--gen-space-3);
}
.gen-display {
  font-family: var(--gen-font-display);
  font-weight: var(--gen-fw-light);
  font-size: var(--gen-display);
  line-height: var(--gen-lh-tight);
  letter-spacing: -0.01em;
  color: var(--gen-color-heading);
}
.gen-h1, .gen-h2, .gen-h3, .gen-h4 {
  font-family: var(--gen-font-heading);
  font-weight: var(--gen-fw-semibold);
  color: var(--gen-color-heading);
  margin: 0 0 var(--gen-space-3);
}
.gen-h1 { font-size: var(--gen-h1); line-height: 1.05; letter-spacing: -0.045em; }
.gen-h2 { font-size: var(--gen-h2); line-height: 1.15; letter-spacing: -0.04em; }
.gen-h3 { font-size: var(--gen-h3); line-height: 1.25; }
.gen-h4 { font-size: var(--gen-h4); line-height: 1.30; }
.gen-lead {
  font-size: var(--gen-text-lg);
  line-height: var(--gen-lh-body);
  color: var(--gen-color-muted);
  max-width: 46ch;
}
.gen-prose { font-size: var(--gen-text); line-height: var(--gen-lh-body); color: var(--gen-color-body); }
.gen-prose p { margin-bottom: var(--gen-space-4); }
.gen-prose a { color: var(--gen-color-link); text-decoration: underline; text-underline-offset: 3px; }
.gen-prose a:hover { color: var(--gen-color-link-hover); }

/* On dark grounds, flip text colors */
.gen-section--dark .gen-h1,
.gen-section--dark .gen-h2,
.gen-section--dark .gen-h3,
.gen-section--dark .gen-h4,
.gen-section--dark .gen-display { color: var(--gen-color-on-dark); }
.gen-section--dark .gen-lead,
.gen-section--dark .gen-prose { color: var(--gen-color-on-dark-muted); }

/* Gold rule (matches the site's signature divider) */
.gen-rule { width: 64px; height: 3px; background: var(--gen-gold); border: 0; margin: var(--gen-space-4) 0; }

/* --- Buttons ------------------------------------------------------------- */
.gen-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--gen-font-body);
  font-size: 0.95rem;
  font-weight: var(--gen-fw-semibold);
  letter-spacing: 0.02em;
  padding: 0.9em 1.8em;
  border-radius: var(--gen-radius-btn);
  border: 2px solid var(--gen-gold);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--gen-transition);
}
.gen-btn--primary { background: var(--gen-gold); color: var(--gen-dark); }
.gen-btn--primary:hover { background: var(--gen-gold-bright); border-color: var(--gen-gold-bright); }
.gen-btn--outline { background: transparent; color: var(--gen-gold); }
.gen-btn--outline:hover { background: var(--gen-gold); color: var(--gen-dark); }
.gen-section--dark .gen-btn--outline { color: var(--gen-white); border-color: rgba(255,255,255,.4); }
.gen-section--dark .gen-btn--outline:hover { background: var(--gen-gold); border-color: var(--gen-gold); color: var(--gen-dark); }

/* --- Card ---------------------------------------------------------------- */
.gen-card {
  background: var(--gen-white);
  border: var(--gen-border);
  border-radius: var(--gen-radius-lg);
  padding: var(--gen-space-5);
  transition: box-shadow var(--gen-transition), transform var(--gen-transition);
}
.gen-card:hover { box-shadow: var(--gen-shadow-soft); transform: translateY(-3px); }
.gen-card__title { font-family: var(--gen-font-heading); font-size: var(--gen-h4); font-weight: var(--gen-fw-semibold); color: var(--gen-color-heading); margin-bottom: var(--gen-space-2); }
.gen-card__text  { font-size: var(--gen-text-sm); line-height: var(--gen-lh-body); color: var(--gen-color-muted); }
.gen-card img { border-radius: var(--gen-radius); max-width: 100%; height: auto; }

/* --- Hero ---------------------------------------------------------------- */
.gen-hero {
  position: relative;
  background: var(--gen-dark);
  color: var(--gen-white);
  /* extra top padding clears the theme's transparent fixed header */
  padding-top: clamp(8rem, 15vw, 12rem);
  padding-bottom: clamp(5rem, 12vw, 9rem);
  overflow: hidden;
}
.gen-hero__inner { max-width: 60ch; }
.gen-hero .gen-display { color: var(--gen-white); margin-bottom: var(--gen-space-4); }
.gen-hero__sub { font-family: var(--gen-font-serif); font-style: italic; font-size: var(--gen-text-lg); color: #d7d3c6; margin-bottom: var(--gen-space-5); }

/* --- Media (image + text split) ------------------------------------------ */
.gen-media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gen-space-6); align-items: center; }
.gen-media--reverse .gen-media__text { order: 2; }
.gen-media img { width: 100%; height: auto; border-radius: var(--gen-radius-lg); }
@media (max-width: 800px) { .gen-media { grid-template-columns: 1fr; } .gen-media--reverse .gen-media__text { order: 0; } }

/* ========================================================================
   EDITORIAL v2 — de-template layer (asymmetry, depth, oversized type)
   ======================================================================== */

/* Tonal depth + hairline separators */
.gen-section--near-black { background:#17181b; color:var(--gen-color-on-dark); }
.gen-section--dark + .gen-section--dark,
.gen-section--dark + .gen-section--near-black,
.gen-section--near-black + .gen-section--dark { border-top:1px solid rgba(204,166,74,.16); }

/* Oversized display heading */
.gen-display-xl {
  font-family:var(--gen-font-display); font-weight:var(--gen-fw-light);
  font-size:clamp(2.6rem, 6vw, 5.5rem); line-height:1.02; letter-spacing:-.01em;
  color:#fff; margin:0;
}
.gen-section--alt .gen-display-xl, .gen-section--white .gen-display-xl { color:var(--gen-color-heading); }

/* Editorial section index: NN — LABEL with gold hairline */
.gen-index {
  display:flex; align-items:center; gap:.85rem;
  font-size:var(--gen-eyebrow); letter-spacing:var(--gen-ls-eyebrow); text-transform:uppercase;
  font-weight:var(--gen-fw-semibold); color:var(--gen-gold); margin-bottom:var(--gen-space-4);
}
.gen-index[data-num]::before {
  content:attr(data-num); font-family:var(--gen-font-serif); font-style:italic;
  font-size:1.5rem; color:var(--gen-gold); letter-spacing:0; line-height:1;
}
.gen-index::after { content:""; flex:1; max-width:88px; height:1px; background:rgba(204,166,74,.45); }

/* Statement — asymmetric two-column editorial block */
.gen-statement__grid {
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,6vw,6rem); align-items:start;
}
.gen-statement__body { padding-top:.9rem; }
.gen-statement__body .gen-btn { margin-top:var(--gen-space-4); }
@media (max-width:840px){ .gen-statement__grid{ grid-template-columns:1fr; gap:var(--gen-space-4);} }

/* Hero — taller, editorial meta row + scroll cue */
.gen-hero--tall { min-height:88vh; display:flex; align-items:center; }
.gen-hero__meta {
  display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:var(--gen-space-5);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.68);
}
.gen-hero__meta span { display:inline-flex; align-items:center; }
.gen-hero__meta span + span::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--gen-gold); margin-right:1.6rem; }
.gen-hero__scroll {
  position:absolute; left:var(--gen-gutter); bottom:2.2rem;
  font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(255,255,255,.55);
  display:flex; align-items:center; gap:.7rem;
}
.gen-hero__scroll::after { content:""; width:46px; height:1px; background:rgba(255,255,255,.4); }

/* Feature cards — editorial: numbered, taller, gold accent rule */
.gen-features .gen-grid { counter-reset: feat; }
.gen-features .gen-feature-card { counter-increment: feat; min-height:clamp(360px, 32vw, 480px); }
.gen-features .gen-feature-card__body::before {
  content:"0" counter(feat); display:block; font-family:var(--gen-font-serif); font-style:italic;
  font-size:1.15rem; color:var(--gen-gold); margin-bottom:.45rem;
}
.gen-features .gen-feature-card__title { position:relative; padding-top:.7rem; }
.gen-features .gen-feature-card__title::before {
  content:""; position:absolute; top:0; left:0; width:28px; height:2px; background:var(--gen-gold);
}

/* Media — full-bleed split (image to the page edge) */
.gen-section--flush > .gen-container { max-width:none; padding-inline:0; }
.gen-media--bleed { grid-template-columns:1fr 1fr; gap:0; align-items:stretch; }
.gen-media--bleed .gen-media__media { min-height:clamp(380px,42vw,640px); }
.gen-media--bleed .gen-media__media img { width:100%; height:100%; object-fit:cover; border-radius:0; }
.gen-media--bleed .gen-media__text { padding:clamp(2.5rem,6vw,6rem); display:flex; flex-direction:column; justify-content:center; }
@media (max-width:800px){ .gen-media--bleed{ grid-template-columns:1fr; } .gen-media--bleed .gen-media__text{ padding:var(--gen-space-5) var(--gen-gutter); } }

/* Gallery — full-bleed seamless mosaic */
.gen-gallery--flush { grid-template-columns:repeat(3,1fr); gap:4px; }
.gen-gallery--flush .gen-gallery__item { aspect-ratio:3/2; border-radius:0; }
.gen-gallery--flush .gen-gallery__cap { left:var(--gen-space-4); bottom:var(--gen-space-4); }
@media (max-width:820px){ .gen-gallery--flush{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .gen-gallery--flush{ grid-template-columns:1fr;} }

/* Stats — bigger with gold hairline dividers */
.gen-stats--rule .gen-stat { padding:var(--gen-space-3) var(--gen-space-4); }
.gen-stats--rule .gen-stat + .gen-stat { border-left:1px solid rgba(204,166,74,.22); }
.gen-stats--rule .gen-stat__value { font-size:clamp(2.6rem,4.5vw,3.8rem); }
@media (max-width:600px){ .gen-stats--rule .gen-stat + .gen-stat{ border-left:0; border-top:1px solid rgba(204,166,74,.22);} }

/* Contrast fixes: near-black must get the same on-dark text treatment as dark */
:root { --gen-color-on-dark-muted: #b6bac2; }   /* lightened for readable body copy on dark */
.gen-section--near-black .gen-h1, .gen-section--near-black .gen-h2,
.gen-section--near-black .gen-h3, .gen-section--near-black .gen-h4,
.gen-section--near-black .gen-display, .gen-section--near-black .gen-display-xl,
.gen-section--near-black .gen-card__title { color:#fff; }
.gen-section--near-black .gen-lead, .gen-section--near-black .gen-prose,
.gen-section--dark .gen-lead { color:var(--gen-color-on-dark-muted); }
.gen-section--near-black .gen-prose a { color:var(--gen-gold-bright); }
.gen-section--near-black .gen-faq__q { color:#fff; }
.gen-section--near-black .gen-faq, .gen-section--near-black .gen-faq__item { border-color:rgba(255,255,255,.15); }
/* stat labels readable on any dark ground */
.gen-section--dark .gen-stat__label, .gen-section--near-black .gen-stat__label { color:rgba(255,255,255,.6); }
/* feature-card copy a touch brighter */
.gen-feature-card__text { color:rgba(255,255,255,.86); }
/* cap hero height so it never dominates on tall viewports */
.gen-hero--tall { min-height:min(88vh, 760px); }

/* --- Feature cards (image-backed, homepage "bespoke" style) -------------- */
.gen-features__head { max-width: 52ch; margin-bottom: var(--gen-space-6); }
.gen-feature-card {
  position: relative;
  display: block;
  min-height: 300px;
  border-radius: var(--gen-radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  transition: transform var(--gen-transition), box-shadow var(--gen-transition);
}
.gen-feature-card::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(255,255,255,.08); border-radius: inherit; pointer-events: none;
}
.gen-feature-card:hover { transform: translateY(-4px); box-shadow: var(--gen-shadow-deep); }
.gen-feature-card__body {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--gen-space-4);
}
.gen-feature-card__title {
  font-family: var(--gen-font-heading); font-weight: var(--gen-fw-semibold);
  font-size: var(--gen-h4); color: #fff; margin-bottom: .35rem;
}
.gen-feature-card__text { font-size: var(--gen-text-sm); line-height: 1.5; color: rgba(255,255,255,.78); }

/* --- Showcase gallery grid ----------------------------------------------- */
.gen-gallery__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gen-space-4); margin-bottom: var(--gen-space-5); flex-wrap: wrap;
}
.gen-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gen-space-3);
}
@media (max-width: 900px) { .gen-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gen-gallery { grid-template-columns: 1fr; } }
.gen-gallery__item {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--gen-radius); aspect-ratio: 4 / 3; text-decoration: none;
}
.gen-gallery__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(.2,.6,.2,1);
}
.gen-gallery__item:hover img { transform: scale(1.06); }
.gen-gallery__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,19,22,0) 45%, rgba(18,19,22,.82) 100%);
}
.gen-gallery__cap {
  position: absolute; left: var(--gen-space-3); bottom: var(--gen-space-3); z-index: 1;
  display: flex; flex-direction: column; line-height: 1.2;
}
.gen-gallery__cap strong { font-family: var(--gen-font-heading); font-weight: var(--gen-fw-semibold); font-size: 1.05rem; color: #fff; }
.gen-gallery__cap em { font-style: normal; font-size: 0.66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gen-gold); margin-top: 3px; }

/* --- FAQ (answer-first accordion) ---------------------------------------- */
.gen-faq { margin-top: var(--gen-space-4); border-top: var(--gen-border); }
.gen-faq__item { border-bottom: var(--gen-border); }
.gen-faq__q {
  font-family: var(--gen-font-heading);
  font-size: var(--gen-h4);
  font-weight: var(--gen-fw-semibold);
  color: var(--gen-color-heading);
  padding: var(--gen-space-4) 2.2rem var(--gen-space-4) 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.gen-faq__q::-webkit-details-marker { display: none; }
.gen-faq__q::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--gen-font-body); font-weight: 400; color: var(--gen-gold); font-size: 1.6rem; line-height: 1;
  transition: transform var(--gen-transition);
}
.gen-faq__item[open] .gen-faq__q::after { content: "\2013"; }
.gen-faq__a { padding-bottom: var(--gen-space-4); }
.gen-section--dark .gen-faq { border-color: rgba(255,255,255,.15); }
.gen-section--dark .gen-faq__item { border-color: rgba(255,255,255,.15); }
.gen-section--dark .gen-faq__q { color: var(--gen-white); }

/* --- Stat / proof row ---------------------------------------------------- */
.gen-stats { text-align: center; }
.gen-stat { text-align: center; }
.gen-stat__value { font-family: var(--gen-font-display); font-weight: var(--gen-fw-light); font-size: var(--gen-h2); color: var(--gen-gold); line-height: 1; }
.gen-stat__label { font-size: var(--gen-text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gen-color-muted); margin-top: var(--gen-space-2); }