/* Home page editorial layout — loaded only by Views/Home/Index.cshtml.
   Targets pixel-fidelity to docs/Homepage.png. */

/* ============================================================
   Section rhythm — generous vertical breathing
   ============================================================ */

.home-hero,
.promise,
.favorites,
#testimonials,
.news-band {
    position: relative;
    overflow: hidden;
}

.promise,
.favorites,
#testimonials,
.news-band {
    background: var(--ink);
    color: var(--cream);
    padding-block: var(--section-py); /* brand spec: 100px desktop / 60px mobile */
}

.promise { min-height: 540px; } /* keep room for spy peek without clipping head */

/* Section divider line between major dark bands */
.promise,
.favorites,
.news-band {
    border-top: 1px solid color-mix(in oklch, var(--stone) 25%, transparent);
}

/* ============================================================
   Decorative seed-streaks — organic ember dashes down a column edge
   ============================================================ */

/* PSD-extracted asset (202×556 after auto-crop).
   Bigger / more prominent ember clusters per design. */
.seed-streaks {
    position: absolute;
    top: 0;
    height: clamp(220px, 32vw, 400px);
    width: auto;
    pointer-events: none;
    user-select: none;
}

.seed-streaks--left  { left:  0; }
.seed-streaks--right { right: 0; transform: scaleX(-1); }

/* Cream variant — recolor ember pixels to cream via filter chain (preserves alpha) */
.seed-streaks--cream {
    filter: brightness(0) invert(94%) sepia(5%) saturate(280%) hue-rotate(2deg) brightness(96%);
}

/* Brand spec: decorative elements on desktop may need to be sacrificed on mobile */
@media (max-width: 640px) {
    .seed-streaks { display: none; }
}

/* ============================================================
   Spy-peek decoration (corner) and Spy-figure (large, newsletter)
   ============================================================ */

/* Spy peek — fedora silhouette + ember mask (358×308 native).
   Bottom-right of section per design, sized prominently. */
.spy-peek {
    position: absolute;
    pointer-events: none;
    user-select: none;
    bottom: 0;
    width: clamp(180px, 22vw, 300px);
    height: auto;
    z-index: 1;
}

.spy-peek--br { right: 0; }
.spy-peek--bl { left:  0; transform: scaleX(-1); }

/* Spy-peek decoration overlaps body copy on narrow viewports — hide on phones. */
@media (max-width: 640px) {
    .spy-peek { display: none; }
}

/* Spy figure for the newsletter band — peeks from the TOP-RIGHT corner */
.spy-figure {
    position: absolute;
    pointer-events: none;
    user-select: none;
    right: 0;
    top: 0;
    width: clamp(220px, 26vw, 360px);
    height: auto;
    z-index: 1;
}

@media (max-width: 720px) {
    .spy-figure { display: none; }
}

/* ============================================================
   Hero — black canvas, stacked SNEAKY / GOOD. headline
   ============================================================ */

.home-hero {
    background: var(--ink) url("../images/hero-bagel.png") no-repeat right center;
    background-size: cover; /* fill the full section — was leaving dark gaps on wide screens */
    /* Header offset (~80px) + section padding */
    padding-top: calc(80px + var(--section-py));
    padding-bottom: var(--section-py);
    min-height: clamp(420px, 56vw, 720px);
}

.home-hero .hero-text {
    max-width: 56%;
    padding-left: clamp(80px, 8vw, 140px); /* leave room for ember cluster on left */
}

@media (max-width: 900px) {
    .home-hero {
        /* Keep the bagel as a *background* of the headline on mobile, not
           pushed below it. Cover-fit + dark gradient overlay for legibility. */
        background-size: cover;
        background-position: 65% center;
        padding-bottom: var(--section-py);
    }
    .home-hero .hero-text { max-width: 100%; padding-left: 0; }
    .home-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            115deg,
            var(--ink) 0%,
            color-mix(in oklch, var(--ink) 70%, transparent) 55%,
            color-mix(in oklch, var(--ink) 30%, transparent) 100%
        );
        pointer-events: none;
        z-index: 0;
    }
    .home-hero > .container { position: relative; z-index: 1; }
}

