/*
 * V3 "Ivory & Navy" - home page rules
 * Hero, price rail, category triptych, section rails/grids, assurance band.
 * Loaded only on the home page, on top of core.css.
 */

/* --- 0. TOP PROMO BANNER ---------------------------------- */
/* Sits directly under the header, above the hero. Override .v3-banner-slot's
   default 48px-top / 0-bottom margin with a tighter, symmetric gap. When there
   is no top banner, banner_rail.php prints nothing and the wrapper (.v3-inner,
   horizontal padding only) collapses to zero height, so the hero still butts
   against the header exactly as before.
   margin-block only (not the `margin` shorthand) - core.css's mobile
   full-bleed rule sets margin-inline on .v3-banner-slot below 640px, and
   a shorthand here would win on specificity and zero that back out. */
.v3-home-topbanner .v3-banner-slot { margin-block: 24px; }

@media (max-width: 640px) {
    /* On mobile the banner already runs full-bleed (core.css) and sits
       right under the header - the 24px gap above it (from margin-block
       above) reads as unwanted dead space there, so it's zeroed. Bottom
       gap before the hero is kept. */
    .v3-home-topbanner .v3-banner-slot { margin-top: 0; }
}

/* --- 1. HERO ------------------------------------------------ */
.v3-hero { background: var(--panel); border-bottom: 1px solid var(--line); padding: 64px 0 0; overflow: hidden; }
.v3-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; min-height: 52dvh; }
.v3-hero-copy h1 { font-size: 46px; line-height: 1.14; color: var(--ink); max-width: 13ch; margin-bottom: 20px; }
.v3-hero-copy h1 em { font-style: italic; }
.v3-hero-sub { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 42ch; margin: 0 0 30px; }
.v3-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* .v3-btn family moved to core.css (shared with cart/listing/future pages) */

.v3-hero-plate { position: relative; display: flex; justify-content: center; align-items: center; padding: 20px; }
.v3-hero-plate::before {
    content: ""; position: absolute; inset: 6% 10%; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 45%, rgba(138,109,20,.16) 0%, rgba(138,109,20,0) 68%);
    z-index: 0;
}
html.dark .v3-hero-plate::before { background: radial-gradient(ellipse at 50% 45%, rgba(201,162,39,.22) 0%, rgba(201,162,39,0) 68%); }
.v3-hero-plate-frame {
    /* Now an <a>, not a div (it wraps the hero product's image with a link
       to the product page) - display:block so width/padding/box-shadow
       apply the way they did on the div; an anchor is inline by default. */
    display: block;
    position: relative; z-index: 1; width: 100%; max-width: 340px; border-radius: 14px;
    background: linear-gradient(180deg, var(--plate) 0%, var(--panel) 100%);
    padding: 26px; box-shadow: 0 24px 48px var(--shadow);
}
.v3-hero-plate-frame img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: contain; }
/* max-width matches .v3-hero-plate-frame so a long status line (e.g. a
   pre-order note) wraps within the same footprint as the image instead of
   widening past it - the frame has no margin:auto to re-center itself if
   its unstyled parent grows wider than the image, so a wider caption used
   to visibly drag the whole caption block off-center to the right. */
.v3-hero-plate-caption { text-align: center; margin: 16px auto 0; max-width: 340px; }
.v3-hero-plate-name { font-size: 17px; color: var(--ink); margin-bottom: 6px; }
/* Price digits use Manrope, not the display serif - Playfair Display's
   numerals carry the same high-contrast thick/thin strokes as its
   letters, which reads as uneven baseline-to-baseline ("digits going up
   and down") at a glance. Money wants a plain, evenly-weighted lining
   figure; serif stays reserved for headlines and product names. */
.v3-hero-plate-price { font-family: Manrope, sans-serif; font-weight: 800; font-variant-numeric: lining-nums tabular-nums; font-size: 22px; color: var(--gold); }
.v3-hero-plate-status { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }

/* price rail - full width, sits under the split, part of the same band */
.v3-price-rail { border-top: 1px solid var(--line); margin-top: 44px; padding: 22px 0; display: flex; align-items: baseline; gap: 40px; flex-wrap: wrap; }
.v3-price-rail-item { display: flex; align-items: baseline; gap: 8px; }
.v3-price-rail-item .v3-metal { font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }
.v3-price-rail-item .v3-figure { font-family: Manrope, sans-serif; font-weight: 800; font-variant-numeric: lining-nums tabular-nums; font-size: 26px; color: var(--gold); }
.v3-price-rail-item .v3-unit { font-size: 13px; color: var(--ink-soft); }
.v3-price-rail-item .v3-dir { font-size: 13px; }
.v3-price-rail-caption { margin-left: auto; font-size: 13px; color: var(--ink-soft); }

