/* ==========================================================================
   Two blocks that repeat across the site, restyled in one place.

   Linked from _head_links.html (and directly from casino_sites/index.html,
   the one page that does not include it), so every page that has either
   block gets the same design without its template changing. Every rule is
   scoped to the block's own markup and does nothing on a page without it.

   Loaded before the older sheets on most pages, so selectors carry one more
   element or class than the rules they replace in style2.css and in the
   pre-built tailwind.css; no !important is needed.

   1. The page hero: the box with the video background under the navigation
      (15 pages). The phone layout is rebuilt; wider screens only stop
      stretching the video.
   2. The "about" cards: .about-line2 / .about_item2 / .about-item2 at the
      foot of the casino, slot and live game pages (10 pages).

   Logical properties throughout, so right-to-left locales mirror.
   ========================================================================== */

/* ==========================================================================
   1. Page hero
   ========================================================================== */

/* The video used `object-fill`, which stretches it to the box. The box is
   as tall as its text, so on a wide screen the video was squeezed flat;
   cropping it keeps its proportions. */
.max-w-5xl.aspect-video.rounded-2xl > video {
    object-fit: cover;
}

@media (max-width: 639.98px) {
    /* The homepage nests the hero in a container that already has the
       page gutter; without this the hero sits 16px narrower than the
       cards under it. */
    .home-main-61 > .flex.w-full.px-4 {
        padding-inline: 0;
    }

    .max-w-5xl.aspect-video.rounded-2xl {
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 1.25rem;
        background:
            radial-gradient(130% 80% at 0% 0%, rgba(169, 72, 248, 0.3), transparent 55%),
            radial-gradient(120% 80% at 100% 100%, rgba(34, 226, 182, 0.16), transparent 55%),
            linear-gradient(180deg, #1d1a24 0%, #141218 100%);
        box-shadow: 0 22px 44px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    [dir="rtl"] .max-w-5xl.aspect-video.rounded-2xl {
        background:
            radial-gradient(130% 80% at 100% 0%, rgba(169, 72, 248, 0.3), transparent 55%),
            radial-gradient(120% 80% at 0% 100%, rgba(34, 226, 182, 0.16), transparent 55%),
            linear-gradient(180deg, #1d1a24 0%, #141218 100%);
    }

    /* The grey Tailwind gradient and the dimming layer give way to the
       brand gradient above. (The video itself is already hidden here.) */
    .max-w-5xl.aspect-video.rounded-2xl > div.absolute.inset-0 {
        display: none;
    }

    /* Text starts at the left edge, like the rest of the page. Centred
       lines of different lengths — with coloured words breaking them at
       different points — were what made the block hard to read. */
    .max-w-5xl.aspect-video.rounded-2xl > .relative.z-10 {
        align-items: flex-start;
        padding: 1.375rem 1.25rem 1.25rem;
        text-align: start;
    }

    .max-w-5xl.aspect-video.rounded-2xl > .relative.z-10 > :first-child {
        margin-bottom: 0.875rem;
        font-size: 1.3125rem;
        line-height: 1.28;
        letter-spacing: -0.01em;
        text-wrap: balance;
    }

    /* A short gradient rule under the title, as under the section titles. */
    .max-w-5xl.aspect-video.rounded-2xl > .relative.z-10 > :first-child::after {
        content: "";
        display: block;
        width: 2.75rem;
        height: 3px;
        margin-top: 0.75rem;
        border-radius: 3px;
        background: linear-gradient(90deg, #a948f8, #22e2b6);
    }

    .max-w-5xl.aspect-video.rounded-2xl > .relative.z-10 > p {
        color: #d6d4de;
        font-size: 0.9375rem;
        line-height: 1.65;
        text-wrap: pretty;
    }

    .max-w-5xl.aspect-video.rounded-2xl > .relative.z-10 > p:last-child {
        margin-bottom: 0;
    }

    /* Real links in the text read as links. (The coloured words without an
       href are styling, and are left as they are.) */
    .max-w-5xl.aspect-video.rounded-2xl > .relative.z-10 > p a[href] {
        text-decoration: underline;
        text-decoration-color: rgba(34, 226, 182, 0.6);
        text-underline-offset: 3px;
    }

    /* The "Last updated — by" line on the bonus guides. */
    .max-w-5xl.aspect-video.rounded-2xl > .relative.z-10 > p.text-left {
        width: 100%;
        margin-top: 1rem;
        padding-top: 0.875rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        color: #a3a1ae;
        font-size: 0.8125rem;
        line-height: 1.5;
        text-align: start;
    }
}

/* ==========================================================================
   2. About cards
   ========================================================================== */

/* Each row is a grid of equal columns: as many 21rem-or-wider columns as
   fit, so a row of two, three or five cards lines up on its own edges and
   every row shares the same outer edges. */
body .about-line2 {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    gap: 1rem;
    width: calc(100% - 2rem);
    max-width: 76rem;
    margin: 1rem auto 0;
    padding: 0;
}

body .about-line2 .about_item2 {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    height: auto;
    width: auto;
    margin: 0;
    padding: 1.25rem 1.375rem 1.375rem;
    padding-inline-start: 1.625rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-image: none;
    border-radius: 1rem;
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(169, 72, 248, 0.09), transparent 60%),
        linear-gradient(180deg, #1c1a22, #16141b);
    box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.9);
    color: #c9c5d3;
    font-size: 0.9375rem;
    line-height: 1.7;
    overflow-wrap: break-word;
    transition: border-color .25s ease, box-shadow .25s ease;
}

[dir="rtl"] body .about-line2 .about_item2 {
    background:
        radial-gradient(120% 60% at 100% 0%, rgba(169, 72, 248, 0.09), transparent 60%),
        linear-gradient(180deg, #1c1a22, #16141b);
}

/* The purple-to-teal bar on the leading edge, now with rounded ends; it
   was a border-image, which cannot follow a border-radius. */
body .about-line2 .about_item2::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    bottom: 1.25rem;
    inset-inline-start: 0;
    width: 3px;
    border-start-end-radius: 3px;
    border-end-end-radius: 3px;
    background: linear-gradient(180deg, #a948f8, #22e2b6);
}

/* No more zoom on hover: a block of text that grows under the pointer is
   harder to read. The border lights up instead. */
body .about-line2 .about_item2:hover {
    transform: none;
    border: 1px solid rgba(169, 72, 248, 0.35);
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(169, 72, 248, 0.12), transparent 60%),
        linear-gradient(180deg, #1c1a22, #16141b);
    box-shadow: 0 22px 44px -30px rgba(0, 0, 0, 0.95), 0 12px 30px -24px rgba(169, 72, 248, 0.45);
}

/* The card title: left-aligned with the text it introduces. */
body .about-line2 .about-item2 {
    margin: 0 0 0.625rem;
    padding: 0;
    color: #fff;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-align: start;
    text-wrap: balance;
}

body .about-line2 .about-item2 h2,
body .about-line2 .about-item2 h3 {
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

body .about-line2 .about_item2 a {
    text-underline-offset: 3px;
}

@media (max-width: 639.98px) {
    body .about-line2 {
        gap: 0.75rem;
        margin-top: 0.75rem;
    }

    body .about-line2 .about_item2 {
        padding: 1rem 1.125rem 1.125rem;
        padding-inline-start: 1.375rem;
        line-height: 1.65;
    }

    body .about-line2 .about_item2::before {
        top: 1rem;
        bottom: 1rem;
    }

    body .about-line2 .about-item2 {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .about-line2 .about_item2 {
        transition: none;
    }
}