/* =====================================================
   Feed view — full-height cards on a snap scroll
   Uses the same theme tokens as the rest of the site.
   ===================================================== */

.reels-body {
    /* Height of the fixed bar, and how much of the next card peeks up from
       the bottom as a hint that the feed continues. */
    --reel-bar-h: 54px;
    --reel-peek:  56px;
}

@media (max-width: 480px) {
    .reels-body { --reel-peek: 46px; }
}

.reels-body {
    margin: 0;
    padding: 0;
    height: 100dvh;
    overflow: hidden;
    background: var(--bg);
    overscroll-behavior: none;
}

/* Top bar */

.reel-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    height: var(--reel-bar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.reel-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 640;
    letter-spacing: -0.02em;
    color: var(--text);
    text-decoration: none;
    margin-right: auto;
    min-width: 0;
}
.reel-brand:hover { text-decoration: none; opacity: .75; }
.reel-brand .brand-mark { width: 26px; height: 26px; flex: 0 0 26px; font-size: 13px; }
.reel-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.reel-tab {
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}
.reel-tab:hover  { text-decoration: none; background: var(--surface-2); }
.reel-tab.active { background: var(--primary); color: #fff; }

.reel-icon-btn {
    position: relative;
    width: 36px; height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    font-size: 15px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), transform .08s var(--ease);
}
.reel-icon-btn:hover  { background: var(--border); }
.reel-icon-btn:active { transform: scale(.92); }

.reel-icon-btn .dot {
    position: absolute;
    top: 5px; right: 5px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 2px var(--surface);
}

/* The scroller */

.reels {
    height: 100dvh;
    padding-top: var(--reel-bar-h);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    /* Snap points align to the top of the scroller, which sits under the
       fixed bar. Without this every card snaps beneath it and loses its
       first line. */
    scroll-padding-top: var(--reel-bar-h);
}
@media (prefers-reduced-motion: reduce) {
    .reels { scroll-behavior: auto; scroll-snap-type: none; }
}

.reel {
    /*
     * Fixed, not min-height: the card must never outgrow its slide, or
     * opening the description pushes the buttons off the bottom.
     *
     * Deliberately a little shorter than the space available, so the top of
     * the next card shows and it is obvious there is more below.
     */
    height: calc(100dvh - var(--reel-bar-h) - var(--reel-peek));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 8px 10px 10px;
}

.reel-card {
    width: 100%;
    max-width: 560px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-3);
    overflow: hidden;
}

/* Card head, in the style of a post byline */

.reel-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px 10px;
    flex: 0 0 auto;
}

.reel-avatar {
    width: 46px; height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 3px;
    object-fit: contain;
}

.reel-byline { flex: 1; min-width: 0; }

.reel-byline b {
    display: block;
    font-size: 15px;
    font-weight: 640;
    letter-spacing: -0.015em;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reel-byline span {
    display: block;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.reel-title {
    padding: 0 16px 8px;
    margin: 0;
    font-size: 19px;
    font-weight: 680;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: var(--text);
    flex: 0 0 auto;
}

.reel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 10px;
    flex: 0 0 auto;
}

/* Body text, clamped until opened */

/*
 * Closed by default, and deliberately not scrollable.
 *
 * The body fills most of the card, so if it took the gesture the feed would
 * only move when swiped along the edges. While the text is clamped there is
 * nothing to scroll anyway, so every swipe belongs to the feed.
 */
.reel-body {
    padding: 0 16px 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    touch-action: pan-y;
}

/*
 * Opened with "more": the text scrolls in place.
 *
 * Chaining is left on deliberately. Reaching the end of a long description
 * carries straight on to the next post, rather than trapping the reader in
 * a card they have finished with.
 */
.reel-card.is-open .reel-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fade the text as it runs under the button row, so it reads as scrollable */
.reel-card.is-open .reel-body::after {
    content: '';
    position: sticky;
    bottom: -12px;
    display: block;
    height: 20px;
    margin-top: -20px;
    background: linear-gradient(to bottom, transparent, var(--surface));
    pointer-events: none;
}

.reel-text {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-line;
    word-wrap: break-word;
}

.reel-text.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: var(--reel-lines, 4);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reel-more {
    display: inline-block;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.reel-more:hover { color: var(--primary); }

/* Actions */

.reel-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    flex: 0 0 auto;
    background: var(--surface);
}
.reel-actions .btn { flex: 1; }

.reel-count {
    flex: 0 0 auto;
    align-self: center;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 13px;
    font-weight: 640;
    white-space: nowrap;
}

/* Progress hint down the side */

.reel-progress {
    position: fixed;
    top: var(--reel-bar-h); right: 6px;
    bottom: 0;
    width: 3px;
    z-index: 55;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.reel-progress i {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: var(--primary);
    opacity: .35;
    transition: height .2s var(--ease);
}

/* End of feed */

.reel-end {
    align-self: center;
    text-align: center;
    padding: 20px;
    max-width: 420px;
}
.reel-end .glyph { font-size: 34px; opacity: .5; margin-bottom: 10px; }
.reel-end h2 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 640;
    letter-spacing: -0.02em;
    color: var(--text);
}
.reel-end p { margin: 0 0 16px; font-size: 14px; color: var(--text-muted); }

.reel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 22px;
    font-size: 13.5px;
    color: var(--text-muted);
}