@media (max-width: 900px) {
    .v3-hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 40px; padding-bottom: 8px; }
    .v3-hero-copy { order: 1; }
    .v3-hero-plate { order: 2; }
    .v3-hero-copy h1 { max-width: none; font-size: 38px; }
    .v3-price-rail-caption { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
    .v3-hero { padding-top: 44px; }
    .v3-hero-copy h1 { font-size: 32px; }
    .v3-price-rail { gap: 24px; }
    .v3-price-rail-item .v3-figure { font-size: 21px; }
}

/* --- 2. CATEGORY TRIPTYCH (bento, 2-4 cells) ------------------
   Tile count comes from the array in catalog/index.php and is emitted
   server-side as .v3-triptych-grid--N, so placement lives on the count
   class below and the base .cell rule is appearance only (border-radius,
   scrim, caption, hover) - it must not assume there are exactly 3 cells. */
.v3-triptych { background: var(--page); padding: 72px 0; }
.v3-triptych-grid { display: grid; gap: 20px; }
.v3-triptych-cell { position: relative; border-radius: 14px; overflow: hidden; }
.v3-triptych-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.v3-triptych-cell:hover img { transform: scale(1.04); }
.v3-triptych-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,26,0) 45%, rgba(15,15,20,.72) 100%); }
.v3-triptych-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; color: #F4F1EA; }
.v3-triptych-caption h3 { font-size: 24px; color: #F4F1EA; margin-bottom: 4px; }
.v3-triptych-caption p { margin: 0; font-size: 13.5px; color: rgba(244,241,234,.82); }
/* Whole-image click target (last child of the cell so it sits above the
   scrim + caption for clicks; caption text stays visible through it). */
.v3-triptych-link { position: absolute; inset: 0; }

/* 2 tiles - equal pair. Shorter than the 3-up bento: two ~566px-wide cells
   at 560px tall would read as a near-square slab, heavier than the section
   warrants. */
.v3-triptych-grid--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; height: 420px; }

/* 3 tiles - the original bento: big left cell + two stacked right. */
.v3-triptych-grid--3 { grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; height: 560px; }
.v3-triptych-grid--3 .v3-triptych-cell:nth-child(1) { grid-row: 1 / span 2; }
.v3-triptych-grid--3 .v3-triptych-cell:nth-child(2) { grid-row: 1 / span 1; }
.v3-triptych-grid--3 .v3-triptych-cell:nth-child(3) { grid-row: 2 / span 1; }

/* 4 tiles - same "one hero + supporting" rhythm as the 3-up, extended:
   tall left, two small top-right, one wide bottom-right. */
.v3-triptych-grid--4 { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: 560px; }
.v3-triptych-grid--4 .v3-triptych-cell:nth-child(1) { grid-column: 1;          grid-row: 1 / span 2; }
.v3-triptych-grid--4 .v3-triptych-cell:nth-child(2) { grid-column: 2;          grid-row: 1; }
.v3-triptych-grid--4 .v3-triptych-cell:nth-child(3) { grid-column: 3;          grid-row: 1; }
.v3-triptych-grid--4 .v3-triptych-cell:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }

/* Three columns get cramped before the 900px stack point - drop 4-up to a
   plain 2x2 in between. */
@media (max-width: 1100px) {
    .v3-triptych-grid--4 { grid-template-columns: 1fr 1fr; }
    .v3-triptych-grid--4 .v3-triptych-cell:nth-child(1) { grid-column: 1; grid-row: 1; }
    .v3-triptych-grid--4 .v3-triptych-cell:nth-child(2) { grid-column: 2; grid-row: 1; }
    .v3-triptych-grid--4 .v3-triptych-cell:nth-child(3) { grid-column: 1; grid-row: 2; }
    .v3-triptych-grid--4 .v3-triptych-cell:nth-child(4) { grid-column: 2; grid-row: 2; }
}

/* Every count stacks to one column below 900px. The :nth-child(n) selectors
   are repeated per count rather than reset via a single .cell rule: a bare
   `.v3-triptych-grid--4 .v3-triptych-cell` (specificity 0,2,0) loses to the
   `.v3-triptych-grid--4 .v3-triptych-cell:nth-child(4)` rule above (0,3,0) -
   matching specificity here, so this later rule wins without !important. */
