/* ==========================================================================
   Story Editorial — luxury wedding story & client gallery (mobile-first)
   Story-only rules for resources/views/client/story-show.blade.php.
   Shared tokens and components (app bar, drawer, sections, cards, footer,
   toast) live in kw.css, which loads first.
   ========================================================================== */

:root {
    --se-masonry-gap: 4px;
}

/* The page carries a fixed tab bar: keep content and toasts clear of it */
.se-has-tabbar .se-page { padding-bottom: calc(var(--se-tabbar-h) + env(safe-area-inset-bottom) + 24px); }
.se-has-tabbar .se-toast { bottom: calc(var(--se-tabbar-h) + env(safe-area-inset-bottom) + 14px); }

/* 3. Hero --------------------------------------------------------------- */
.se-hero {
    position: relative;
    padding: 44px 0 0;
    text-align: center;
}
.se-hero__content {
    padding: 0 var(--se-gutter) 32px;
    animation: se-rise 1.1s var(--se-ease) both;
}

.se-hero__tag,
.se-hero__credit {
    margin: 0;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--se-ink-soft);
}
.se-hero__title { margin: 14px 0 14px; font-weight: 400; }
.se-hero__eyebrow {
    display: block;
    font-family: var(--se-serif);
    font-size: 13px;
    font-variant: small-caps;
    text-transform: lowercase;
    letter-spacing: .3em;
}
.se-hero__names {
    display: block;
    margin: 4px auto 0;
    max-width: 14ch;
    font-family: var(--se-serif);
    font-size: clamp(30px, 8.5vw, 42px); /* sized for Urbane, which runs much wider than Cormorant */
    font-style: italic;
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.01em;
    text-wrap: balance;
}
.se-hero__meta { margin: 0 0 6px; font-family: var(--se-serif); font-size: 17px; font-style: italic; }

.se-hero__cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--se-stone) center / cover no-repeat;
}
.se-hero__img {
    width: 100%; height: 100%;
    object-fit: cover;
    animation: se-hero-in 1.4s .15s var(--se-ease) both;
}
@keyframes se-hero-in { from { opacity: 0; } to { opacity: 1; } }

.se-hero__scroll {
    display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
    margin-top: 28px;
    font-size: 9px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--se-ink-soft);
}
.se-hero__scroll i {
    position: relative;
    width: 1px; height: 38px;
    overflow: hidden;
    background: var(--se-line);
}
.se-hero__scroll i::after {
    content: '';
    position: absolute; left: 0; top: -40%;
    width: 1px; height: 40%;
    background: var(--se-accent);
    animation: se-scroll-cue 2.2s var(--se-ease) infinite;
}
@keyframes se-scroll-cue { to { top: 100%; } }

/* 4. Controls ----------------------------------------------------------- */
.se-controls {
    padding: 40px var(--se-gutter) 20px;
}
.se-controls__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.se-controls__actions { display: flex; gap: 8px; }

/* 5. Photo stream: masonry columns, each frame at its natural ratio ---- */
.se-stream:not(.se-stream--favorites),
.se-favorites {
    columns: 2;
    column-gap: var(--se-masonry-gap);
    padding: 0 var(--se-masonry-gap);
}

.se-frame {
    position: relative;
    margin: 0 0 var(--se-masonry-gap);
    overflow: hidden;
    break-inside: avoid;
    background: var(--se-stone);
    cursor: zoom-in;
}
.se-frame img {
    display: block;
    width: 100%; height: auto;
    min-height: 120px;
    background: center / cover no-repeat;
    transition: transform 1.2s var(--se-ease), opacity .6s;
}
.se-frame:active img { transform: scale(.985); }

/* Reveal on scroll (enabled by JS so the page works without it) */
.se-js .se-frame { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--se-ease), transform .9s var(--se-ease); }
.se-js .se-frame.is-visible { opacity: 1; transform: none; }

