/* ============================================================
   points.css — points.html (the Points explainer) in the new identity
   Loaded after home.css, whose hm- primitives it reuses (hm-hero,
   hm-section, hm-title, hm-text, hm-btn, hm-rows) and the sticky index from
   section-index.css (si-). Classes here are
   pt- and Points-only; every colour, size and space comes from
   variables.css. The page is light (data-theme="light").
   ============================================================ */

/* Sections on the alternate surface keep full-strength ink (--ink-muted is 3.3:1 on --surface-alt). */
.pt-page .hm-section--alt .hm-text,
.pt-page .hm-section--alt .hm-row-text,
.pt-page .hm-section--alt .hm-faq-answer,
.pt-page .hm-section--alt .hm-wallet-caption {
    color: var(--ink);
}

/* ---- What are points: a bold lead, then paragraphs in full ink (--ink-muted is 4.49:1 on white), then the DXP note ---- */
.pt-text-stack .hm-text {
    color: var(--ink);
}

.pt-text-stack .hm-text + .hm-text {
    margin-top: var(--space-4);
}

.pt-lead {
    font-weight: var(--weight-bold);
}

/* Aside note: thin rule on the left, muted text. */
.pt-note {
    margin: var(--space-5) 0 0;
    padding-left: var(--space-4);
    border-left: 2px solid var(--border);
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    color: var(--ink-muted);
}

.pt-narrow {
    max-width: var(--points-content-width);
    margin: 0 auto;
}

/* ---- Hero: text and the Points icon side by side from 992px; below, the icon becomes a faded background mark ---- */
.pt-hero-grid {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

/* Below 992px: a background mark, like the footer's giant wordmark. Absolutely positioned (adds no height),
   large and faded, bleeding off the hero's top-right corner and sitting behind the text. The hero clips it,
   so nothing scrolls sideways. */
@media (max-width: 991px) {
    .pt-page .hm-hero {
        overflow: hidden;
    }

    /* the text stops short of the right edge, so its lines break earlier and more of the mark shows */
    .pt-hero-grid > div {
        position: relative;
        z-index: 1;
        padding-right: var(--points-hero-text-inset-sm);
    }

    .pt-hero-icon {
        position: absolute;
        top: var(--points-hero-mark-top);
        /* from the (centred) containing block out to the screen edge, then past it */
        right: calc((100% - 100vw) / 2 - var(--points-hero-mark-bleed));
        z-index: 0;
        display: block;
        width: var(--points-hero-mark-size);
        height: auto;
        opacity: var(--points-hero-mark-opacity);
        pointer-events: none;
    }
}

@media (min-width: 992px) {
    /* Text, a spacer, then the icon. The spacer is at most --points-hero-gap-max wide and gives way first
       (its flex-shrink dwarfs the text's), down to --space-12. Wide screens: the icon sits that gap after the
       text. As the screen narrows: the gap closes, then the text wraps and the icon stays at the right edge. */
    .pt-hero-grid {
        display: flex;
        gap: 0;
    }

    .pt-hero-grid > div {
        flex: 0 1 auto;
        min-width: 0;
    }

    .pt-hero-grid::after {
        content: "";
        order: 1;
        flex: 0 1000 var(--points-hero-gap-max);
        min-width: var(--space-12);
    }

    .pt-hero-icon {
        order: 2;
        flex: none;
        display: block;
        width: var(--points-hero-icon-size);
        height: auto;
    }
}

/* The hero subtitle ("Get rewarded for what you do.") in full white on this page, at every width. */
.pt-page .hm-hero-subtitle {
    color: var(--white);
}

.pt-hero-note {
    margin-top: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    color: var(--home-hero-subtitle-ink);
    max-width: 48ch;
}

.pt-hero-actions {
    margin-top: var(--space-6);
}

/* ---- Two-column split (What are Points, Where can I see my points) ---- */
.pt-split {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 992px) {
    .pt-split {
        grid-template-columns: 1fr 1fr;
    }
}

/* Sketch illustration (What are points): the column's width; on phones edge to edge. */
.pt-illustration {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    /* minmax(0, 1fr): the full-bleed image may overflow its track without widening the text beside it */
    .pt-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .pt-illustration {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
    }
}

/* ---- Earn and use: two columns, each with a solid "Today" and a dashed "As stores join" state ---- */
.pt-columns {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

@media (min-width: 768px) {
    .pt-columns {
        grid-template-columns: 1fr 1fr;
    }
}

.pt-column-title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-display-sm-size);
    line-height: var(--text-display-sm-line);
    color: var(--ink);
    margin: 0 0 var(--space-4);
}

/* "Today" is a white block whose tag is a solid accent pill with white text; "As stores join" (below) has no
   fill and a dashed outline on both the block and its tag. The text stays in the normal ink. */
