/* About page editorial layout — loaded only by Views/Home/About.cshtml.
   Targets pixel-fidelity to docs/About.png. Mirrors structural patterns from
   home.css (seed-streaks, spy-peek, news-band) so the page stands alone. */

/* ============================================================
   Section rhythm
   ============================================================ */

.about-hero,
.rogue,
.essence,
.values,
.news-band {
    position: relative;
    overflow: hidden;
}

.about-hero,
.rogue,
.values,
.news-band {
    background: var(--ink);
    color: var(--cream);
    padding-block: var(--section-py);
}

.essence {
    background: var(--cream);
    color: var(--ink);
    padding-block: var(--section-py);
}

.rogue,
.values,
.news-band {
    border-top: 1px solid color-mix(in oklch, var(--stone) 25%, transparent);
}

/* ============================================================
   Decorative seed-streaks (mirrors home.css)
   ============================================================ */

.seed-streaks {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(80px, 9vw, 160px);
    object-fit: cover;
    object-position: right;
    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; }
}

/* ============================================================
   Spy-peek + spy-figure (mirrors home.css)
   ============================================================ */

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

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

.spy-figure {
    position: absolute;
    pointer-events: none;
    user-select: none;
    right: clamp(1rem, 3vw, 3rem);
    bottom: 0;
    width: clamp(160px, 20vw, 260px);
    height: auto;
}

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

/* ============================================================
   Hero — black canvas + bagel right + ember-streaks left
   ============================================================ */

.about-hero {
    background: var(--ink) url("../images/hero-about.png") no-repeat right center;
    background-size: cover;
    padding-top: calc(80px + var(--section-py));
    padding-bottom: var(--section-py);
    min-height: clamp(420px, 50vw, 640px);
}

.about-hero .hero-text {
    max-width: 60%;
    position: relative;
    z-index: 1;
}

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

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

.about-hero .hero-stack {
    font-family: var(--font-display);
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: -0.015em;
    margin: 0 0 var(--sp-md);
    font-size: clamp(1.75rem, 7vw, 5rem);
    font-weight: 700;
}

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

.about-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: 0;
}

/* ============================================================
   Trust bar (cream pill row, copied from home so it's standalone)
   ============================================================ */

.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;
    filter: brightness(0) saturate(100%) invert(35%) sepia(75%) saturate(2700%) hue-rotate(355deg) brightness(96%);
}

@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; }
}

/* ============================================================
   Loveable Rogue panel — text left, photo collage right
   ============================================================ */

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

/* Ember seed-streaks in the rogue section sit BEHIND the photo collage.
   The cluster anchors top-right and is sized to flow through the photo area. */
.rogue .seed-streaks--right {
    z-index: 0;
    height: clamp(280px, 38vw, 460px);
    top: clamp(40px, 6vw, 100px);
}

.rogue-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
    align-items: center;
}

@media (min-width: 900px) {
    .rogue-grid {
        grid-template-columns: 1.05fr 1fr;
        gap: var(--sp-12);
    }
}

.rogue-text {
    padding-left: clamp(0px, 4vw, 60px);
}

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

.rogue-stack {
    font-family: var(--font-display);
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: -0.015em;
    margin: 0 0 var(--sp-md);
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    font-weight: 700;
}

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

.rogue-lede {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: color-mix(in oklch, var(--cream) 80%, transparent);
    max-width: 52ch;
    margin: 0;
}

/* Photo collage — three slightly tilted, overlapping photos */
.rogue-collage {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 520px;
    margin-inline: auto;
    width: 100%;
    z-index: 2; /* photos float above the ember seed-streaks behind them */
}

.rogue-photo {
    position: absolute;
    width: 58%;
    height: 58%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    border: 4px solid var(--cream);
    transition: transform var(--dur-base) var(--ease-out);
}

.rogue-photo--1 {
    top: 0;
    left: 4%;
    transform: rotate(-4deg);
    z-index: 1;
}

.rogue-photo--2 {
    top: 14%;
    right: 0;
    transform: rotate(3deg);
    z-index: 3;
}

