/* film.css — the فیلم و سریال section. Paper-first: cream ground, ink lines,
   white cards; the only colour on the page is the poster art. Reuses .lsect/.lh
   and .strp from landing.css for the section heads and the strips. */

.fwrap { max-width: 1100px; margin: 0 auto; padding: 14px 14px 40px; }

/* ── heads ─────────────────────────────────────────────────────────────── */
.fhead { margin: 6px 0 16px; }
.fkick { font-size: .78rem; color: var(--muted, rgba(31,31,31,.55)); letter-spacing: .02em; }
.fkick a { color: inherit; text-decoration: none; }
.fkick a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fh1 { font-size: 1.55rem; font-weight: 800; line-height: 1.25; margin: 4px 0 0; }
.fh1 .fcount { font-size: .8rem; font-weight: 400; color: var(--muted, rgba(31,31,31,.55)); margin-inline-start: 6px; }
.fsub { margin-top: 6px; font-size: .86rem; color: var(--muted, rgba(31,31,31,.55)); }
.fen { font-size: .82rem; color: var(--muted, rgba(31,31,31,.55)); margin-top: 3px; }
.fempty { color: var(--muted, rgba(31,31,31,.55)); padding: 30px 0; text-align: center; }

/* ── tiles ─────────────────────────────────────────────────────────────── */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; }
@media (max-width: 560px) { .fgrid { grid-template-columns: repeat(3, 1fr); gap: 12px 8px; } }
.fstrp .ftile { width: 150px; }
@media (max-width: 560px) { .fstrp .ftile { width: 124px; } }