.se-frame__tag {
    position: absolute; left: 10px; bottom: 10px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(251, 249, 245, .82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--se-ink);
}
.se-frame__fav {
    position: absolute; right: 8px; bottom: 8px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(251, 249, 245, .82) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--se-ink) !important;
    transition: transform .2s, color .2s;
}
.se-frame__fav .se-icon { width: 15px; height: 15px; }
.se-frame__fav[aria-pressed="true"] { color: var(--se-accent) !important; }
.se-frame__fav[aria-pressed="true"] .se-icon { fill: currentColor; }
.se-frame__fav.is-pop { animation: se-pop .35s var(--se-ease); }
@keyframes se-pop { 50% { transform: scale(1.25); } }

/* Favorites view */
.se-favorites .se-frame { opacity: 1; transform: none; }

/* Row-order masonry: story-editorial.js deals frames into columns left to right
   (1 2 3 / 4 5 6 ...). The CSS columns above remain the no-JS fallback. */
.se-stream.is-cols,
.se-favorites.is-cols { columns: auto; display: flex; align-items: flex-start; gap: var(--se-masonry-gap); }
.se-col { flex: 1 1 0; min-width: 0; }

/* Film */
.se-film { padding: 48px var(--se-gutter) 0; }
.se-film__frame { position: relative; aspect-ratio: 16 / 9; margin-top: 8px; overflow: hidden; border-radius: 4px; background: #1d150f; }
.se-film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Story copy */
.se-story__body,
.se-story__aside { font-size: 15px; line-height: 1.75; }
.se-story__body h1, .se-story__body h2, .se-story__body h3,
.se-story__aside h1, .se-story__aside h2, .se-story__aside h3 {
    font-family: var(--se-serif); font-weight: 500; line-height: 1.2;
}
.se-story__body img, .se-story__aside img { height: auto; margin: 16px 0; }
.se-story__body a, .se-story__aside a { border-bottom: 1px solid var(--se-line); }
.se-story__aside {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--se-line);
    font-family: var(--se-serif);
    font-size: 18px;
    font-style: italic;
    color: var(--se-ink-soft);
}

/* 9. Tab bar ------------------------------------------------------------ */
.se-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: var(--se-max);
    margin: 0 auto;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(251, 249, 245, .9);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-top: 1px solid var(--se-line);
}
.se-tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-height: 52px;
    padding-top: 8px;
    font-size: 8.5px !important;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--se-ink-soft) !important;
    transition: color .2s;
}
.se-tab .se-icon { width: 20px; height: 20px; }
.se-tab.is-active { color: var(--se-accent) !important; }
.se-tab.is-active::before {
    content: '';
    position: absolute; top: -7px; left: 50%;
    width: 18px; height: 2px;
    transform: translateX(-50%);
    border-radius: 2px;
    background: var(--se-accent);
}

/* Lightbox -------------------------------------------------------------- */
.se-lightbox {
    position: fixed; inset: 0; z-index: 80;
    display: flex; flex-direction: column;
    background: #17110c;
    color: #fff;
    animation: se-fade .3s var(--se-ease);
}
@keyframes se-fade { from { opacity: 0; } }
.se-lightbox__top {
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px 18px;
}
.se-lightbox__counter { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.se-lightbox__actions { display: flex; gap: 8px; }
/* One fixed-size cell; the image fills it and object-fit scales the whole frame inside */
.se-lightbox__stage { position: relative; flex: 1; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); min-height: 0; padding: 0 0 12px; }
.se-lightbox__stage img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: opacity .45s var(--se-ease);
}
.se-lightbox__stage img.is-loading { opacity: .25; }
.se-lightbox__nav { position: absolute; top: 0; bottom: 0; width: 35%; }
.se-lightbox__nav--prev { left: 0; cursor: w-resize !important; }
.se-lightbox__nav--next { right: 0; cursor: e-resize !important; }
.se-lightbox__progress { height: 2px; margin: 0 18px calc(18px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .14); }
.se-lightbox__progress i { display: block; height: 100%; width: 0; background: var(--se-accent); }
.se-lightbox__progress i.is-running { width: 100%; transition: width linear; }

/* ==========================================================================
   Tablet (≥ 768px)
   ========================================================================== */