.rogue-photo--3 {
    bottom: 0;
    left: 18%;
    transform: rotate(-1deg);
    z-index: 2;
}

@media (prefers-reduced-motion: no-preference) {
    .rogue-photo--1:hover { transform: rotate(-4deg) translateY(-4px); }
    .rogue-photo--2:hover { transform: rotate(3deg)  translateY(-4px); }
    .rogue-photo--3:hover { transform: rotate(-1deg) translateY(-4px); }
}

@media (max-width: 600px) {
    .rogue-collage { max-width: 360px; }
}

/* ============================================================
   Our Essence — GRIT / CRAFT / BITE on cream
   ============================================================ */

.essence-head {
    text-align: center;
    margin-bottom: var(--sp-lg);
}

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

.essence-list {
    margin: 0;
    display: grid;
    gap: var(--sp-lg);
    max-width: 1000px;
    margin-inline: auto;
}

.essence-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-md);
    padding-block: var(--sp-sm);
    border-bottom: 1px solid color-mix(in oklch, var(--ink) 10%, transparent);
}

.essence-row:last-child { border-bottom: 0; }

@media (min-width: 768px) {
    .essence-row {
        flex-direction: row;
        align-items: center;
        gap: var(--sp-lg);
    }
    /* Zigzag alignment per design: GRIT (1) left, CRAFT (2) right, BITE (3) left */
    .essence-row:nth-child(2) {
        flex-direction: row-reverse;
        text-align: right;
    }
    .essence-row:nth-child(2) .essence-desc {
        margin-left: auto;
    }
    .essence-row .essence-word { flex: 0 0 auto; }
    .essence-row .essence-desc { flex: 1 1 auto; }
}

.essence-word {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(3.5rem, 11vw, 7.5rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
    font-weight: 800;
}

.essence-desc {
    margin: 0;
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: color-mix(in oklch, var(--ink) 80%, var(--cream));
    max-width: 56ch;
}

.essence-desc strong {
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--fs-sm);
    color: var(--ember);
    margin-bottom: var(--sp-xs);
    font-weight: 600;
}

/* ============================================================
   Our Values — 4 dark cards w/ icon + label + desc
   ============================================================ */

/* Bagel-grid texture tile from PSD as a repeating pattern over the dark bg.
   The tile already has cream-on-transparent strokes, so a low-opacity overlay
   reads as a subtle bagel-pattern wash. */
.values {
    background-color: var(--ink);
    background-image: url("../images/brand/bagel-grid-tile.png");
    background-repeat: repeat;
    background-size: 96px auto;
}

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

.values-head {
    text-align: center;
    margin-bottom: var(--sp-lg);
}

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

.values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-md);
    max-width: 900px;
    margin-inline: auto;
}

@media (min-width: 600px) {
    .values-grid { grid-template-columns: repeat(2, 1fr); }
}

.value-tile {
    background: color-mix(in oklch, var(--ink) 88%, var(--stone));
    border: 1px solid color-mix(in oklch, var(--stone) 22%, transparent);
    border-radius: var(--radius-sm);
    padding: var(--sp-lg) var(--sp-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-sm);
    transition: transform var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
    .value-tile:hover {
        transform: translateY(-4px);
        border-color: color-mix(in oklch, var(--ember) 50%, var(--stone));
    }
    .value-tile:hover .value-icon img { transform: scale(1.05); }
}

.value-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.value-icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform var(--dur-base) var(--ease-out);
    /* PSD assets render dark — recolor to ember to match brand */
    filter: brightness(0) saturate(100%) invert(35%) sepia(75%) saturate(2700%) hue-rotate(355deg) brightness(96%);
}

.value-label {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--cream);
    margin: 0;
}

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

/* ============================================================
   Newsletter band (mirrors home.css so it stands alone)
   ============================================================ */

.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-sm);
    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-md);
    max-width: 50ch;
}

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

/* Mobile: center the newsletter copy block + Count Me In pill */
@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; }
}