.pt-state {
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.pt-state + .pt-state {
    margin-top: var(--space-3);
}

.pt-state-label {
    display: inline-block;
    margin: 0 0 var(--space-3);
    padding: var(--space-1) var(--space-3);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--white);
}

/* "As stores join" has no fill: the block and its tag share the same dashed outline. */
.pt-state--next {
    border: 1.5px dashed var(--gray-medium);
    background: transparent;
}

.pt-state--next .pt-state-label {
    border: 1.5px dashed var(--gray-medium);
    background: transparent;
    color: var(--ink);
}

.pt-state-text {
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    color: var(--ink);
}

/* ---- Text links with an arrow (See where points work, Go to Astros / Gems) ---- */
.pt-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
}

.pt-link,
.pt-link:visited {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.pt-link .material-symbols-outlined {
    font-size: var(--text-body-lg-size);
    transition: transform 0.3s ease-in-out;
}

/* as the app pages' links (.ap-more): on hover only the text is underlined and the arrow nudges toward where it points
   (right, or down for the link to the section below). The e-mail link keeps a plain underline and a still icon. */
@media (hover: hover) {
    .pt-link:hover {
        color: var(--accent);
    }

    .pt-link:not(.pt-mail):hover > span:first-child {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .pt-link:not(.pt-mail):hover .material-symbols-outlined {
        transform: translateX(var(--space-1));
    }

    .pt-link.pt-link--down:hover .material-symbols-outlined {
        transform: translateY(var(--space-1));
    }

    .pt-mail:hover {
        text-decoration: underline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pt-link .material-symbols-outlined {
        transition: none;
    }
}

/* ---- One balance, three tokens: each token is its own white card, set apart by a gap (no dividers) ----
   The markup reuses hm-rows / hm-row from home.css; these rules turn the rows into cards. */
.pt-apps .hm-rows {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
    background: transparent;
    border-bottom: 0;
}

.pt-apps .hm-rows li {
    border-top: 0;
}

.pt-apps .hm-row {
    align-items: flex-start;
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface);
}

/* name and description both in full ink (the description via the --alt rule at the top of this file) */
.pt-apps .hm-row-title {
    font-weight: var(--weight-bold);
    color: var(--ink);
}

.pt-apps .hm-row .pt-link {
    margin-top: var(--space-1);
    align-self: flex-start;
}

/* Token icons beside Points (drawn by home.css .hm-row-icon--points): Astros in its own colours (an <img>),
   Gems as a mask in --token-gem, so it follows the theme like the Points icon. */
.pt-token-icon--gems {
    background-color: var(--token-gem);
    -webkit-mask: url("/assets/images/icons/gemsIconColor.svg") center / contain no-repeat;
    mask: url("/assets/images/icons/gemsIconColor.svg") center / contain no-repeat;
}

/* The token cards are information, not links: no hover colour. */
@media (hover: hover) {
    .hm-row.pt-row-static:hover .hm-row-title {
        color: var(--ink);
    }
}

/* ---- Dracode: title and intro full width; below, the logo on a card (left, top-aligned with the first paragraph) and the text (right) ---- */
.pt-dracode-intro {
    max-width: var(--points-content-width);
}

.pt-dracode {
    margin-top: var(--space-8);
}

.pt-dracode .hm-text + .hm-text {
    margin-top: var(--space-4);
}

.pt-dracode-art {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) var(--space-8);
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
}

.pt-dracode-art img {
    display: block;
    width: 100%;
    max-width: var(--points-dracode-logo-width);
    height: auto;
}

@media (min-width: 992px) {
    .pt-dracode {
        align-items: start;
    }
}

/* Stacked: less air around the logo card. */
@media (max-width: 991px) {
    .pt-dracode {
        margin-top: var(--space-5);
        gap: var(--space-5);
    }

    .pt-dracode-art {
        padding: var(--space-6) var(--space-5);
    }
}

.pt-split--top {
    align-items: start;
}

.pt-split .hm-faq-list:first-child {
    margin-top: 0;
}

.pt-contact {
    margin-top: var(--space-2);
}

.pt-mail {
    margin-top: var(--space-2);
}

.pt-mail .material-symbols-outlined {
    font-size: var(--header-icon-size);
}

/* ---- Good to know: dark callout, points in two columns, one icon each ---- */
.pt-callout {
    margin-top: var(--space-6);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    background: var(--gray-dark);
}

.pt-know {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 768px) {
    .pt-know {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6) var(--space-8);
    }
}

.pt-know li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
    font-family: var(--font-sans);
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-line);
    color: var(--gray-light);
}

/* gold, the Points colour: --accent would be 2.9:1 on --gray-dark */
.pt-know .material-symbols-outlined {
    color: var(--token-points);
    padding-top: var(--space-1);
}

/* style.css forces every <p> to 18px / 28px !important below 768px; keep this one on the type scale. */
@media (max-width: 767px) {
    p.pt-note {
        font-size: var(--text-body-size) !important;
        line-height: var(--text-body-line) !important;
    }
}