/**
 * Homepage (front-page.php + parts/home/*.php), MOCKUP §2.
 *
 * The page is built from the shared kit in style.css (tones, .fox-mediahead,
 * .fox-pagehead, section-head, cards, chips, bands, Instagram grid); this
 * file only places those parts the way the mockup does. Everything is scoped
 * under the .fox-home-* section classes. Tokens only (--tone-*, --c-*,
 * --fs-*, --space-*), no new colours or fonts.
 *
 * Measured against docs/mockup/sections/*.jpg with tools/mockup-compare.py
 * (viewport 1220 CSS px at DPR 1.2934 = the mockup's 1578 px).
 */

/* Type comes from the kit (style.css :root, measured on this mockup). The
   homepage's rhythm is tighter than the kit's --section-pad: each section's
   padding below is the mockup's, measured at the reference scale. */
.fox-home {
	--home-pad: clamp(18px, 1.8vw, 24px);                       /* 22 @1220 */
	--home-pad-end: clamp(16px, 1.5vw, 20px);                   /* 18 @1220 */
}
.fox-home > .fox-section { padding-block: var(--home-pad) var(--home-pad-end); }

/* --------------------------------------------------------------------------
   1–2. Hero photo (.fox-mediahead, capped 16:9) + dark text band (MOCKUP 2.2, 2.3)
   -------------------------------------------------------------------------- */

.fox-home-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fox-home-hero .fox-home-hero__control { right: max(var(--fox-gutter), calc((100% - var(--page-max)) / 2)); bottom: 14px; }

/* The head is the WHOLE film, not a crop of it, and the band's text lifts off
   its foot so the buttons stay in the first screen: both live in style.css §14
   now, where every head film gets them (Alex, 2026-10-21: "expand video area on
   about page same as on home, remain buttons handing also"). The homepage asks
   for them the same way any other page does -- parts/home/hero.php prints
   --film-w / --film-h on the head AND on the band -- so there is
   nothing homepage-specific left to say here. The band keeps its own 13px
   bottom padding below (the lift is a margin on its .fox-wrap). */

/* Compact, centred band: kicker -> H1 -> sub -> two buttons (MOCKUP 2.3,
   measured: 17 / kicker / 15 / H1 / 16 / sub / 12 / buttons / 13). */
.fox-home-band { padding-block: 17px 13px; }
.fox-home-band .fox-kicker { margin-bottom: 15px; }
/* The hero line stands alone — no kicker over it. It is the BRAND SLOGAN, so
   it carries the same words, capitals, typographic quotes, display face and
   colour as the slogan on the About closing band (#fox-about-cta, style.css
   §13) — but NOT the same size: that band is clamp(30px, 8vw, 50px) and this
   one is bigger, because the hero's line is measured against the sub beneath
   it (below). The face, the colour and the wording are what must stay in step.
   Colour is --tone-heading, the theme's white on dark (#FFFDF7), not pure #fff.
   Andrus, 2026-10-20: "must be white color, and 50 size",
   then "why font changed????? we had specific font for this slogan". Keep the
   two rules in step; if one moves, the slogan reads as two different things.

   Sized in two separate steps, because the two screens want different things
   (Andrus, 2026-10-20: "make it bigger to be as wide a stext under (on
   desktop), optimize for mobile also then separated"):

   - Phones set it to fill the same measure the sub line fills, over two lines.
   - From 700px it grows until the slogan is as wide as the line under it: the
     sub measures 886px once it stops wrapping, and the slogan reaches that at
     64px. 6.4vw gets there at 1000px and holds, and keeps the line single
     below that instead of breaking it. */
.fox-home-band h1 {
	color: var(--tone-heading);
	font-family: 'Komika Axis', var(--font-sans);
	font-size: clamp(28px, 10.5vw, 44px);
	line-height: 1.1;
	letter-spacing: .01em;
	text-wrap: balance;
}
@media (min-width: 700px) {
	.fox-home-band h1 { font-size: min(64px, 6.4vw); }
}
.fox-home-band .fox-pagehead__sub { margin-top: 16px; text-wrap: balance; }
.fox-home-band .fox-actions { margin-top: 12px; }
/* The hero's two buttons are drawn tighter than the kit's (14px sides). */
@media (min-width: 600px) { .fox-home-band .fox-btn { padding-inline: 15px; } }