@media (min-width: 768px) {
    .se-hero { padding-top: 72px; }
    .se-hero__content { padding-bottom: 44px; }
    .se-hero__names { font-size: 54px; }
    .se-hero__cover { margin: 0 var(--se-gutter); }
    .se-hero__eyebrow { font-size: 16px; }
    .se-hero__meta { font-size: 19px; }


    .se-stream:not(.se-stream--favorites),
    .se-favorites { columns: 3; --se-masonry-gap: 6px; padding: 0 var(--se-gutter); }


    .se-film { max-width: 1040px; margin: 0 auto; padding-top: 72px; }

    /* Floating dock instead of a full-width mobile tab bar */
    .se-tabbar {
        left: 50%; right: auto; bottom: 20px;
        width: 480px;
        padding: 6px 10px;
        transform: translateX(-50%);
        border: 1px solid var(--se-line);
        border-radius: 999px;
        box-shadow: 0 12px 40px rgba(60, 40, 25, .12);
    }
    .se-tab { min-height: 48px; padding-top: 6px; }
    .se-tab.is-active::before { top: auto; bottom: 1px; }
    .se-has-tabbar .se-page { padding-bottom: 120px; }
    .se-has-tabbar .se-toast { bottom: 104px; }

    .se-lightbox__stage { padding: 0 72px 16px; }
}

/* ==========================================================================
   Desktop (≥ 1100px): editorial spread layout
   ========================================================================== */
@media (min-width: 1100px) {
    /* Hero: full-bleed cover, larger type */
    .se-hero { padding-top: 96px; }
    .se-hero__content { padding-bottom: 56px; }
    .se-hero__names { font-size: 68px; max-width: 18ch; }
    .se-hero__cover { max-width: 1320px; margin: 0 auto; }
    .se-hero__eyebrow { font-size: 18px; }
    .se-hero__meta { font-size: 21px; }
    .se-hero__tag, .se-hero__credit { font-size: 10.5px; }

    /* Controls: count left, chapter pills centre-left, actions right */
    .se-controls { padding-top: 88px; padding-bottom: 40px; }
    .se-controls__row { align-items: center; }

    /* Photo stream: four-column masonry */
    .se-stream:not(.se-stream--favorites),
    .se-favorites { columns: 4; --se-masonry-gap: 8px; }
    .se-frame:hover img { transform: scale(1.02); }
    .se-frame__tag { left: 16px; bottom: 16px; font-size: 10px; }
    .se-frame__fav { right: 14px; bottom: 14px; width: 38px; height: 38px; }


    /* Story: body copy beside a pulled-out aside, like the original desktop page */
    .se-story {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        column-gap: 96px;
        align-items: start;
    }
    .se-story .se-section__head { grid-column: 1 / -1; }
    .se-story__body { font-size: 16.5px; line-height: 1.85; max-width: 680px; }
    .se-story__aside { margin-top: 0; padding-top: 0; padding-left: 32px; border-top: 0; border-left: 1px solid var(--se-line); font-size: 21px; position: sticky; top: calc(var(--se-appbar-h) + 32px); }

    .se-tabbar { width: 520px; }
    .se-tab:hover { color: var(--se-ink) !important; }

    /* Lightbox: visible arrows on hover */
    .se-lightbox__nav::after {
        content: '';
        position: absolute; top: 50%;
        width: 14px; height: 14px;
        border: solid #fff;
        border-width: 0 0 1px 1px;
        opacity: 0;
        transition: opacity .2s;
    }
    .se-lightbox__nav--prev::after { left: 32px; transform: translateY(-50%) rotate(45deg); }
    .se-lightbox__nav--next::after { right: 32px; transform: translateY(-50%) rotate(-135deg); }
    .se-lightbox__nav:hover::after { opacity: .8; }
    .se-lightbox__stage { padding: 0 96px 16px; }
}

/* Desktop with a mouse: reveal frame hearts on hover */
@media (min-width: 1100px) and (hover: hover) {
    .se-frame__fav { opacity: 0; transition: opacity .25s, transform .2s, color .2s; }
    .se-frame:hover .se-frame__fav,
    .se-frame__fav:focus-visible,
    .se-frame__fav[aria-pressed="true"] { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .se-js .se-frame { opacity: 1; transform: none; }
}