/* Gateway — front page only. Builds entirely on tokens/components already
   defined in school.css (the shared base). See the Phase 2 report §B. */

.fv-gw-hero { position: relative; }

/* ---- Desktop hover-expand panels --------------------------------------- */
.fv-gw-desktop { display: none; height: 92svh; width: 100%; }
@media (min-width: 1024px) { .fv-gw-desktop { display: flex; position: relative; } }

.fv-gw-panel { position: relative; height: 100%; min-width: 0; flex-shrink: 0; flex-grow: 0; overflow: hidden; }
.fv-gw-panel__bg { position: absolute; inset: -1rem; }
.fv-gw-panel__bg img { width: 100%; height: 100%; object-fit: cover; }
.fv-gw-panel__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,20,20,0.74), rgba(20,20,20,0.15) 55%, rgba(20,20,20,0.3)); pointer-events: none; }
.fv-gw-panel__wash { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.25; transition: opacity 0.5s ease; pointer-events: none; }
.fv-world--primary .fv-gw-panel__wash { background: linear-gradient(to top, color-mix(in srgb, var(--fv-primary-accent) 50%, transparent), transparent); }
.fv-world--secondary .fv-gw-panel__wash { background: linear-gradient(to top, color-mix(in srgb, var(--fv-secondary-accent) 45%, transparent), transparent); }
.fv-world--industry .fv-gw-panel__wash { background: linear-gradient(to top, color-mix(in srgb, var(--fv-industry-accent) 40%, transparent), transparent); }
.fv-gw-panel.is-active .fv-gw-panel__wash { opacity: 0.85; }
.fv-gw-panel__wash--static { opacity: 0.7; }

.fv-gw-panel__hit { position: absolute; inset: 0; z-index: 10; width: 100%; height: 100%; cursor: pointer; background: transparent; border: none; padding: 0; }

.fv-gw-panel__collapsed { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.25rem; color: var(--fv-paper); pointer-events: none; opacity: 1; transition: opacity 0.25s ease; }
.fv-gw-panel.is-active .fv-gw-panel__collapsed { opacity: 0; }
/* Same explicit-color reasoning as .fv-gw-panel__headline above — this was
   also inheriting from .fv-gw-panel__collapsed rather than setting its own
   color. Lower risk in practice (it's a <span>, and Divi's own global
   heading rules are what caused the reported bug), but identical pattern,
   so hardened the same way for the idle/collapsed panel state. */
.fv-gw-panel__vertical { writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(1.1rem, 2.6vw, 1.75rem); font-weight: 500; color: var(--fv-paper) !important; }
.fv-gw-panel__index { font-family: var(--fv-font-mono); font-size: 0.625rem; color: rgba(255,253,248,0.5); }

