/* ── Homepage title + intro (index.php) ───────────────────────────────────────
   .evas-home-title  the main <h1> under the search bar (xcorts_title()). Was
                     flat #f39 pink Roboto at 2.5rem, ~5 lines on phones.
   .evas-home-intro  the SEO text box under it (xcorts_description(): ~3,000
                     words of bare text plus <H1>/<H2> headings). Was a 50px
                     scroll box with the white 40px Roboto heading and a native
                     scrollbar. Still a scroll box; now it reads as a subtitle
                     that fades out, with a thin brand scrollbar.

   City pages (taxonomy-escorts_zones.php) use the same two classes: their
   first SEO title is the <h1> above the box, the rest of their SEO text is
   the intro.

   Same tags and same text, so nothing changes for SEO.

   Not Bruney: the kit keeps its swash display face for one- or two-word
   headings, and across this two-sentence title it reads poorly ("CDMX").
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Title ────────────────────────────────────────────────────────────────── */

.evas-home-title {
    max-width: 880px;
    margin: 36px auto 0;
    font-family: 'BDO Grotesk', sans-serif;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.6px;
    text-align: center;
    color: #fff;
    text-wrap: balance;
}

/* Gradient text only where background-clip:text is supported; otherwise the
   plain white above stays. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .evas-home-title {
        background-image: linear-gradient(180deg, #fff 30%, var(--brand-purpleL) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

/* Short accent rule under the title. */
.evas-home-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    margin: 18px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand-purple), var(--brand-purpleL));
}

/* ── Intro / SEO box ──────────────────────────────────────────────────────── */

.evas-home-intro {
    max-width: 720px;
    max-height: 76px;
    margin: 16px auto 28px;
    padding: 0 12px;
    overflow-y: auto;
    color: var(--brand-muted);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    /* Fade the last line so the box reads as "there is more", not as cut off. */
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--brand-purpleL-rgb) / .35) transparent;
}

.evas-home-intro::-webkit-scrollbar {
    width: 4px;
}

.evas-home-intro::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgb(var(--brand-purpleL-rgb) / .35);
}

/* style.css sets `*:not(i){font-family:'Roboto'}` on every element. */
.evas-home-intro,
.evas-home-intro *:not(i) {
    font-family: 'BDO Grotesk', sans-serif;
}

.evas-home-intro h1,
.evas-home-intro h2 {
    margin: 0 0 6px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

.evas-home-intro h1 {
    color: var(--brand-text);
    font-size: 17px;
}

.evas-home-intro h2 {
    margin-top: 14px;
    color: var(--brand-purpleL);
    font-size: 15px;
}

/* City pages with no SEO text still print the (empty) box. */
.evas-home-intro:not(:has(*)) {
    display: none;
}

/* The first heading is the visible subtitle; keep it tight to the title. */
.evas-home-intro > :first-child {
    margin-top: 0;
}

/* ── Homepage: featured escorts (round photos) ────────────────────────────── */

/* The hand-built black tables in index.php (direct children of <body>; no
   other template prints one there). Each cell is
   <br><a><img></a><br><p style="color:#FFFFFF">caption ❤️</p>.
   The black background stays: the round photos have black corners. */
body > table[style*="background-color:#000000"] td[width="50%"] {
    padding: 18px 8px 14px;
}

/* The two <br>s put an empty line above every photo and none between photo
   and caption; spacing now comes from the padding and margin here. */
body > table[style*="background-color:#000000"] td[width="50%"] > br {
    display: none;
}

body > table[style*="background-color:#000000"] td[width="50%"] > a {
    display: inline-block;
}

body > table[style*="background-color:#000000"] td[width="50%"] > p {
    max-width: 240px;
    margin: 10px auto 0;
    padding: 0 4px;
    /* Inline style is color:#FFFFFF. */
    color: var(--brand-text) !important;
    font-family: 'BDO Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .1px;
    /* Two-line captions split evenly; the heart is joined to the last word
       with &nbsp; in index.php, so it never wraps alone. */
    text-wrap: balance;
}

@media (max-width: 575.98px) {
    body > table[style*="background-color:#000000"] td[width="50%"] {
        padding: 14px 6px 10px;
    }

    body > table[style*="background-color:#000000"] td[width="50%"] > p {
        margin-top: 8px;
        font-size: 13px;
    }
}

/* ── City pages: description under the grid ───────────────────────────────── */

/* The term's "descripcion_zona_abajo" (headings + paragraphs), in the same
   article typography as the Pages (.articulo-content, theme.css) and the same
   760px reading column. */
.articulo-content.evas-city-bottom {
    max-width: 760px;
    margin: 48px auto 32px;
    padding-top: 40px;
    /* Thin gradient rule above, like the kit's .divider-brand. */
    background: linear-gradient(90deg,
        rgb(var(--brand-purpleL-rgb) / 0) 0%,
        rgb(var(--brand-purpleL-rgb) / .35) 50%,
        rgb(var(--brand-purpleL-rgb) / 0) 100%) top / 100% 1px no-repeat;
}

/* style.css's `*:not(i){font-family:'Roboto'}` hits every element directly;
   on Pages this is re-asserted by an inline style that only loads there. */
.articulo-content.evas-city-bottom,
.articulo-content.evas-city-bottom *:not(i) {
    font-family: 'BDO Grotesk', sans-serif;
}

.articulo-content.evas-city-bottom > :first-child {
    margin-top: 0;
}

@media (max-width: 575.98px) {
    .articulo-content.evas-city-bottom {
        margin-top: 32px;
        padding-top: 28px;
    }
}

@media (max-width: 575.98px) {
    .evas-home-title {
        margin-top: 24px;
        letter-spacing: -.3px;
    }

    .evas-home-title::after {
        margin-top: 14px;
    }

    .evas-home-intro {
        margin-bottom: 20px;
    }

    .evas-home-intro h1 {
        font-size: 15px;
    }
}