@media (max-width: 900px) {
    .v3-triptych-grid--2,
    .v3-triptych-grid--3,
    .v3-triptych-grid--4 { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
    .v3-triptych-grid--2 .v3-triptych-cell:nth-child(n),
    .v3-triptych-grid--3 .v3-triptych-cell:nth-child(n),
    .v3-triptych-grid--4 .v3-triptych-cell:nth-child(n) { grid-column: auto; grid-row: auto; height: 260px; }
}


/* --- 3. NEW ARRIVALS - horizontal scroll-snap rail -----------
   .v3-section / .v3-section-header / .v3-scroll-rail base rules moved to
   core.css - product/show.php's "Product Description" and "Recommended
   Products" sections use these same classes, and product.css never
   loaded this file, so those two sections rendered with no section-line,
   no heading size, and a broken (ungridded) card rail. Only this
   page's desktop 4-column override stays here - it's specific to New
   Arrivals always having exactly 4 items; Recommended Products should
   keep scrolling at desktop, not lock to 4 static columns. */
@media (min-width: 901px) {
    .v3-scroll-rail { grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; overflow: visible; }
}

/* --- 6/7. FEATURED GOLD + SILVER - asymmetric grid (shared) ---- */
/* Two groups, not one 6-track grid: the monster-box cell and the 4
   normal cards are in SEPARATE stretch contexts now. Putting all 5 in
   one align-items:stretch row (the original approach) forced every
   card to match the monster box's height (~2.2x taller - same 3:4
   image ratio, double the column width), leaving the 4 normal cards
   with a large dead gap above their CTA. Switching that same row to
   align-items:start fixed the gap but broke the CTAs' shared baseline
   INSIDE the group of 4, since one of them (the strike-through price)
   is genuinely a bit taller than its 3 siblings.
   The fix is both at once, by decoupling the groups: the monster box
   sizes to its own content, and the 4 normal cards live in their own
   nested grid (.v3-asym-small-group) that stretches them to match
   EACH OTHER - never the monster box. */
.v3-asym-grid-5 { display: grid; grid-template-columns: 2fr 4fr; gap: 24px; align-items: start; }
.v3-asym-grid-5 > .v3-card { height: auto; }
/* 6 real products now (3 columns x 2 rows), matching Gold Featured's
   pattern exactly - pulled 2 more real SKUs (PAMP Lady Fortuna 1oz bar,
   Scottsdale Stacker 10oz bar) from the live /silver-wholesale catalog
   instead of squeezing the original 4 into fewer/wider columns. */
.v3-asym-small-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.v3-asym-small-group > .v3-card { height: 100%; }
@media (max-width: 900px) {
    .v3-asym-grid-5 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .v3-asym-grid-5 { gap: 16px; }
    .v3-asym-small-group { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* --- ACCESSORIES FEATURED - plain uniform grid ------------------ */
/* Every item is naturally the same shape here (accessory product,
   fixed price, no live-spot badge) - a genuinely even 5-up grid, not
   the asymmetric layout Gold and Silver share above.
   Grid's default align-items:stretch is correct and left alone here,
   since .v3-card's height:100% is exactly what should happen when
   every card in the row really is the same kind of thing. */
.v3-uniform-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
@media (max-width: 900px) {
    .v3-uniform-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .v3-uniform-grid-5 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* --- 8. ASSURANCE - centered statement -------------------------- */
.v3-assurance { background: var(--panel); border-top: 1px solid var(--line); padding: 76px 0 68px; position: relative; overflow: hidden; text-align: center; }
.v3-ghost-num {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
    font-family: Newsreader, serif; font-size: 320px; line-height: 1; color: var(--accent);
    opacity: .06; user-select: none; pointer-events: none; white-space: nowrap;
}
.v3-assurance-line { position: relative; font-size: 23px; color: var(--ink); max-width: 30ch; margin: 0 auto 30px; font-family: Newsreader, serif; }
.v3-marks { position: relative; display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.v3-marks span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.v3-marks i { color: var(--gold); }
@media (max-width: 640px) {
    .v3-ghost-num { font-size: 160px; }
    .v3-assurance-line { font-size: 19px; }
    .v3-marks { gap: 20px; row-gap: 14px; }
}