.fv-gw-panel__expanded { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; padding: 3rem; color: var(--fv-paper); pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
.fv-gw-panel.is-active .fv-gw-panel__expanded { opacity: 1; }
/* Explicit color, not inherited from .fv-gw-panel__expanded/.fv-gw-mscreen__content
   (which only set color on the PARENT). A production site running Divi as
   the active theme (the Food Village build renders via a theme-independent
   router — see the mu-plugins — Divi itself is never touched) applies its
   own default heading color directly to every <h2>, and a directly-targeted
   rule always wins over inherited color regardless of specificity. Every
   sibling text element here (.fv-gw-panel__tagline, .fv-kicker, .fv-chip
   span, .fv-gw-panel__cta) already sets its own color explicitly for
   exactly this reason — this was the one element that didn't. Scoped to
   this one Food Village component class only; !important is deliberate
   here since Divi's own heading-color specificity is unknown and outside
   this project's control — nothing broader than this single selector is
   affected. */
.fv-gw-panel__headline { margin: 0.75rem 0 0; font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; font-size: clamp(2rem, 4vw, 3.4rem); text-wrap: balance; max-width: 26rem; color: var(--fv-paper) !important; }
.fv-gw-panel__headline--upper { text-transform: uppercase; }
.fv-gw-panel__tagline { margin: 1rem 0 0; max-width: 24rem; font-size: 0.9375rem; line-height: 1.6; color: rgba(255,253,248,0.8); text-wrap: balance; }
.fv-gw-panel__cta { pointer-events: auto; margin-top: 1.75rem; display: inline-flex; width: fit-content; align-items: center; gap: 0.625rem; border-radius: var(--fv-radius-full); padding: 1rem 2rem; font-size: 1rem; font-weight: 600; color: var(--fv-ink); box-shadow: 0 12px 24px rgba(20,20,20,0.18); transition: transform 0.15s ease; }
.fv-gw-panel__cta:hover { transform: translateY(-2px); }
.fv-world--primary .fv-gw-panel__cta { background: var(--fv-primary-accent); }
.fv-world--secondary .fv-gw-panel__cta { background: var(--fv-secondary-accent); }
.fv-world--industry .fv-gw-panel__cta { background: var(--fv-industry-accent); }

.fv-chip { margin-top: 1.25rem; }
.fv-chip--plain { padding: 0.4rem 0.875rem; }
.fv-world--primary .fv-chip--plain { border-color: color-mix(in srgb, var(--fv-primary-accent) 60%, transparent); }
.fv-world--industry .fv-chip--plain { border-color: color-mix(in srgb, var(--fv-industry-accent) 60%, transparent); }

.fv-gw-seam { position: absolute; inset-block: 0; z-index: 30; width: 2px; transform: translateX(-50%); pointer-events: none; opacity: 0.45; background: linear-gradient(180deg, var(--fv-green), var(--fv-blue), var(--fv-gold), var(--fv-red), var(--fv-green)); background-size: 100% 400%; animation: rainbow-shimmer 18s linear infinite; }

/* ---- Mobile scroll-snap stack ------------------------------------------ */
.fv-gw-mobile { position: relative; }
@media (min-width: 1024px) { .fv-gw-mobile { display: none; } }

.fv-gw-mscreen { position: relative; height: 100svh; scroll-snap-align: start; overflow: hidden; }
.fv-gw-mobile { height: 100svh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }

.fv-gw-mscreen__content { position: relative; z-index: 10; display: flex; height: 100%; flex-direction: column; justify-content: flex-end; gap: 1rem; padding: 1.5rem 1.5rem 6.5rem; color: var(--fv-paper); }
.fv-gw-mscreen__headline { font-size: clamp(2rem, 8vw, 2.75rem); }

.fv-gw-peek { position: absolute; inset-inline: 0; bottom: 0; z-index: 20; display: flex; height: 72px; width: 100%; align-items: center; gap: 0.75rem; border-top: 1px solid rgba(247,241,230,0.1); background: rgba(20,20,20,0.55); backdrop-filter: blur(4px); padding: 0 1.5rem; color: var(--fv-paper); border-left: none; border-right: none; border-bottom: none; cursor: pointer; }
.fv-gw-peek__thumb { display: block; height: 40px; width: 40px; flex-shrink: 0; overflow: hidden; border-radius: 50%; }
.fv-gw-peek__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fv-gw-peek__text { flex: 1; text-align: left; }
.fv-gw-peek__label { display: block; font-family: var(--fv-font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,253,248,0.5); }
.fv-gw-peek__name { display: block; font-family: var(--fv-font-display); font-weight: 500; font-size: 1rem; }
.fv-gw-peek__arrow { font-size: 1rem; color: rgba(255,253,248,0.6); }

.fv-gw-dots { position: fixed; right: 0.75rem; top: 50%; z-index: 30; display: flex; transform: translateY(-50%); flex-direction: column; gap: 0.75rem; }
@media (min-width: 1024px) { .fv-gw-dots { display: none; } }
.fv-gw-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255,253,248,0.4); border: none; padding: 0; cursor: pointer; transition: width 0.15s ease, height 0.15s ease; }
.fv-gw-dot.is-active { width: 0.75rem; height: 0.75rem; }