@media (max-width: 599px) {
	/* Phones: the two buttons stack full width (max 340px), easy to hit. */
	.fox-home-band .fox-actions { flex-direction: column; align-items: stretch; max-width: 340px; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   3. Lounges (MOCKUP 2.4): centred head, 2-up 5:3 cards, coming-soon tile.
   The mockup's scroll-down circle is gone (parts/home/locations.php says why).
   -------------------------------------------------------------------------- */

.fox-home > .fox-home-locations { padding-top: clamp(16px, 1.7vw, 21px); }
.fox-home-locations .fox-head .fox-kicker { margin-bottom: 10px; }
.fox-home-locations .fox-head > p:not(.fox-kicker) { margin-top: 10px; }
.fox-home-locations .fox-head { margin-bottom: 18px; }
.fox-home-locations__grid { row-gap: clamp(32px, 3vw, 44px); }

/* --------------------------------------------------------------------------
   4. Upcoming Events (MOCKUP 2.5): row head, pill chips, 3 cards per state.
   -------------------------------------------------------------------------- */

.fox-home > .fox-home-events { padding-top: calc(var(--home-pad) + 4px); }
.fox-home-events .fox-head { margin-bottom: 14px; }
.fox-home-events__chips { margin-bottom: 20px; }
/* Category cards (no real events yet): pressing a lounge chip only re-points
   the links, so the status line is visible and says so (empty until then). */
.fox-home-events__carry { margin: -8px 0 16px; font-size: var(--fs-fine); color: var(--tone-text); }
.fox-home-events__carry:empty { display: none; }
/* Three per filter state: assets/js/home.js marks the rest .is-capped; until
   it has run (or without JS) only the first three cards show. */
.fox-home-events__grid > .is-capped,
.fox-home-events__grid:not(.is-ready) > .fox-card:nth-of-type(n+4) { display: none; }
.fox-home-events .fox-empty { grid-column: 1 / -1; text-align: center; }
.fox-home-events__note { margin-top: 16px; }

/* --------------------------------------------------------------------------
   5. Deals (MOCKUP 2.6): the kit's split band (deals tone) as is.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. Life at Fox (MOCKUP 2.7): row head + glyph, 16 placeholder/real tiles.
   -------------------------------------------------------------------------- */

/* The tile wall runs nearly edge to edge (mockup gutter ~8px). */
@media (min-width: 600px) { .fox-home-insta > .fox-wrap { padding-inline: 8px; } }
.fox-home > .fox-home-insta { padding-top: calc(var(--home-pad) + 20px); }
.fox-home-insta .fox-head { align-items: center; margin-bottom: 21px; }
.fox-home-insta .fox-insta-tile--static { cursor: default; }
.fox-home-insta .fox-insta-tile__overlay--icon svg { width: 26px; height: 26px; }
@media (hover: none) {
	/* Touch: no hover to reveal it, and an icon-only scrim adds nothing. */
	.fox-home-insta .fox-insta-tile__overlay--icon { display: none; }
}
.fox-home-insta__more { display: flex; margin: var(--space-4) auto 0; }
.fox-home-insta__more[hidden] { display: none; }
.fox-home-insta__note { margin-top: 11px; }
/* Sample placeholders: four on phones (two rows of two), no "Show more". */
@media (max-width: 599px) { .fox-home-insta__grid--sample > li:nth-child(n+5) { display: none; } }

/* --------------------------------------------------------------------------
   7. Gift cards (MOCKUP 2.8): the kit's centred band (gift tone) as is.
   -------------------------------------------------------------------------- */

/* Deals and gift bands: the mockup's own padding (deals 19/24, gift 24/20). */
.fox-home > .fox-home-deals { padding-block: clamp(16px, 1.6vw, 19px) clamp(18px, 2vw, 24px); }
.fox-home > .fox-home-gift { padding-block: clamp(20px, 2vw, 24px) clamp(18px, 1.7vw, 20px); }
/* The gift sub runs on one line at desktop, as drawn. */
.fox-home-gift .fox-band__body { max-width: 1120px; }
.fox-home-gift .fox-band__body > p:not(.fox-kicker) { max-width: none; text-wrap: balance; }

/* Links to the footer form (#fox-newsletter) land clear of the sticky header. */
#fox-newsletter { scroll-margin-top: calc(var(--fox-header-h) + var(--space-5)); }