/* Filter sheet reuses the site's sheet, with a form inside */

.reel-filter-form { padding: 4px 18px 18px; }
.reel-filter-form .filter-field { margin-bottom: 10px; }
.reel-filter-form label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--text);
}
.reel-filter-form .filter-select,
.reel-filter-form .filter-input {
    background: var(--surface-sunken);
}
.reel-filter-actions { display: flex; gap: 8px; margin-top: 14px; }

@media (min-width: 700px) {
    .reel-card { max-width: 600px; }
    .reel-title { font-size: 21px; }
}

/* -----------------------------------------------------
   Ads in the feed
   ----------------------------------------------------- */

/* An in-feed ad reads as a post, so it sits on its own screen like one */
.reel-ad-card {
    height: auto;
    align-self: center;
    max-height: 100%;
    padding-bottom: 4px;
}

.reel-ad-label {
    padding: 12px 16px 8px;
    font-size: 11.5px;
    font-weight: 640;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.reel-ad-slot {
    padding: 0 16px 16px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reel-ad-slot .ad-slot { margin: 0; width: 100%; }

/*
 * The one at the very top is a banner rather than a whole screen, so the
 * first real post is still visible without scrolling.
 *
 * It has to be a snap point of its own. The scroller snaps on a mandatory
 * basis, so an element without an alignment is not somewhere the browser
 * will rest — leaving it out made the page jump past the ad on load.
 * scroll-snap-stop stays at its default, so a firm swipe still carries
 * straight through to the first post.
 */
.reel-ad-compact {
    min-height: 0;
    height: auto;
    scroll-snap-align: start;
    padding: 12px 14px 0;
    align-items: flex-start;
}

.reel-ad-compact .reel-card {
    height: auto;
    max-height: none;
    box-shadow: var(--shadow-2);
}

.reel-ad-compact .reel-ad-label { padding: 9px 14px 6px; }
.reel-ad-compact .reel-ad-slot  { padding: 0 14px 12px; min-height: 0; }


/* -----------------------------------------------------
   Swipe hint — shown until the first scroll
   ----------------------------------------------------- */

.reel-hint {
    position: fixed;
    left: 50%;
    bottom: calc(var(--reel-peek) + 16px + env(safe-area-inset-bottom));
    z-index: 70;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 13px;
    border-radius: var(--r-pill);
    /* Falls back to a solid colour where color-mix is unsupported */
    background: var(--text);
    background: color-mix(in srgb, var(--text) 86%, transparent);
    color: var(--surface);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: hint-in .45s var(--ease-out) .6s both;
}

.reel-hint.is-gone {
    animation: hint-out .3s var(--ease) forwards;
}

.reel-hint svg {
    width: 17px;
    height: 17px;
    animation: hint-nudge 1.8s var(--ease) infinite;
}

@keyframes hint-in {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes hint-out {
    to { opacity: 0; transform: translate(-50%, 10px); }
}

/* A short lift and settle, the way a finger flicks upward */
@keyframes hint-nudge {
    0%, 100%  { transform: translateY(3px);  opacity: .75; }
    30%       { transform: translateY(-4px); opacity: 1; }
    60%       { transform: translateY(0);    opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
    .reel-hint svg { animation: none; }
    .reel-hint     { animation: none; }
}