/* ==========================================================================
   Kromdraai Blomme — the "Our Story" page.

   The page is built out of four bands: the split hero the gallery pages
   use, the story itself, a band of the farm's own photography, and a pull
   quote. Each band is its own block so the page reads as a sequence of
   photographs rather than a wall of text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The hero
   -------------------------------------------------------------------------- */

/* A warm light on the ivory, so the top of the page feels lit rather than
   flat. It is a soft wash in the brand's gold and rose. */
.kb-story-hero {
    background:
        radial-gradient(120% 90% at 12% 0%, rgba(184, 167, 142, 0.28) 0%, rgba(184, 167, 142, 0) 62%),
        radial-gradient(80% 70% at 78% 8%, rgba(201, 156, 136, 0.18) 0%, rgba(201, 156, 136, 0) 60%),
        var(--kb-ivory);
}

.kb-story-hero__script {
    display: block;
    font-family: var(--kb-font-script);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    line-height: 1.3;
    color: var(--kb-olive);
    margin-bottom: 1.1rem;
}

/* The photograph catches the light on its upper edge. */
.kb-story-hero .kb-gallery-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(255, 252, 244, 0.22) 0%, rgba(255, 252, 244, 0) 45%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. The story
   -------------------------------------------------------------------------- */
.kb-story .kb-split {
    align-items: center;
}

/* The collage lifts off the parchment a little. */
.kb-story .kb-mosaic {
    box-shadow: 0 30px 60px -30px rgba(22, 38, 28, 0.38);
}

.kb-story__script {
    font-family: var(--kb-font-script);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.35;
    color: var(--kb-gold);
    margin: 1.8rem 0 2rem;
}

/* --------------------------------------------------------------------------
   3. The band of photographs
   -------------------------------------------------------------------------- */
.kb-story-gallery {
    background: var(--kb-forest-deep);
    padding: 10px 0;
}

.kb-story-gallery__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.kb-story-gallery__item {
    margin: 0;
    position: relative;
    overflow: hidden;
    /* Portrait frame matching the 800x1199 sources; keeps the crop stable at every breakpoint. */
    aspect-ratio: 2 / 3;
    background: var(--kb-forest);
}

.kb-story-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--kb-ease);
}

.kb-story-gallery__item:hover img {
    transform: scale(1.06);
}

/* Each photograph opens full-size in the Fancybox lightbox. */
.kb-story-gallery__link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: zoom-in;
}

.kb-story-gallery__link:focus-visible {
    outline: 2px solid var(--kb-sage);
    /* The figure clips its overflow, so the ring sits inside the frame. */
    outline-offset: -3px;
}

.kb-story-gallery__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
    flex-wrap: wrap;
}

.kb-story-gallery__foot .kb-eyebrow {
    color: var(--kb-sage-soft);
}

.kb-story-gallery__foot h3 {
    color: var(--kb-ivory);
    font-family: var(--kb-font-display);
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    font-weight: 300;
    line-height: 1.12;
    margin: 0.4rem 0 0;
}

/* --------------------------------------------------------------------------
   4. The pull quote

   The band of photographs above is dark, so the quote is given a light,
   warm ground. It breaks the dark stretch in two and puts the words in
   the middle of the page where they can be read.
   -------------------------------------------------------------------------- */
.kb-story-quote {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(90% 80% at 50% 0%, rgba(184, 167, 142, 0.3) 0%, rgba(184, 167, 142, 0) 68%),
        var(--kb-ivory-warm);
    padding-block: clamp(4.5rem, 9vw, 8rem);
    box-sizing: border-box;
}

/* A warm glow behind the words, so the light band still feels lit. */
.kb-story-quote__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(1100px, 120vw);
    height: min(700px, 90vh);
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(201, 156, 136, 0.22) 0%, rgba(201, 156, 136, 0) 72%);
    pointer-events: none;
    z-index: -1;
}

.kb-story-quote__inner {
    position: relative;
    text-align: center;
    max-width: 900px;
}

.kb-story-quote__label {
    display: block;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--kb-olive);
    margin-bottom: 1.6rem;
}

.kb-story-quote__mark {
    display: block;
    font-family: var(--kb-font-display);
    font-size: clamp(4rem, 8vw, 7rem);
    line-height: 0.5;
    color: var(--kb-taupe);
    opacity: 0.75;
    margin-bottom: 1.6rem;
}

.kb-story-quote__text {
    font-family: var(--kb-font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.7rem, 3.6vw, 3.1rem);
    line-height: 1.28;
    color: var(--kb-forest);
    margin: 0 0 1.8rem;
}

.kb-story-quote__attribution {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--kb-sage);
}

.kb-story-quote__sprig {
    position: absolute;
    right: 4%;
    bottom: -6%;
    width: clamp(120px, 15vw, 230px);
    color: var(--kb-sage);
    opacity: 0.4;
    pointer-events: none;
    transform: rotate(-12deg);
}

.kb-story-quote__sprig-drawing {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   5. Smaller screens
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .kb-story-gallery__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    /* The motif is scaled up and dropped so it sits astride the foot of the
       photograph: half on the image, half spilling onto the copy beneath.
       The box is centred on the seam (the rotation pivots on its middle) and
       the top edge is derived from that, so the split stays even at any
       width the stacked hero may take. The photograph's own height is the
       taller of the stack height and its min-height — below ~450px the
       min-height wins, so both are accounted for. */
    .kb-story-hero .kb-gallery-hero__sprig {
        --kb-story-sprig-h: clamp(160px, 46vw, 250px);
        --kb-story-sprig-seam: max(var(--kb-hero-stack-media-h), var(--kb-hero-media-h));
        top: calc(var(--kb-story-sprig-seam) - var(--kb-story-sprig-h) / 2);
        height: var(--kb-story-sprig-h);
        right: clamp(0.75rem, 3vw, 1.5rem);
        transform: rotate(-24deg);
        transform-origin: 50% 50%;
        opacity: 0.8;
    }

    .kb-story-hero__script {
        font-size: 1.4rem;
    }

    .kb-story-gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .kb-story-gallery__foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .kb-story-quote__sprig {
        right: -2%;
        bottom: -4%;
        width: 110px;
    }
}