/*
 * Theme-styled sections of the /cards page (hand-written — unlike the generated cards-waitlist.css).
 *
 * These sections are placed BETWEEN the `.cards-page` blocks, not inside them: inside `.cards-page`
 * cards-waitlist.css resets every theme style (`all: revert`), so bootstrap / style-v2 globals
 * (.container, .section, headings, body font…) would not reach them.
 *
 * Rules are taken from virtual-business-cards.css.
 */

/*
 * Smooth scrolling for in-page anchors (hero CTA → #waitlist).
 * The landing's own `html { scroll-behavior: smooth }` ends up scoped to `.cards-page` in
 * cards-waitlist.css, which is not the scroller, and style-v2 sets `:root { scroll-behavior: auto }`
 * in a stylesheet loaded after this one — hence the `html:root` specificity.
 */
@media (prefers-reduced-motion: no-preference) {
    html:root {
        scroll-behavior: smooth;
    }
}

.section .container {
    max-width: 1400px;
    padding: 0;
}

/*
 * One container for the page content: the theme sections inside <main> take the width and the side
 * gutter of the landing's sections (`mx-auto max-w-6xl px-6`), so their edges line up with the
 * landing's content. The footer is a `.section` too and keeps the theme container above.
 * --container-* and --spacing are the landing's tokens; cards-waitlist.css declares them inside
 * `.cards-page` and repeats them on :root for this file (see App\Console\BuildCardsCss).
 * !important because the theme resizes `.container` per breakpoint with !important (highlights.css).
 * From 768px only: below that the sections are full-bleed (see the mobile rules at the end).
 */
@media (min-width: 768px) {
    main > .section > .container {
        width: 100% !important;
        max-width: var(--container-6xl) !important;
        margin: 0 auto !important;
        padding: 0 calc(var(--spacing) * 6);
    }
}

.section {
    margin-bottom: 80px;
}


/*
 * Hero (the first section, `.cards-page .hero-scene`)
 *
 * Its look comes from the generated cards-waitlist.css; only the responsive behaviour lives here,
 * so a regeneration does not drop it. `main` in the selectors is there for specificity alone: it
 * lifts them above the scoped `:scope .utility` rules.
 *
 * The photo (5480 × 2992) has the cards in its right half and nothing in the left ~45%, where the
 * text sits. With a fixed height and `cover` it lost its sides on anything narrower than ~1700px:
 * the purple card was cut off, and at 768px the black card ran under the text. So from 768px up
 * (below that the hero has no photo) the section keeps the photo's proportions — the photo is shown
 * whole — up to the 930px of wide screens, and the text is kept inside the empty part of the photo.
 */