@media (max-width: 600px) {
    .home-hero {
        background-position: 70% center;
    }
}

.home-hero .hero-stack {
    font-family: var(--font-display);
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -0.02em;
    margin: 0 0 var(--sp-5);
    font-size: clamp(3.5rem, 13vw, 8.5rem);
    font-weight: 700;
}

.home-hero .hero-stack > span { display: block; }
.home-hero .hero-stack .line-1 { color: var(--cream); }
.home-hero .hero-stack .line-2 { color: var(--ember); }

.home-hero .hero-lede {
    max-width: 48ch;
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: color-mix(in oklch, var(--cream) 85%, transparent);
    margin-bottom: var(--sp-6);
}

.home-hero .hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* Stack hero CTAs full-width on very narrow phones so tap targets are obvious
   and headlines don't share a cramped row with two ghost buttons. */
@media (max-width: 480px) {
    .home-hero .hero-cta { flex-direction: column; align-items: stretch; }
    .home-hero .hero-cta > .btn-ib { width: 100%; }
}

/* ============================================================
   Trust bar — cream band between hero and promise
   ============================================================ */

.trust-bar {
    background: var(--cream);
    color: var(--ink);
    padding-block: clamp(1rem, 2vw, 1.5rem);
}

.trust-bar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(var(--sp-4), 5vw, var(--sp-12));
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8125rem;
    font-weight: 600;
}

.trust-bar li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
}

.trust-bar .trust-mark {
    width: 18px;
    height: auto;
    flex-shrink: 0;
    /* PSD-extracted icons render dark; recolor to ember to match brand */
    filter: brightness(0) saturate(100%) invert(35%) sepia(75%) saturate(2700%) hue-rotate(355deg) brightness(96%);
}

/* On phones the three trust marks stack as a bulleted list — the trust-mark
   icon plays the role of the bullet, items left-aligned so the icons line up. */
@media (max-width: 640px) {
    .trust-bar ul {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-3);
        padding-inline: var(--sp-5);
    }
    .trust-bar li { justify-content: flex-start; }
}

/* ============================================================
   Promise band — "WITH BITE / DONE RIGHT."
   ============================================================ */

.promise .container {
    position: relative;
    z-index: 1;
}

.promise .promise-inner {
    max-width: 660px;
    text-align: left;
}

.promise .eyebrow {
    color: var(--ember);
    margin-bottom: var(--sp-4);
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.8125rem;
    font-weight: 600;
}

.promise .promise-stack {
    font-family: var(--font-display);
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -0.015em;
    margin: 0 0 var(--sp-5);
    font-size: clamp(3rem, 9vw, 6.5rem);
    font-weight: 700;
}

.promise .promise-stack > span { display: block; }
.promise .promise-stack .line-1 { color: var(--cream); }
.promise .promise-stack .line-2 { color: var(--ember); }

.promise .promise-lede {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: color-mix(in oklch, var(--cream) 78%, transparent);
    max-width: 56ch;
    margin-bottom: var(--sp-6);
}

/* ============================================================
   Customer Favourites — 3×2 grid, square photos, price chip overlay
   ============================================================ */

.favorites .favorites-head {
    margin-bottom: var(--sp-8);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.favorites .favorites-head .eyebrow {
    color: var(--ember);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.8125rem;
    font-weight: 600;
}

.favorites .favorites-head h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: -0.005em;
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0;
    color: var(--cream);
}

/* Brand spec: 1 col mobile / 2 col tablet / 3 col desktop */
.fav-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-md); /* 24px */
}

@media (min-width: 768px) {
    .fav-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .fav-grid { grid-template-columns: repeat(3, 1fr); }
}

.fav-card {
    display: flex;
    flex-direction: column;
    /* Subtle dark-grey card chrome so cards read on the black canvas before
       the hover-paper-flip kicks in. Direct hex (not color-mix with var(--ink))
       because OKLCH mixing with pure black barely lifts the lightness. */
    background: #1f1f1f;
    border: 1px solid #2e2e2e;
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: transform var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

.fav-card .fav-thumb {
    aspect-ratio: 1 / 1;
    background: #1a1a1a;
    overflow: hidden;
    position: relative;
}

.fav-card .fav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--sp-4);
    transition: transform var(--dur-base) var(--ease-out);
}

