/* Coffee page editorial layout — loaded only by Views/Coffee/Index.cshtml.
   Mirrors home.css patterns: full-bleed dark sections, ember/cream accents,
   brand-spec spacing, card hover treatment. */

.coffee-hero,
.coffee-favorites,
.coffee-more {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: var(--cream);
}

.coffee-favorites,
.coffee-more {
    padding-block: var(--section-py);
    border-top: 1px solid color-mix(in oklch, var(--stone) 25%, transparent);
}

/* Tighten the hero→favorites gap so the favorites strip lifts up to the hero */
.coffee-favorites {
    padding-top: var(--sp-8);
}

/* Coffee menu sections sit on cream / paper background per design.
   overflow:visible lets the ember seed-streaks extend past the section's right
   edge into the dark surround (body bg) — they "come in from the right" rather
   than being clipped to the cream. */
.coffee-section {
    position: relative;
    overflow: visible;
    background: var(--cream);
    color: var(--ink);
    padding-block: var(--section-py);
}

/* Black separator bar between adjacent coffee sections.
   The body bg (var(--ink)) shows through the margin gap. */
.coffee-section + .coffee-section {
    margin-top: 60px;
}

/* Ember cluster anchors to the right edge of the cream menu section as a
   subtle decoration. Shorter + reduced opacity so the dashes only decorate
   the heading band at the top of the section instead of bleeding down into
   the menu items where prices sit on the right. */
.coffee-section .seed-streaks--right {
    right: 0;
    top: 0;
    transform: scaleX(-1);
    z-index: 0;
    height: clamp(120px, 14vw, 200px);
    opacity: 0.5;
}
.coffee-section .container { position: relative; z-index: 1; }

/* ============================================================
   Decorative seed-streaks (shared with home but redeclared so
   coffee.css works standalone). */
.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); }
.seed-streaks--cream {
    filter: brightness(0) invert(94%) sepia(5%) saturate(280%) hue-rotate(2deg) brightness(96%);
}
@media (max-width: 640px) { .seed-streaks { display: none; } }

/* ============================================================
   Hero — coffee-cup background image right, text left
   ============================================================ */

.coffee-hero {
    background: var(--ink) url("../images/hero-coffee.png") no-repeat right center;
    background-size: 65% auto;
    padding-top: calc(80px + var(--section-py));
    padding-bottom: var(--section-py);
    min-height: clamp(420px, 56vw, 720px);
}

.coffee-hero .hero-text {
    max-width: 56%;
    padding-left: clamp(80px, 8vw, 140px);
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .coffee-hero {
        background-size: cover;
        background-position: 65% center;
        padding-bottom: var(--section-py);
    }
    .coffee-hero .hero-text { max-width: 100%; padding-left: 0; }
    .coffee-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;
    }
    .coffee-hero > .container { position: relative; z-index: 1; }
}
@media (max-width: 600px) {
    .coffee-hero { background-position: 70% center; }
}

.coffee-hero .hero-stack {
    font-family: var(--font-display);
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -0.02em;
    margin: 0 0 var(--sp-md);
    font-size: clamp(3rem, 11vw, 7rem);
    font-weight: 700;
}
.coffee-hero .hero-stack > span { display: block; }
.coffee-hero .hero-stack .line-1 { color: var(--cream); }
.coffee-hero .hero-stack .line-2 { color: var(--ember); }

.coffee-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);
}

/* ============================================================
   Customer Favorites strip
   ============================================================ */

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

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

.fav-strip .fav-card {
    background: transparent;
    border: 0;
    border-bottom: 1px dashed color-mix(in oklch, var(--stone) 35%, transparent);
    padding: var(--sp-md) 0;
    transition: transform var(--dur-base) var(--ease-out);
}

.fav-strip .fav-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-xs);
}

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

.fav-strip .fav-price {
    font-family: var(--font-display);
    color: var(--ember);
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.fav-strip .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) {
    .fav-strip .fav-card:hover {
        transform: translateY(-2px);
    }
}

/* ============================================================
   Category sections (Coffee & Espresso, Signature Drinks, Hot Tea)
   ============================================================ */

.coffee-section-head {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    color: var(--ember);
    margin: 0 0 var(--sp-lg);
    text-align: center;
    position: relative;
}

.coffee-section-head::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    background: var(--ember);
    margin: var(--sp-md) auto 0;
}

.coffee-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-md) var(--sp-lg);
}
@media (min-width: 768px) { .coffee-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .coffee-grid { grid-template-columns: repeat(3, 1fr); } }

.coffee-card {
    padding: var(--sp-md) 0;
    border-bottom: 1px dashed color-mix(in oklch, var(--stone) 60%, transparent);
}

.coffee-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-xs);
}

.coffee-name {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.coffee-price {
    font-family: var(--font-display);
    color: var(--ember);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.coffee-desc {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: color-mix(in oklch, var(--ink) 70%, transparent);
    margin: 0;
    max-width: 50ch;
}

/* ============================================================
   "We've Got More!" footer CTA
   ============================================================ */

.coffee-more .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-lg);
    flex-wrap: wrap;
}

.coffee-more .more-inner {
    flex: 1 1 360px;
    max-width: 560px;
}

@media (max-width: 720px) {
    .coffee-more .container { flex-direction: column; text-align: center; }
    .coffee-more .more-inner { text-align: center; max-width: 100%; }
    .coffee-more .more-lede { margin-inline: auto; }
}

.coffee-more .more-headline {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: -0.005em;
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0 0 var(--sp-sm);
    color: var(--cream);
}

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

.coffee-more .more-eyes {
    flex: 0 0 auto;
    width: clamp(220px, 28vw, 380px);
    height: auto;
    user-select: none;
    pointer-events: none;
}

@media (max-width: 720px) {
    .coffee-more .more-eyes { display: none; }
}