/* ---- Proof strip --------------------------------------------------------- */
.fv-proof-eyebrow { margin-bottom: 2rem; display: flex; align-items: center; gap: 0.75rem; }
.fv-proof-eyebrow__line { height: 2px; width: 2rem; border-radius: var(--fv-radius-full); opacity: 0.6; background: linear-gradient(180deg, var(--fv-green), var(--fv-blue), var(--fv-gold), var(--fv-red), var(--fv-green)); background-size: 100% 400%; animation: rainbow-shimmer 18s linear infinite; }
.fv-proof-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .fv-proof-grid { grid-template-columns: repeat(3, 1fr); } }
.fv-proof-card { display: flex; flex-direction: column; justify-content: space-between; border-radius: 1.5rem; padding: 1.75rem; box-shadow: 0 1px 2px rgba(20,20,20,0.06); min-height: 220px; }
.fv-proof-card--primary { background: var(--fv-paper); box-shadow: inset 0 0 0 1px var(--fv-kraft); }
.fv-proof-card--secondary { background: var(--fv-ink); color: var(--fv-paper); clip-path: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%); }
.fv-proof-card--industry { background: #1c2624; color: var(--fv-paper); box-shadow: inset 0 0 0 1px #37454a; }
.fv-proof-card__quote { margin: 1.5rem 0 0; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.3; }
.fv-proof-card--primary .fv-proof-card__quote { color: #3a2413; }
.fv-proof-card--secondary .fv-proof-card__quote { text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; }
.fv-proof-card__label { margin-top: 1.5rem; font-family: var(--fv-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; }
.fv-proof-card--primary .fv-proof-card__label { color: rgba(20,20,20,0.4); }
.fv-proof-card--secondary .fv-proof-card__label { color: rgba(255,253,248,0.5); }
.fv-proof-card--industry .fv-proof-card__label { color: rgba(20,20,20,0.4); }

/* ---- Recognition --------------------------------------------------------- */
.fv-recognition-grid { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .fv-recognition-grid { grid-template-columns: repeat(2, 1fr); } }
.fv-recognition-card { display: flex; align-items: center; gap: 1rem; border-radius: var(--fv-radius-2xl); border: 1px solid rgba(20,20,20,0.1); background: var(--fv-paper); padding: 1.25rem; }
.fv-recognition-card__image { position: relative; height: 3.5rem; width: 3.5rem; flex-shrink: 0; overflow: hidden; border-radius: 0.75rem; box-shadow: inset 0 0 0 1px rgba(20,20,20,0.1); }
.fv-recognition-card__image img { width: 100%; height: 100%; object-fit: cover; }
.fv-recognition-card__title { margin: 0; font-family: var(--fv-font-display); font-weight: 500; font-size: 1rem; line-height: 1.3; color: var(--fv-ink); }

/* ---- Contact --------------------------------------------------------------- */
.fv-gw-contact { border-top: 1px solid rgba(247,241,230,0.1); background: var(--fv-ink); padding: 2.5rem 0 3rem; color: var(--fv-paper); }
.fv-gw-contact__inner { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 640px) { .fv-gw-contact__inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.fv-gw-contact__phone-email { font-size: 1.125rem; font-weight: 500; }
.fv-gw-contact__phone-email a:hover { color: var(--fv-cream); }
.fv-gw-contact__social { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.fv-gw-contact__social a { display: flex; height: 2.25rem; width: 2.25rem; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(247,241,230,0.15); color: rgba(255,253,248,0.7); }
.fv-gw-contact__social a:hover { border-color: rgba(247,241,230,0.35); color: var(--fv-paper); }
.fv-gw-contact__utility { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(247,241,230,0.08); font-size: 0.75rem; color: rgba(255,253,248,0.35); text-align: center; }
@media (min-width: 640px) { .fv-gw-contact__utility { text-align: left; } }
.fv-gw-contact__utility a { color: rgba(255,253,248,0.55); text-decoration: underline; text-underline-offset: 0.15em; }
.fv-gw-contact__utility a:hover { color: var(--fv-paper); }