/* Price chip overlay — top-right corner of the photo */
.fav-card .fav-price {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    z-index: 1;
    background: var(--ember);
    color: var(--cream);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-sm);
    line-height: 1.4;
}

.fav-card .fav-body {
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1;
}

.fav-card .fav-name {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--cream);
    margin: 0;
}

.fav-card .fav-desc {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: color-mix(in oklch, var(--cream) 70%, transparent);
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    /* Hover state per design: lift + cream paper background swap (white-paper effect)
       + image scale. The 6th tile in the design demonstrates this hover state. */
    .fav-card:hover {
        transform: translateY(-4px);
        background: var(--cream);
        border-color: var(--cream);
    }
    .fav-card:hover .fav-name { color: var(--ink); }
    .fav-card:hover .fav-desc { color: color-mix(in oklch, var(--ink) 75%, var(--cream)); }
    .fav-card:hover .fav-thumb { background: var(--cream); }
    .fav-card:hover .fav-thumb img { transform: scale(1.05); }
}

.favorites .favorites-cta {
    margin-top: var(--sp-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
}

/* ============================================================
   Testimonials — single big-quote panel, ember mark on the LEFT
   ============================================================ */

#testimonials .scroller {
    padding: var(--sp-2) 0 var(--sp-4);
    gap: 0;
}

#testimonials .scroller > .item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    padding-inline: var(--sp-3);
}

#testimonials .quote-card {
    width: 100%;
    max-width: 720px;
    text-align: left;
    color: var(--cream);
    margin: 0 auto;
}

#testimonials .quote-source {
    text-align: center;
}

#testimonials .quote-mark {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 0.4;
    color: var(--ember);
    margin: 0;
    text-align: left;
    font-weight: 600;
}

#testimonials .quote-divider {
    width: 64px;
    height: 2px;
    background: var(--ember);
    border: 0;
    margin: var(--sp-5) auto;
}

#testimonials .quote-text {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(1.4rem, 3vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.005em;
    margin: 0 0 var(--sp-5);
    font-weight: 600;
}

#testimonials .quote-source {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.8125rem;
    color: color-mix(in oklch, var(--cream) 60%, transparent);
}

#testimonials .quote-source strong {
    color: var(--ember);
    font-weight: 600;
}

/* Scroller dot indicators (testimonial nav) */
#testimonials .scroller-dots {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
}

#testimonials .scroller-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: color-mix(in oklch, var(--cream) 25%, transparent);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-out);
}

#testimonials .scroller-dots button[aria-current="true"] {
    background: var(--ember);
}

/* ============================================================
   Newsletter band — "GET DISCOUNTS / IN YOUR INBOX"
   ============================================================ */

.news-band .news-inner {
    max-width: 620px;
    padding-left: clamp(0px, 4vw, 60px);
    position: relative;
    z-index: 1;
}

.news-band .news-stack {
    font-family: var(--font-display);
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: -0.01em;
    margin: 0 0 var(--sp-4);
    font-size: clamp(2.25rem, 7vw, 4.5rem);
    font-weight: 700;
}

.news-band .news-stack > span { display: block; }
.news-band .news-stack .line-1 { color: var(--cream); }
.news-band .news-stack .line-2 { color: var(--ember); }

.news-band .news-lede {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: color-mix(in oklch, var(--cream) 78%, transparent);
    margin-bottom: var(--sp-5);
    max-width: 50ch;
}

/* "Count Me In" pill — stone-toned to match design's beige inset */
.news-cta {
    display: inline-flex;
    align-items: center;
    background: color-mix(in oklch, var(--stone) 60%, var(--cream));
    color: var(--ink);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
    border: 1px solid transparent;
}

.news-cta:hover,
.news-cta:focus-visible {
    background: var(--ember);
    color: var(--cream);
}

@media (max-width: 720px) {
    .news-band .news-inner { padding-left: 0; text-align: center; }
    .news-band .news-lede { margin-inline: auto; }
    .news-cta { margin-inline: auto; }
}