/* ---------------------------------------------------------------------------
   Tunplus overrides

   Corrections to the vendor stylesheet that must survive a vendor update.
   `modules/frontend/style.css` is shipped compiled and gets replaced whole on
   every update, so anything written in there is lost silently. This file is
   loaded after it and is ours.
   --------------------------------------------------------------------------- */


/* Continue Watching -- restore the landscape card.

   Up to v2.2.0 the card was a 135px-tall landscape strip (see
   Modules/Frontend/Resources/assets/sass/custom/widget/_continue-watch.scss,
   which the v2.2.1 package did not ship). The compiled stylesheet in v2.2.1
   turned it into a 266x330 portrait poster, which made the row roughly twice
   as tall as every other row on the homepage. */

.continue-watch-card {
    max-width: none;
}

.continue-watch-card .image-link {
    aspect-ratio: auto;
    position: relative;
}

.continue-watch-card .continue-watch-image {
    position: relative;
    inset: auto;
    width: 100%;
    height: 135px;
    object-fit: cover;
    object-position: top center;
}


/* Phone spacing -- scale the gutters down with the cards.

   Everything between the cards is sized in fixed pixels for a desktop card
   (~220px wide, ~330px tall): 12px of padding on each side of a slide, and
   50px under every row. Once the row shows 3.5 cards on a 390px screen the
   card is only ~90px, so those same gutters take about a fifth of the row
   width and a third of its height -- the cards look shrunk and adrift.
   These bring the gutters back to the same proportion they have on desktop. */

/* script.js writes --spacing inline from data-spacing, so !important is the
   only way to reach it. Going through the variable (rather than the padding)
   keeps .slick-list's matching negative margin in step, so the first card
   still lines up with the section title. */

@media (max-width: 767.98px) {
    .slick-general {
        --spacing: 8px !important;
    }

    .card-style-slider .slick-list.draggable {
        margin-bottom: 2rem;
    }
}

@media (max-width: 575.98px) {
    .slick-general {
        --spacing: 5px !important;
    }

    .card-style-slider .slick-list.draggable {
        margin-bottom: 1.5rem;
    }
}


/* ===========================================================================
   Phone card + banner consistency

   Measured on a 390px viewport, the homepage rows did not agree with each
   other: the Top 10 posters were 100x200 while every other poster row was
   100x140, the cast "circles" were 76x130 ellipses, channel logos were
   squeezed into 76x150 strips, and the language tiles took their height from
   whatever image had been uploaded. Each of those is a fixed pixel size that
   was chosen for the desktop card and never revisited for the smaller one.

   Everything here is scoped to phone/tablet widths, so the desktop layout is
   byte-for-byte unchanged, and nothing touches a colour.
   =========================================================================== */

@media (max-width: 767.98px) {

    /* --- Posters -------------------------------------------------------- */

    /* 2/2.8 is the house poster ratio (.iq-card .block-images .image-box img).
       Top 10 opted out of it with a fixed height, which is why that one row
       stood 60px taller than the rows under it. */
    .iq-top-ten-block .block-image .overly-images .top-ten-img {
        aspect-ratio: 2 / 2.8;
        height: auto;
    }

    /* The rank digit is sized against the desktop card, so on a 100px card it
       was a 72px numeral hanging 45px below the poster and dragging the row's
       height with it. Tucked into the corner as a badge instead. The vendor
       rule carries !important, so this has to as well. */
    .iq-top-ten-block .block-image .top-ten-numbers,
    .iq-top-ten-block:hover .block-image .top-ten-numbers {
        bottom: 2px;
        left: 6px;
        font-size: 2.25rem !important;
        line-height: 1;
    }

    /* Two-word names wrapped onto a second line, so the row sat taller than
       its neighbours and its cards ended at different heights. */
    .cast-card .cast-title {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* --- Round and square tiles ----------------------------------------- */

    /* 130px tall inside an 86px slide: clipped, and an ellipse rather than a
       circle because only the height rule had been rewritten for mobile. */
    .cast-card .cast-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        margin-bottom: 8px;
    }

    /* Channel logos are square artwork; the 150px height stretched the frame
       into a portrait strip with the logo lost in the middle. */
    .channel-card .channel-img {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    /* The language tile had no ratio of its own, so the row's height followed
       the first image's proportions and changed whenever one was replaced. */
    .language-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    /* --- Section headings ------------------------------------------------ */

    /* The titles mix French and Arabic. Without this the leading emoji and
       any trailing punctuation of an Arabic title get placed by the page's
       LTR direction instead of the title's own, which is what makes some
       headings look mis-ordered. `plaintext` resolves each title on its own. */
    .main-title {
        unicode-bidi: plaintext;
    }

    .streamit-block > .d-flex:first-child {
        margin-block: 8px !important;
        margin-inline-end: 0 !important;
    }
}

@media (max-width: 575.98px) {

    /* --- Hero banner ----------------------------------------------------- */

    /* 500px of a 844px screen is 59% of the first view spent on one slide,
       against roughly 37% in the design the client sent. The height is fixed
       rather than content-driven, so it is trimmed here and the content
       inside it is trimmed to match. */
    .main-banner .slick-item {
        height: 360px;
    }

    .main-banner .slick-item .movie-content {
        padding: 24px 0;
    }

    /* The stock scrim fades out halfway up, which was fine over a 500px slide
       but leaves the title and the meta row sitting on bare artwork now that
       the slide is 360px. Reaching higher and darker keeps them legible over
       a bright still without touching the overlay's colour. */
    .main-banner .slick-item:after {
        background-image:
            linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)),
            linear-gradient(1turn, #000e17 2%, rgba(0, 14, 23, .75) 38%, transparent 72%),
            linear-gradient(133.05deg, #000, transparent 36.66%),
            linear-gradient(226.85deg, #000, transparent 43.12%);
    }

    /* Three truncated lines of synopsis are the single largest block in the
       overlay and the reference has none; the full text is on the details
       page one tap away. */
    .main-banner .movie-info .line-count-3 {
        display: none;
    }

    /* Bootstrap spacing utilities, so !important is needed to reach them.
       Scoped to the banner -- mt-4/mt-5 keep their usual value elsewhere. */
    .main-banner .movie-info .mt-4 {
        margin-top: 0.75rem !important;
    }

    .main-banner .movie-info .mt-5 {
        margin-top: 1rem !important;
    }

    .main-banner .movie-info .movie-tag {
        margin-bottom: 0.5rem !important;
    }
}


/* ===========================================================================
   Continue Watching stays wide on a phone

   The card's image is a fixed 135px tall. On desktop the card is ~267px wide,
   so that reads as the landscape strip it is meant to be. On a 390px phone
   the same card is only 101px wide, so the "wide" card came out portrait --
   taller than it is wide. Two halves to the fix: fewer cards per row, so each
   one has room to be wide (data-items-mobile in continue_watch.blade.php),
   and a ratio rather than a fixed height here, so it stays wide at any width.
   =========================================================================== */

@media (max-width: 767.98px) {

    .continue-watch-card .continue-watch-image {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}