/* =============================================================================
   CinemaBox title card
   =============================================================================

   THE ONE CARD. The public landing page and the Telegram Mini App both draw
   this card, and there must never be a second one. Read Movie_Series.PNG in
   Desktop/CinemaBox/OtherFiles: this file is that picture in CSS.

       <link rel="stylesheet" href="/css/cinemabox-tokens.css">
       <link rel="stylesheet" href="/css/cinemabox-card.css">

   Deployed to /var/www/cinemabox/public/css/cinemabox-card.css.
   Source of truth: Modules/CinemaBox/Resources/assets/css/cinemabox-card.css.

   IT NEEDS cinemabox-tokens.css. Every colour, radius, button and chip comes
   from there. Load the tokens FIRST. Nothing here repeats a palette value.

   THE MARKUP CONTRACT
   Blade renders it from Modules/CinemaBox/Resources/views/partials/title-card
   .blade.php. A JavaScript screen that builds a card must produce THE SAME
   element tree, or the two screens drift apart:

       <article class="cb-card">
         <a class="cb-card__link" href="…"><span class="cb-sr">…</span></a>
         <div class="cb-card__art"><img class="cb-card__poster" …></div>
         <div class="cb-card__body">
           <h3 class="cb-card__name">Interstellar</h3>
           <div class="cb-meta cb-card__meta">…</div>
           <div class="cb-card__facts">
             <div class="cb-card__genres"><span class="cb-chip">…</span></div>
             <span class="cb-imdb cb-card__imdb">…</span>
           </div>
           <div class="cb-card__actions">
             <a class="cb-btn cb-btn--outline cb-btn--round" …>+</a>
             <a class="cb-btn cb-btn--outline cb-card__watch" …>تماشای آنلاین</a>
           </div>
         </div>
       </article>

   WHY THE POSTER COVERS THE WHOLE CARD
   In the owner's picture the ice field is still visible behind the meta row
   and faintly behind the buttons. The picture and the card are ONE shape, so
   the poster is a layer under everything and a gradient lifts out of the card
   colour to carry the text. It is never a picture with a box under it.

   Written right to left first.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. The card
----------------------------------------------------------------------------- */

.cb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--cb-surface);
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius);
    /* The whole card reacts to a press, because the whole card is one link. */
    transition: transform .16s ease, border-color .16s ease;
}

.cb-card:hover,
.cb-card:focus-within {
    border-color: rgba(240, 84, 76, .45);
}

.cb-card:active { transform: scale(.985); }


/* --- the link over the whole card -------------------------------------- */

/* One link covers the card, so a thumb anywhere on the poster opens the
   title. It cannot wrap the card, because the two action buttons are links
   too and an anchor may not hold an anchor. The buttons are lifted above it
   with z-index in section 5. */
.cb-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.cb-card__link:focus-visible {
    outline: 2px solid var(--cb-accent-2);
    outline-offset: -3px;
}

/* Text for a screen reader only. The card is a picture and three short rows,
   so the link needs a spoken name of its own. */
.cb-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}


/* -----------------------------------------------------------------------------
   2. The poster
----------------------------------------------------------------------------- */

.cb-card__art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--cb-surface-2);
}

/* EVERY picture on this site sits inside a <picture>, because each one is
   served as WebP with a JPEG fallback at several widths. display:contents
   removes that wrapper from the layout, so the <img> keeps the parent it had
   before the wrapper existed and no rule anywhere had to change.

   This rule is here, in the shared sheet, because the card, the hero, a row
   thumbnail and an episode still all need it. The landing page and the Mini
   App both load this file, so it must never be repeated in either of them. */
.cb-pic {
    display: contents;
}

.cb-card__poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* The fade out of the card colour. `transparent` is interpolated in
   premultiplied colour by every engine in use, so there is no grey band.

   rgba(19, 26, 36, .82) IS --cb-surface with an alpha. CSS cannot add an
   alpha to a hex custom property without color-mix(), and color-mix is too
   new for an old Android browser in Iran. Change --cb-surface and you must
   change this stop with it. */
.cb-card__art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        var(--cb-surface) 26%,
        rgba(19, 26, 36, .82) 42%,
        transparent 72%
    );
}

/* A title with no poster still keeps the shape of the card. */
.cb-card__art--empty { background: var(--cb-surface-2); }


/* -----------------------------------------------------------------------------
   3. The body
----------------------------------------------------------------------------- */

.cb-card__body {
    position: relative;
    /* Fill whatever height the tallest card in the row takes, so the button
       row of every card in a rail lands on the same line. See the auto margin
       on .cb-card__actions. */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    /* The poster is a 2:3 portrait. The body starts a little above its foot,
       so the name sits ON the picture exactly as the owner's card shows. */
    margin-block-start: 112%;
    padding-inline: 12px;
    padding-block: 0 14px;
}

.cb-card__name {
    margin: 0;
    color: var(--cb-text);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    /* The English name of a film. Two lines at most, then an ellipsis.
       -webkit- ONLY, and a max-height beside it. The unprefixed `line-clamp`
       is a newer shorthand, and an iOS web view that already implements it
       takes the later declaration and clamps NOTHING. A card in a rail then
       grows taller than the cards beside it. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 2.7em;   /* two lines at line-height 1.35 */
    overflow: hidden;
    /* Interstellar must not be reordered by the right to left paragraph. */
    direction: ltr;
    unicode-bidi: isolate;
}