@media (min-width: 768px) {
    main .cards-page .hero-scene {
        min-height: clamp(440px, calc(100vw * 2992 / 5480), 930px);
    }

    /* The text is centred vertically; the paddings are only the minimum air around it. */
    main .cards-page .hero-scene > div {
        padding-block: clamp(32px, 5vw, 112px);
    }

    /* 45% of the container ends just before the black card, which starts at 48% of the photo. */
    main .cards-page .hero-scene h1 {
        max-width: min(var(--container-xl), 45%);
        font-size: clamp(34px, 4.2vw, 48px);
    }

    main .cards-page .hero-scene h1 + p {
        max-width: min(var(--container-md), 45%);
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    main .cards-page .hero-scene h1 + p {
        font-size: 16px;
    }
}

/*
 * Below 768px there is no room for the text beside the cards, so they are stacked: the text first,
 * the photo under it. hero-banner-mobile.avif is the cards area cut out of the desktop photo
 * (crop 3500 × 2780 at 1980,212 → 1400 × 1112): its top and left edges are pure black and melt
 * into the black section, while the pedestal runs off the right and bottom edges — hence the photo
 * sits at the bottom of the section and is anchored to its right bottom corner.
 */
@media (max-width: 767.98px) {
    main .cards-page .hero-scene {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        background: #000;
    }

    /*
     * The photo brings its own black air above the cards. The text stays on top of the photo:
     * pulled up (see below), the photo's black corner would otherwise cover the button.
     */
    main .cards-page .hero-scene > div {
        position: relative;
        z-index: 1;
        padding-block: 56px 16px;
    }

    /*
     * Full width on phones. From ~480px the height stops growing: the photo keeps to the right and
     * is pulled up (by up to 120px at 720px) into the room that opens to the right of the text —
     * the purple card rises beside the button instead of leaving a black band above the photo.
     */
    main .cards-page .hero-scene::after {
        content: "";
        display: block;
        width: 100%;
        max-height: 380px;
        aspect-ratio: 3500 / 2780;
        margin-top: clamp(-120px, (480px - 100vw) / 2, 0px);
        background: url("../images/cards/hero-banner-mobile.avif") right bottom / auto 100% no-repeat;
    }
}


/*
 * Typography of the theme sections = typography of the landing's sections, so the page reads as one:
 * h2 as `text-3xl font-semibold`, h3 as `text-lg font-semibold`, text as `text-muted-foreground`
 * on the landing's base (16px / 1.6, antialiased, headings -0.02em) — see cards-waitlist.css.
 * The two colours are the landing's --foreground and --muted-foreground: those tokens exist inside
 * `.cards-page` only, so their values are repeated here.
 * The theme sets its own sizes on bare `h2` / `h3` / `p` (per breakpoint too); these rules outweigh
 * them at every width, as the landing has one size for all widths.
 */
main > .section {
    --cards-foreground: oklch(27.2% .032 258.5);
    --cards-muted-foreground: oklch(47.1% .058 263);

    color: var(--cards-foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main > .section h2,
main > .section h3 {
    color: var(--cards-foreground);
    font-weight: 600;
    letter-spacing: -.02em;
}

main > .section h2 {
    font-size: 30px;
    line-height: 36px;
}

main > .section h3 {
    font-size: 18px;
    line-height: 28px;
}

main > .section p {
    color: var(--cards-muted-foreground);
    font-size: 16px;
    line-height: 1.6;
}


/* Using virtual cards */

.using-virtual-cards__inner {
    overflow: hidden;
    display: flex;
    border-radius: 32px;
    background: #ffffff;

    /* Shadow */
    box-shadow: 0 4px 38px 0 rgba(156, 25, 206, 0.10);
}

.using-virtual-cards__img {
    flex: 0 0 50%;
    min-width: 0;
}

/*
 * One photo for every width (images/cards/tap-click-done-*.avif, 1536 × 1024 = 3:2), framed per
 * layout by aspect-ratio and cropped into the frame with `cover`, so it never overflows the card.
 * The subject — terminal, card and hand — fills x ≈ 33–100%, y ≈ 22–78% of the photo; the blurred
 * white device on the left is the part to lose. object-position keeps the subject in every frame:
 * the x value acts side by side only (the frame can be narrower than 3:2 there), the y value in the
 * stacked layouts (frames wider than 3:2).
 */
.using-virtual-cards__img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 75% 45%;
}

/*
 * Side by side the photo takes half of the card. At 3:2 it is about as tall as the text; when the
 * text is taller the photo follows the card height (cropped at the sides) rather than leaving a gap.
 */
@media (min-width: 1400px) {
    .using-virtual-cards__img img {
        height: 100%;
    }
}

/*
 * Side by side the photo is taller than the text (it was not with the theme's larger type), so the
 * text is centred against it instead of leaving all the spare room under the logos.
 */
.using-virtual-cards__cnt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 60px;
}

.using-virtual-cards__cnt > :last-child {
    margin-bottom: 0;
}

.using-virtual-cards__cnt .title {
    margin-bottom: 16px;
}

.using-virtual-cards__cnt .desc {
    margin-bottom: 50px;
}

.logos-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 50px;
}


/* Safeguard */

.safeguard__inner {
    display: flex;
    gap: 50px;
}

.safeguard__inner > div {
    padding: 60px;
}

.safeguard__cnt {
    flex: 1;
    border-radius: 32px;
    background: #EEEFFF;
}

.safeguard__cnt .title {
    margin-bottom: 16px;
}

.safeguard__cnt .desc {
    margin-bottom: 50px;
}

.safeguard__list {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 30px;
    border-radius: 32px;
    background: #ffffff;
}

.safeguard__list .item .item__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}


@media (max-width: 1399.98px) {
    .using-virtual-cards__inner {
        flex-direction: column;
    }

    .using-virtual-cards__img {
        flex-basis: auto;
    }

    /* Stacked, the photo spans the card: a wide strip (the old photo's 1206 × 500 proportions). */
    .using-virtual-cards__img img {
        aspect-ratio: 12 / 5;
    }

    .logos-list {
        display: inline-flex;
        margin-right: 40px;
    }
}

@media (max-width: 1023.98px) {
    .using-virtual-cards__img img {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 1365.98px) {
    .using-virtual-cards__cnt {
        padding: 40px;
    }

    .logos-list {
        margin-bottom: 0;
    }

    .safeguard__inner {
        flex-direction: column;
    }

    .safeguard__cnt {
        display: flex;
        flex-basis: auto;
        gap: 50px;
    }

    .safeguard__cnt__wrap {
        flex-basis: 360px;
    }
}

@media (max-width: 767px) {
    .section {
        overflow: hidden;
    }

    .section .container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0;
    }

    .using-virtual-cards__inner {
        flex-direction: column-reverse;
        border-radius: 0;
    }

    /* Full screen width on phones: the whole photo, uncropped. */
    .using-virtual-cards__img img {
        aspect-ratio: 3 / 2;
    }

    .using-virtual-cards__cnt {
        padding: 20px;
    }

    .logos-list {
        flex-wrap: wrap;
    }

    .safeguard__inner > div {
        padding: 20px;
    }

    .safeguard__cnt {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        border-radius: 0;
    }

    .safeguard__cnt picture {
        text-align: center;
    }

    .safeguard__cnt .desc {
        margin-bottom: 0;
    }

    .safeguard__cnt__wrap {
        flex-basis: auto;
    }

    .safeguard__list {
        border-radius: 0;
    }
}