/* ============================================================================
   Labocine — Issues (main + detail), revamped black-theme OTT layout with a
   cinematic hero. Mirrors the film/playlist design language. ALL rules are
   scoped under `.fx` so the shared classes in styles.css / issue.css (used by
   the home page and elsewhere) are left untouched.
   ============================================================================ */

.fx {
    --fx-nav-h: 56px;
    --fx-bg: #0a0a0b;
    --fx-surface: #141417;
    --fx-surface-2: #1c1c20;
    --fx-surface-3: #26262b;
    --fx-border: rgba(255, 255, 255, 0.10);
    --fx-border-strong: rgba(255, 255, 255, 0.18);
    --fx-text: #f3f3f5;
    --fx-muted: #b9b9c4;
    --fx-muted-2: #8b8b96;
    --fx-accent: #f40000;
    --fx-accent-hover: #ff2b2b;
    --fx-radius: 14px;
    --fx-radius-sm: 10px;
    --fx-maxw: 1440px;

    background: var(--fx-bg);
    color: var(--fx-text);
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    padding-bottom: 4rem;
}

body.fx-page, html.fx-page { background: #0a0a0b; }
body.fx-page footer { color: #6f6f78; text-align: center; background: #0a0a0b; }

.fx *, .fx *::before, .fx *::after { box-sizing: border-box; }
.fx a { color: inherit; text-decoration: none; }
.fx h1, .fx h2, .fx h3, .fx h4, .fx h5, .fx h6, .fx strong { color: inherit; }

.fx__container { width: 100%; max-width: var(--fx-maxw); margin: 0 auto; padding: 0 24px; }
.fx__section { margin-top: 44px; }
.fx__section-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 20px; color: #fff; letter-spacing: 0.01em; }

.fx__btn {
    display: inline-flex; align-items: center; gap: 9px;
    height: 48px; padding: 0 24px; border-radius: 999px;
    border: 1px solid var(--fx-border-strong); background: var(--fx-surface-2); color: var(--fx-text);
    font-size: 0.96rem; font-weight: 600; cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.05s ease;
    white-space: nowrap;
}
.fx__btn:hover { background: var(--fx-surface-3); }
.fx__btn:active { transform: translateY(1px); }
.fx__btn svg { width: 18px; height: 18px; }
.fx__btn--primary { background: var(--fx-accent); border-color: var(--fx-accent); color: #fff; }
.fx__btn--primary:hover { background: var(--fx-accent-hover); border-color: var(--fx-accent-hover); }

/* ============================================================ Cinematic hero */
.fx__hero {
    position: relative;
    min-height: clamp(440px, 76vh, 780px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #000;
}
.fx__hero__video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.fx__hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.1) 22%, transparent 45%, rgba(10,10,11,0.72) 82%, var(--fx-bg) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.55) 0%, transparent 45%);
}
.fx__hero__content {
    position: relative; z-index: 2;
    width: 100%; max-width: var(--fx-maxw); margin: 0 auto;
    padding: 0 24px 56px;
}
.fx__hero__eyebrow {
    display: inline-block; margin-bottom: 16px;
    font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
    color: #fff; background: var(--fx-accent); padding: 6px 14px; border-radius: 999px;
}
.fx__hero__title {
    margin: 0; color: #fff; font-weight: 800; line-height: 1.02;
    font-size: clamp(2.2rem, 6vw, 4.6rem); letter-spacing: -0.02em;
    text-shadow: 0 4px 30px rgba(0,0,0,0.55); max-width: 16ch;
}
.fx__hero__date { margin: 14px 0 0; color: #d7d7dc; font-size: 1rem; letter-spacing: 0.02em; }
.fx__hero__desc {
    margin: 18px 0 0; max-width: 70ch; color: #e6e6ea; font-size: 1.05rem; line-height: 1.65;
}
.fx__hero__desc a { color: #fff; text-decoration: underline; }
.fx__hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ----------------------------------------------- Issue grid (main page) */
.fx__issue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
}
.fx-issue-card {
    position: relative; display: block;
    background: var(--fx-surface-2);
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius);
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.fx-issue-card:hover { transform: translateY(-4px); border-color: var(--fx-border-strong); box-shadow: 0 22px 48px -24px rgba(0,0,0,0.95); }
.fx-issue-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.fx-issue-card__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.55s cubic-bezier(0.2,0.6,0.2,1); }
.fx-issue-card:hover .fx-issue-card__img { transform: scale(1.06); }
.fx-issue-card__body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 40px 16px 15px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.92) 100%);
}
.fx-issue-card__name {
    color: #fff; font-weight: 700; font-size: 1.08rem; line-height: 1.28; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.fx-issue-card__date { color: rgba(255,255,255,0.82); font-size: 0.8rem; margin-top: 5px; }
.fx-issue-card__arrow {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--fx-accent); color: #fff; font-size: 1.1rem; font-weight: 700;
    opacity: 0; transform: translateY(-6px) scale(0.85);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.fx-issue-card:hover .fx-issue-card__arrow { opacity: 1; transform: none; }

/* ============================================================ DETAIL: actions */
.fx__issue-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fx__issue-actions .fx__btn svg { color: currentColor; }
/* "Read description" expandable block */
.fx .issue__more__info {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
    margin: 0;
}
.fx .issue__more__info.active { max-height: 2000px; opacity: 1; margin: 24px 0 0; }
.fx .issue__more__info p {
    color: #d7d7dc; font-size: 1.04rem; line-height: 1.75; margin: 0; max-width: 80ch;
}
.fx .issue__more__info a { color: #fff; text-decoration: underline; }

/* ============================================================ Film/scene cards
   Amazon-style hover: a clean still + single-line title at rest; on hover a
   richer card scales up from the centre (floating over neighbours in EVERY
   direction — no reflow) with a bigger still, action buttons, full title,
   metadata and a snippet of the synopsis. */
.fx .films { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px 22px; padding: 0; }

/* ---- rest tile ---- */
.fx .card {
    position: relative; z-index: 1;
    width: auto; max-width: none; height: auto; margin: 0; float: none;
    overflow: visible;   /* override issue.css .card{height:240px;overflow:hidden} */
    background: var(--fx-surface); border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius); box-shadow: none;
    transition: z-index 0s linear 0.26s;   /* on hover-out, drop behind neighbours only AFTER the popover finishes scaling away */
}
.fx .card:hover { z-index: 50; transition: z-index 0s linear 0s; }   /* raise immediately so the popover floats over everything */
.fx .card .card__media {
    position: relative; aspect-ratio: 16/9; overflow: hidden;
    border-radius: var(--fx-radius) var(--fx-radius) 0 0;
    background: var(--fx-surface-2);
}
.fx .card .card__media .card_link { display: block; width: 100%; height: 100%; }
.fx .card .card__img, .fx .card .card__img--hover {
    width: 100%; height: 100%; min-height: 0; border-radius: 0;
    background-size: cover; background-position: center; opacity: 1; transform: none;
}
.fx .card .card__img--hover { display: none; }
.fx .card:hover .card__img { visibility: visible; }   /* keep visible (issue.css hides it on hover) */
.fx .card .card__info {
    position: static; background: var(--fx-surface); margin: 0;
    padding: 12px 14px 13px; border-radius: 0 0 var(--fx-radius) var(--fx-radius);
    overflow: hidden;
}
/* single-line title at rest → tight spacing, uniform card heights */
.fx .card .card__info .card__title {
    font-size: 0.96rem; font-weight: 600; color: #fff; margin: 0; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- hover popover (scales up from the centre, in all directions) ---- */
.fx .card .card__pop {
    position: absolute; left: 50%; top: 50%; z-index: 4;
    width: 112%;
    transform: translate(-50%, -50%) scale(0.9);
    transform-origin: center center;
    background: var(--fx-surface);
    border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius);
    box-shadow: 0 40px 80px -18px rgba(0, 0, 0, 0.96);
    overflow: hidden;
    opacity: 0; visibility: hidden; pointer-events: none;
    /* exit: quick, smooth */
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.22s;
}
.fx .card:hover .card__pop {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    will-change: transform, opacity;
    /* enter: short hover-intent delay, then opacity + scale glide together on ONE
       gentle Material-standard curve (eases in, not a front-loaded snap) so the
       card grows up to size smoothly instead of jerking */
    transition: opacity 0.36s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, transform 0.36s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, visibility 0s;
}
.fx .card .card__pop-media {
    display: block; width: 100%; aspect-ratio: 16/9;
    background-size: cover; background-position: center; background-color: var(--fx-surface-2);
}
.fx .card .card__pop-body { padding: 13px 15px 15px; }

/* action buttons */
.fx .card .card__btns { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.fx .card .card__play-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 18px; border-radius: 999px;
    background: var(--fx-accent); color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer;
    transition: background 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.2s ease;
}
.fx .card .card__play-btn:hover { background: var(--fx-accent-hover); transform: scale(1.06); box-shadow: 0 10px 22px -8px rgba(244, 0, 0, 0.62); }
.fx .card .card__play-btn:active { transform: scale(0.94); box-shadow: 0 3px 10px -8px rgba(244, 0, 0, 0.5); transition-duration: 0.07s; }
.fx .card .card__play-btn svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.fx .card .card__play-btn:hover svg { transform: scale(1.18); }
.fx .card .card__add-btn {
    width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
    border: 1px solid var(--fx-border-strong); background: var(--fx-surface-3); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.2s ease;
}
.fx .card .card__add-btn:hover { background: var(--fx-accent); border-color: var(--fx-accent); transform: scale(1.13); box-shadow: 0 8px 18px -8px rgba(244, 0, 0, 0.5); }
.fx .card .card__add-btn:active { transform: scale(0.9); transition-duration: 0.07s; }
.fx .card .card__add-btn svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.fx .card .card__add-btn:hover svg { transform: scale(1.12); }

/* popover text */
.fx .card .card__pop-title {
    font-size: 1.02rem; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fx .card .card__pop-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.fx .card .card__pop-sub { font-size: 0.82rem; color: var(--fx-muted); }
.fx .card .card__by {
    display: block; font-size: 0.83rem; color: var(--fx-muted); line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fx .card .card__by .card__author { color: #d7d7dc; font-weight: 600; }
.fx .card .card__by .card__author:hover { color: var(--fx-accent-hover); }
.fx .card .card__pop-desc {
    margin: 9px 0 0; font-size: 0.83rem; line-height: 1.55; color: #c4c4cf;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fx .card .card__category {
    display: inline-block; font-size: 0.6rem; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase;
    color: var(--fx-muted); background: var(--fx-surface-3); border: 1px solid var(--fx-border);
    padding: 3px 9px; border-radius: 999px; flex: 0 0 auto;
}

/* ---------------------------------------------------------- Modals (dark) */
.fx .modal { background: rgba(0,0,0,0.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fx .modal-content {
    background: #15151a; color: #f3f3f5;
    border: 1px solid var(--fx-border-strong); border-radius: 16px;
    width: min(460px, 92%); padding: 24px 26px; margin-top: 8vh;
    box-shadow: 0 30px 90px -20px rgba(0,0,0,0.95);
}
.fx .modal-content h4 { color: #fff; margin: 0 0 12px; }
.fx .modal-content hr { border: 0; border-top: 1px solid var(--fx-border); margin: 14px 0; }
.fx .modal-content .close { color: var(--fx-muted); float: right; font-size: 26px; line-height: 1; cursor: pointer; }
.fx .modal-content .close:hover { color: #fff; }
.fx .modal-content .switch-label { color: #ececf1; }
.fx .modal-content .form__alert { color: #5ad17e; }
.fx #playlist_checkboxes > div {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 0; border-bottom: 1px solid var(--fx-border);
}
.fx #playlist_checkboxes > div br { display: none; }
.fx #playlist_checkboxes .switch-label { margin: 0; }
.fx #playlist_not_found { color: var(--fx-muted); }
.fx #playlist_not_found a { color: #5ad1ff; }
.fx .modal-content .switch input + span { background: #3a3a44; }
.fx .modal-content .switch input:checked + span { background: #2ecc71; }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 1024px), (hover: none) {
    /* narrow windows OR any touch device (incl. tablets that can't hover) → render the popover inline */
    .fx .card:hover { z-index: 1; transition: none; }
    .fx .card .card__info { display: none; }   /* the inline popover shows the title instead */
    /* NB: include the :hover variant so it beats the desktop `.fx .card:hover .card__pop`
       (0,4,0) — otherwise a hovering pointer in mobile emulation re-applies the centring
       translate to a now-static popover and flings it into the top-left corner. */
    .fx .card .card__pop,
    .fx .card:hover .card__pop {
        position: static; transform: none; width: auto; z-index: auto;
        opacity: 1; visibility: visible; pointer-events: auto;
        border: 0; border-top: 1px solid var(--fx-border); box-shadow: none;
        border-radius: 0 0 var(--fx-radius) var(--fx-radius); transition: none; will-change: auto;
    }
    .fx .card .card__pop-media { display: none; }
    .fx .card .card__pop-body { padding: 12px 14px 14px; }
}
@media (max-width: 768px) {
    .fx__container { padding: 0 16px; }
    .fx__hero { min-height: clamp(360px, 64vh, 520px); }
    .fx__hero__content { padding: 0 16px 36px; }
    .fx__section { margin-top: 34px; }
    .fx__section-title { font-size: 1.15rem; margin-bottom: 16px; }
    .fx__issue-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    .fx .films { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px 14px; }
    .fx__issue-actions .fx__btn, .fx__hero__actions .fx__btn { flex: 1 1 auto; justify-content: center; }
    .fx__btn { height: 44px; padding: 0 18px; font-size: 0.9rem; }
    /* compact inline cards on phones: full title + buttons + meta, no synopsis */
    .fx .card .card__pop-body { padding: 11px 12px 13px; }
    .fx .card .card__pop-title { font-size: 0.95rem; -webkit-line-clamp: 2; margin-bottom: 7px; }
    .fx .card .card__pop-desc { display: none; }
    .fx .card .card__btns { gap: 8px; margin-bottom: 9px; }
    .fx .card .card__play-btn { height: 34px; padding: 0 14px; font-size: 0.8rem; }
    .fx .card .card__add-btn { width: 34px; height: 34px; }
    .fx-issue-card__arrow { opacity: 1; transform: none; }
}
@media (max-width: 400px) {
    .fx__issue-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .fx .films { grid-template-columns: 1fr; }
    .fx .card .card__pop-desc { display: -webkit-box; }   /* single column → room for the synopsis again */
}