/* ==========================================================================
   INFO PAGES (2026-10-28): the photo header and icon cards for FAQ, Help
   Center, Support, Family / Senior Travel, Host Match, Elite Partners and
   the creator sign-in. Brand tokens from et-blocks.css (--eb-*). Loaded only
   by those templates, after their own stylesheets.
   ========================================================================== */

/* --- The photo card: any title block with .ipx-photo and --ipx-img ------- */
.ipx-photo, .ip.info-page .ip-hero__in {
    position: relative; isolation: isolate; overflow: hidden; color: #fff;
    border-radius: var(--eb-r, 18px); box-shadow: var(--eb-sh);
    background: var(--eb-ink, #0f1a2c) var(--ipx-img, none) center / cover no-repeat;
}
.ipx-photo::before, .ip.info-page .ip-hero__in::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(15, 26, 44, .15) 0%, rgba(15, 26, 44, .5) 45%, rgba(15, 26, 44, .9) 100%);
}
.ipx-photo h1, .ipx-photo h1 *, .ip.info-page .ip-hero__in h1, .ip.info-page .ip-hero__in h1 *, .ipx-photo .pg-title, .ipx-photo .cf-title, .ipx-photo .pk-gold { color: #fff; }
.ipx-photo p, .ipx-photo .cf-lead, .ipx-photo .cf-lede, .ipx-photo .pg-sub, .ipx-photo .pk-lead, .ipx-photo .ip-lead, .ip.info-page .ip-lead, .ip.info-page .ip-lead * { color: rgba(255, 255, 255, .92); }
.ipx-photo .ap-link { color: #fff; }
.ipx-kick, .ipx-photo .cf-eyebrow, .ipx-photo .pg-kicker, .ipx-photo .ip-eyebrow, .ip.info-page .ip-eyebrow, .ipx-photo .et-eyebrow {
    display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; width: auto; margin: 0 0 10px; padding: 4px 11px;
    border-radius: 999px; background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px);
    font-size: .8rem; font-weight: 700; letter-spacing: .01em; line-height: 1.3; color: #fff;
}
.ipx-photo .et-eyebrow .et-i, .ipx-photo .ipx-kick .et-i { color: #fff; width: 14px; height: 14px; }

/* --- Help, FAQ, Support: the title block turns into the photo card ------- */
.ip.info-page .ip-hero { padding: 16px 0 8px; text-align: left; }
.ip.info-page .ip-hero__in {
    width: calc(100% - 32px); max-width: 1060px; margin-inline: auto; padding: 30px 20px 22px;
    min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end;
}
.ip.info-page .ip-hero h1 { font-size: clamp(1.6rem, 5.4vw, 3rem); line-height: 1.12; }
.ip.info-page .ip-lead { margin: 10px 0 0; font-size: 1rem; max-width: 60ch; }
.ip.info-page .ip-search { margin: 18px 0 0; max-width: 620px; background: #fff; color: var(--eb-ink); }
.ip.info-page .ip-search input { color: var(--eb-ink); }
.ip.info-page .ip-search__go { background: var(--eb-blue); color: #fff; }
.ip.info-page .faq-status { color: rgba(255, 255, 255, .9); margin-bottom: 0; }
.ip.info-page .faq-status:empty { display: none; }
@media (min-width: 861px) { .ip.info-page .ip-hero__in { padding: 44px 40px 34px; min-height: 320px; } }

/* Topic tiles (Help Center) and channels (Support) as icon cards. */
.ip.info-page .ip-hero__after { margin-top: 18px; }
.ip.info-page .ip-topic, .ip.info-page .ip-channel {
    background: #fff; border: 1px solid var(--eb-line); box-shadow: var(--eb-sh); border-radius: 16px;
}
.ip.info-page .ip-topic .et-ico, .ip.info-page .ip-channel .et-ico {
    background: var(--eb-blue-soft); color: var(--eb-blue); border-radius: 12px;
}
.ip.info-page .ip-channel--urgent { border-color: rgba(185, 28, 28, .25); }
.ip.info-page .ip-channel--urgent .et-ico { background: var(--c-danger-bg, #fdecec); color: var(--c-danger, #b42318); }
.ip.info-page .ip-topic:hover, .ip.info-page .ip-topic:focus-visible { border-color: var(--eb-blue); background: #fff; }

/* Feature cards on Support and steps on Help Center. */
.ip.info-page .info-feature, .ip.info-page .ip-steps > li {
    background: #fff; border: 1px solid var(--eb-line); border-radius: 16px; box-shadow: var(--eb-sh);
}
.ip.info-page .info-feature .et-ico { background: var(--eb-blue-soft); color: var(--eb-blue); border-radius: 12px; }
.ip.info-page .ip-steps > li::before { background: var(--eb-blue); border-radius: 50%; content: counter(ip-step); font-weight: 800; }
@media (max-width: 600px) { .ip.info-page .ip-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* Section heads with an icon square (FAQ, Help, Support). The h2 stays a
   direct child of the section: the "On this page" index looks for it. */
.ipx-sec { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.ipx-sec > .eb-ico { grid-row: 1 / span 2; width: 44px; height: 44px; }
.ipx-sec > .meta-line { grid-column: 2; margin: 0; }
.ipx-sec > h2 { grid-column: 2; margin: 0; }
.ipx-sec > :not(.eb-ico):not(.meta-line):not(h2) { grid-column: 1 / -1; }
.ipx-sec > .meta-line { align-self: end; }
.ipx-sec > h2 { align-self: start; }

/* FAQ: every question its own card that opens and closes. */
.ip.info-page .faq-acc { border-top: 0; display: grid; gap: 10px; margin-top: 16px; }
.ip.info-page .faq-q {
    border: 1px solid var(--eb-line); border-radius: 16px; background: #fff; box-shadow: var(--eb-sh);
    transition: border-color .2s;
}
.ip.info-page .faq-q[open] { border-color: rgba(37, 99, 235, .45); }
.ip.info-page .faq-q > summary { padding: 14px 14px 14px 14px; min-height: 58px; gap: 12px; justify-content: flex-start; }
.ip.info-page .faq-q > summary h3 { flex: 1 1 auto; min-width: 0; }
.ipx-qi { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
          background: var(--eb-blue-soft); color: var(--eb-blue); }
.ipx-qi .et-i { width: 16px; height: 16px; }
.ip.info-page .faq-q__icon { background: var(--eb-soft); }
.ip.info-page .faq-q[open] .faq-q__icon { background: var(--eb-blue); }
.ip.info-page .faq-a { padding: 0 18px 18px 58px; }
@media (max-width: 734px) {
    .ip.info-page .faq-q > summary { padding: 12px; }
    .ip.info-page .faq-a { padding: 0 14px 14px 14px; }
    .ip.info-page .ip-main .faq-q h3 { font-size: .98rem; }
}
.ip.info-page .faq-empty { background: var(--eb-soft); border-radius: 16px; }

/* --- Family / Senior Travel ------------------------------------------- */
.cf-hero .cf-hero__copy.ipx-photo { padding: 30px 20px 24px; text-align: left; max-width: 1060px; }
.cf-hero .cf-hero__copy.ipx-photo .cf-hero-actions { justify-content: flex-start; }
.cf-hero .cf-hero__copy.ipx-photo .cf-lede { margin-inline: 0; }
.cf-hero .ipx-photo .cf-hero__mark { margin: 0 0 12px; background: rgba(255, 255, 255, .18); color: #fff; border: 0; }
.cf-hero .ipx-photo .cf-title { font-size: clamp(1.7rem, 5.6vw, 2.9rem); line-height: 1.1; }
.cf-hero:has(.ipx-photo) { padding: 16px 0 28px; }
.cf-hero__grid:has(.ipx-photo) { grid-template-columns: minmax(0, 1fr); }
.cf-hero__grid:has(.ipx-photo) .cf-art { display: none; }
.cf-hero .cf-limit { background: #fff; border: 1px solid var(--eb-line); box-shadow: var(--eb-sh); border-radius: 16px; margin-top: 16px; }
.cf-hero .cf-limit__ico { background: var(--eb-blue-soft); color: var(--eb-blue); }
@media (min-width: 861px) { .cf-hero .cf-hero__copy.ipx-photo { padding: 48px 44px 40px; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; } }

.cf-page .cf-service, .cf-page .cf-benefit, .cf-page .cf-card {
    background: #fff; border: 1px solid var(--eb-line); border-radius: 16px; box-shadow: var(--eb-sh);
}
.cf-page .cf-ico-sm, .cf-page .cf-ico { background: var(--eb-blue-soft); color: var(--eb-blue); border-radius: 12px; }
.cf-page .cf-rules { background: #fff; border: 1px solid var(--eb-line); border-radius: 16px; box-shadow: var(--eb-sh); }

/* --- Host Match: on a phone the opening sits on a photo ------------------- */
@media (max-width: 734px) {
    .hm-match .pk-hero { padding-top: 14px; }
    .hm-match .pk-hero__copy.ipx-photo-sm {
        position: relative; isolation: isolate; overflow: hidden; padding: 30px 20px 22px; border-radius: 18px;
        background: var(--eb-ink) var(--ipx-img, none) center / cover no-repeat; box-shadow: var(--eb-sh);
    }
    .hm-match .pk-hero__copy.ipx-photo-sm::before {
        content: ""; position: absolute; inset: 0; z-index: -1;
        background: linear-gradient(180deg, rgba(15, 26, 44, .15), rgba(15, 26, 44, .55) 45%, rgba(15, 26, 44, .9));
    }
    .hm-match .ipx-photo-sm h1, .hm-match .ipx-photo-sm .pk-gold, .hm-match .ipx-photo-sm .ap-link { color: #fff; }
    .hm-match .ipx-photo-sm h1 { font-size: 1.75rem; line-height: 1.15; }
    .hm-match .ipx-photo-sm .pk-lead { color: rgba(255, 255, 255, .92); }
    .hm-match .ipx-photo-sm .et-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
                                         background: rgba(255, 255, 255, .18); color: #fff; }
    .hm-match .ipx-photo-sm .et-eyebrow .et-i { color: #fff; }
}
.hm-match .pk-quiz.pk-panel { border-radius: 18px; box-shadow: var(--eb-sh); }
.hm-match .pk-q__n { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%;
                     background: var(--eb-blue); color: #fff; font-weight: 800; font-size: .88rem; line-height: 1; }

/* --- Elite Partners form ---------------------------------------------- */
.to-page .to-head.ipx-photo { padding: 30px 20px 22px; margin-bottom: 18px; min-height: 240px;
                              display: flex; flex-direction: column; justify-content: flex-end; }
.to-page .to-head.ipx-photo .pg-title { margin: 0 0 8px; font-size: clamp(1.6rem, 5.4vw, 2.5rem); }
.to-page .to-head.ipx-photo .pg-sub { margin: 0; max-width: 64ch; }
@media (min-width: 861px) { .to-page .to-head.ipx-photo { padding: 40px 36px 32px; min-height: 300px; } }
.to-page .pg-card { border-radius: 18px; box-shadow: var(--eb-sh); border: 1px solid var(--eb-line); }
.to-page .ipx-h2 { display: flex; align-items: center; gap: 12px; }
.to-page .ipx-h2 .eb-ico { width: 38px; height: 38px; }
.to-page .ipx-h2 h2 { margin: 0; }
.to-page .to-form label .et-i { width: 15px; height: 15px; color: var(--eb-blue); margin-right: 6px; vertical-align: -2px; }
.to-page .to-steps { counter-reset: tostep; list-style: none; padding: 0; }
.to-page .to-steps li { counter-increment: tostep; position: relative; padding: 0 0 12px 42px; min-height: 30px; }
.to-page .to-steps li::before { content: counter(tostep); position: absolute; left: 0; top: -2px; width: 30px; height: 30px;
                                border-radius: 50%; display: grid; place-items: center; background: var(--eb-blue); color: #fff;
                                font-weight: 800; font-size: .85rem; }

/* --- Creator sign-in ------------------------------------------------- */
.cr-auth-wrap .ipx-badge { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center;
                           background: var(--eb-blue-soft); color: var(--eb-blue); }
.cr-auth-wrap .ipx-badge .et-i { width: 28px; height: 28px; }
.cr-auth-wrap .cr-auth-card { border-radius: 18px; box-shadow: var(--eb-sh); border: 1px solid var(--eb-line); }
.cr-auth-wrap .au-form label .et-i, .cr-auth-wrap .et-label .et-i { width: 15px; height: 15px; color: var(--eb-blue); margin-right: 6px; vertical-align: -2px; }
.cr-auth-wrap .ipx-chips { justify-content: center; margin: 4px 0 16px; }