/* --- the meta row ------------------------------------------------------- */

/* Right to left: «۰۲:۴۹ ⏱» «2014 📅» «انگلیسی 🔤». The icon is the first
   child of each item, so it sits on the right of its value. See the .cb-meta
   comment in cinemabox-tokens.css. */
/* The three values must hold ONE line inside a 170 pixel rail card, because
   the owner's card shows one line. That is why the type and the gaps are
   smaller here than the .cb-meta default. */
.cb-card__meta {
    justify-content: center;
    gap: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
}

.cb-card__meta .cb-meta__item { gap: 4px; }

.cb-card__meta .cb-meta__icon { width: 13px; height: 13px; }


/* --- the rating and the genres ------------------------------------------ */

.cb-card__facts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 26px;
}

/* On the right of the card, the first genre nearest the edge. Two chips and
   the badge share about 160 pixels in a rail card, so the chip is tighter
   here than the .cb-chip default. */
.cb-card__genres {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.cb-card__genres .cb-chip {
    padding-inline: 9px;
    font-size: 11.5px;
    line-height: 1.75;
    border-radius: 8px;
}

/* On the LEFT of the card: the round yellow badge, then the score to its
   right. The tokens draw .cb-imdb for the hero, where the badge is on the
   right of the score; the owner's card picture is the other way round, so
   this one group runs left to right. */
.cb-card__imdb {
    flex: none;
    direction: ltr;
    gap: 5px;
}

.cb-card__imdb .cb-imdb__mark { width: 22px; height: 22px; font-size: 6.5px; }

.cb-card__imdb .cb-imdb__score { font-size: 14px; }


/* -----------------------------------------------------------------------------
   4. The actions
----------------------------------------------------------------------------- */

/* The round «+» sits nearest the right edge and the wide button fills the
   rest, which is the order in Movie_Series.PNG. Both are OUTLINED here. The
   hero button is filled; that is the one difference between them. */
.cb-card__actions {
    position: relative;
    /* Above .cb-card__link, or the card link would swallow both buttons. */
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Pinned to the foot of the card. Cards in one rail are the same height,
       so a two line name must not lift one card's button above its
       neighbour's. */
    margin-block-start: auto;
    padding-block-start: 2px;
}

/* NO border-radius here. .cb-btn already carries --cb-radius-sm, and that is
   the shape Movie_Series.PNG shows: a rounded RECTANGLE with a straight run
   down each end, not a stadium pill. Zoomed six times, the corner arc of the
   owner's button is about a fifth of its height. Only the round «+» is a
   circle, and .cb-btn--round gives it one. */
.cb-card__watch {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    padding-inline: 8px;
    font-size: 13.5px;
    white-space: nowrap;
}

.cb-card__actions .cb-btn--round {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
}

.cb-card__actions .cb-btn--round > svg { width: 17px; height: 17px; }


/* -----------------------------------------------------------------------------
   5. A row of cards
   -----------------------------------------------------------------------------

   The rail scrolls sideways with the thumb and snaps. It is the second half
   of the shared card: a screen that lists titles must not invent its own row.
----------------------------------------------------------------------------- */

.cb-row { margin-block: 34px; }

.cb-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 14px;
}

.cb-row__title {
    margin: 0;
    color: var(--cb-text);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.6;
}

/* A short coral rule under the row name, on the right where the name starts. */
.cb-row__title::after {
    content: '';
    display: block;
    width: 34px;
    height: 3px;
    margin-block-start: 4px;
    background: var(--cb-accent);
    border-radius: var(--cb-radius-pill);
}

.cb-row__rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* The snap port must respect the page gutter, or the browser snaps the
       first card flush to the screen edge on load and eats the padding. */
    scroll-padding-inline: var(--cb-row-bleed, 0);
    /* The shadow of a pressed card must not be cut off by the scroll box. */
    padding-block: 4px;
    /* The rail runs edge to edge on a phone, so the first card starts at the
       page margin and the last one can still be scrolled clear of it. */
    padding-inline: var(--cb-row-bleed, 0);
    margin-inline: calc(-1 * var(--cb-row-bleed, 0px));
    scrollbar-width: thin;
    scrollbar-color: var(--cb-surface-2) transparent;
    -webkit-overflow-scrolling: touch;
}

.cb-row__rail::-webkit-scrollbar { height: 6px; }
.cb-row__rail::-webkit-scrollbar-track { background: transparent; }
.cb-row__rail::-webkit-scrollbar-thumb {
    background: var(--cb-surface-2);
    border-radius: var(--cb-radius-pill);
}

.cb-row__rail > .cb-card {
    flex: none;
    /* Wide enough for the meta row and the two chips to hold one line each,
       which is what the owner's card shows. Do not shrink it below this. */
    width: 178px;
    scroll-snap-align: start;
}

@media (min-width: 480px) {
    .cb-row__rail > .cb-card { width: 205px; }
}

@media (min-width: 768px) {
    .cb-row__rail > .cb-card { width: 220px; }
    .cb-row__title { font-size: 22px; }
}


/* -----------------------------------------------------------------------------
   6. Motion
----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .cb-card { transition: none; }
    .cb-card:active { transform: none; }
    .cb-row__rail { scroll-behavior: auto; scroll-snap-type: none; }
}