.ftile { display: block; color: inherit; text-decoration: none; min-width: 0; }
.fpost { display: block; position: relative; aspect-ratio: 2 / 3; overflow: hidden;
         container-type: inline-size;   /* the tag sizes itself off the cover (2026-09-12) */
         background: #fff; border: 1px solid var(--line, #1f1f1f); border-radius: 2px;
         box-shadow: 2px 2px 0 var(--line, #1f1f1f); transition: transform .12s, box-shadow .12s; }
.ftile:hover .fpost { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--line, #1f1f1f); }
.fpost img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fnop { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2.2rem; font-weight: 800; color: rgba(31,31,31,.25); }
.ftt { display: block; margin-top: 8px; font-size: .86rem; font-weight: 700; line-height: 1.35;
       overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fmt { display: block; margin-top: 2px; font-size: .74rem; color: var(--muted, rgba(31,31,31,.55)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the episode number stamped on the series poster: a tiny word, a big Latin
   numeral (2026-09-12). tabular-nums so 11 and 13 are the same width and the
   badge does not breathe as a rail scrolls past. */
/* THE EPISODE NUMBER, TUCKED UNDER THE POSTER'S TOP EDGE (operator, 2026-09-12).

   The fold itself is gone: he did not need to see it, and the shaded band was
   reading as a second white block stuck to the cover rather than as paper. What
   sells it now is simply that the edge CUTS the card — the top few pixels sit
   above the poster and are clipped away, so the paper looks tucked behind it.

   Sized in cqw against the poster, so one rule fits the 150px rail tile, the
   124px phone tile and the grid alike; the px values before each cq line are
   what a browser without container queries keeps. */
.fepn { position: absolute; left: 10px; top: -4px;
        padding: 6px 5px 5px;
        left: 7cqw; padding: 4cqw 3.4cqw 3.4cqw;
        display: flex; align-items: center; justify-content: center;
        background: rgba(251,250,245,.96); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
        color: #1f1f1f; border-radius: 0 0 4px 4px; line-height: 1;
        box-shadow: 0 3px 8px -3px rgba(0,0,0,.55); }
.fepn-n { width: 22px; height: 22px; font-size: .82rem;
          width: 15cqw; height: 15cqw; font-size: 7.4cqw;
          border: 1.5px solid #1f1f1f; border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          font-weight: 800; direction: ltr; font-variant-numeric: tabular-nums; }
.fepn.fepn-last { padding: 6px 6px 5px; font-size: .62rem; padding: 4cqw 4cqw 3.4cqw; font-size: 4.6cqw; font-weight: 700; }

/* ── chips ─────────────────────────────────────────────────────────────── */
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.fchips.fsmall { margin: 8px 0 10px; }
.fchip { display: inline-flex; gap: 5px; align-items: baseline; padding: 4px 10px; font-size: .8rem;
         color: inherit; text-decoration: none; border: 1px solid var(--line, #1f1f1f); border-radius: 999px; background: #fff; }
.fchip span { font-size: .7rem; color: var(--muted, rgba(31,31,31,.55)); }
.fchip.on { background: #1f1f1f; color: #fbfaf5; }
.fchip.on span { color: rgba(251,250,245,.7); }

/* ── player pages ──────────────────────────────────────────────────────── */
.fplayer { margin: 4px 0 14px; border: 1px solid var(--line, #1f1f1f); border-radius: 2px; background: #000;
           box-shadow: 3px 3px 0 var(--line, #1f1f1f); overflow: hidden; }
.fplayer video, .fplayer .fyt { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; background: #000; border: 0; }
.fnovid { padding: 40px 16px; text-align: center; color: #fbfaf5; background: #1f1f1f; }
.fmeta { margin-bottom: 22px; }
.fbody { margin-top: 12px; font-size: .92rem; line-height: 1.8; max-width: 720px; }
.fbody p { margin: 0 0 .8em; }
.fviews { margin-top: 8px; font-size: .76rem; color: var(--muted, rgba(31,31,31,.55)); }

.fbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: .84rem; font-weight: 700;
        color: inherit; text-decoration: none; border: 1px solid var(--line, #1f1f1f); border-radius: 2px; background: #fff;
        box-shadow: 2px 2px 0 var(--line, #1f1f1f); }
.fbtn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--line, #1f1f1f); }
.fbtn.fplay { background: #1f1f1f; color: #fbfaf5; margin-top: 10px; }
.fepnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }

/* ── one series ────────────────────────────────────────────────────────── */
.fshow { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; }
.fshowpost { flex: 0 0 180px; aspect-ratio: 2 / 3; border: 1px solid var(--line, #1f1f1f); border-radius: 2px; background: #fff;
             box-shadow: 3px 3px 0 var(--line, #1f1f1f); overflow: hidden; }
.fshowpost img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fshowtxt { min-width: 0; flex: 1; }
@media (max-width: 560px) { .fshow { gap: 12px; } .fshowpost { flex-basis: 112px; } }

.fseason { font-size: .9rem; font-weight: 800; margin: 14px 0 6px; }
.feplist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line, #1f1f1f); }
.feplist li a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 4px;
                color: inherit; text-decoration: none; border-bottom: 1px solid rgba(31,31,31,.18); }
.feplist li a:hover { background: #fff; }
.feplist li.on a { background: #1f1f1f; color: #fbfaf5; }
.feplist li.on .fepdt { color: rgba(251,250,245,.7); }
.fepno { font-weight: 700; font-size: .9rem; }
.fepdt { font-size: .74rem; color: var(--muted, rgba(31,31,31,.55)); white-space: nowrap; }

/* ── pager ─────────────────────────────────────────────────────────────── */
.fpager { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; font-size: .84rem; }
.fpager a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line, #1f1f1f); }
.fpg { color: var(--muted, rgba(31,31,31,.55)); }

/* ── تلویزیون (2026-09-12) ─────────────────────────────────────────────── */
.tvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px 12px; }
@media (max-width: 560px) { .tvgrid { grid-template-columns: repeat(3, 1fr); gap: 12px 8px; } }
.fstrp .tvtile { width: 120px; }
@media (max-width: 560px) { .fstrp .tvtile { width: 104px; } }
.tvtile { display: block; color: inherit; text-decoration: none; min-width: 0; text-align: center; }
.tvlogo { display: grid; place-items: center; aspect-ratio: 1; padding: 12%; background: #fff; border: 1px solid var(--line, #1f1f1f);
          border-radius: 2px; box-shadow: 2px 2px 0 var(--line, #1f1f1f); transition: transform .12s, box-shadow .12s; overflow: hidden; }
.tvtile:hover .tvlogo { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--line, #1f1f1f); }
.tvtile.on .tvlogo { background: #1f1f1f; }
.tvlogo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tvtile .ftt { -webkit-line-clamp: 1; }
.tvplayer { position: relative; margin: 4px 0 14px; border: 1px solid var(--line, #1f1f1f); border-radius: 2px; background: #000;
            box-shadow: 3px 3px 0 var(--line, #1f1f1f); overflow: hidden; }
.tvplayer video, .tvplayer .fyt { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; background: #000; border: 0; }
.tvmsg { position: absolute; inset: auto 0 0 0; padding: 8px 12px; font-size: .82rem; color: #fbfaf5; background: rgba(31,31,31,.85); }
.tvlive { color: #c62828; font-weight: 700; }
.tvhint { margin-top: 10px; }

/* ── the film / series / TV rails inside the dark news band on the landing ──
   The tiles are paper-first (ink text, ink borders); on the band's charcoal
   the muted line «سریال · ۲۰۲۶ · درام» was ink on charcoal (operator
   2026-09-12: «رنگ‌های تیره توی پس‌زمینهٔ تیره رو درست کن»). */
.nwrband .ftt, .nwrband .tvtile .ftt { color: #fff; }
.nwrband .fmt { color: rgba(255,255,255,.55); }
.nwrband .fpost, .nwrband .tvlogo { border-color: rgba(255,255,255,.28); box-shadow: 0 8px 18px -8px rgba(0,0,0,.6); }
.nwrband .ftile:hover .fpost, .nwrband .tvtile:hover .tvlogo { box-shadow: 0 10px 20px -8px rgba(0,0,0,.7); }
.nwrband .fnop { color: rgba(255,255,255,.35); }
.nwrband .ftt { margin-top: 6px; }
.nwrband .fstrp { padding-bottom: 2px; }

/* the series description, under the poster block rather than beside it */
.fbody-wide { margin-top: 4px; margin-bottom: 26px; max-width: 720px; }
@media (max-width: 560px) { .fbody-wide { max-width: none; } }