/* ============================================================
   Affiliate program, public side (Agent & Affiliate Center, phase 2).
   Pages: affiliate/partner-with-us (.ivs-afd), affiliate/landing (.ivs-afl).
   The root voice, form controls, alerts and the sign-in card live in
   css/components/ivs-auth-v5.css (shared with the agent portal); load it
   before this file. This file adds only the page headings, the wrap, the
   doors and the program page.
   Tokens from css/components/ivs-tokens.css (global); buttons from
   css/components/ivs-buttons.css, this file only sizes them.
   Rhythm (landing): parchment hero -> ivory steps -> ink "who" -> ivory form.
   ============================================================ */

/* First section on layout "app" sits under the fixed header (ivs-fab.js
   publishes --ivs-header-h); app-blank pages have no header. */
.ivs-aff-top { padding-top: calc(var(--ivs-header-h, 128px) + 2.4rem); }

.ivs-aff-wrap {
    width: min(1180px, calc(100% - 2.5rem));
    margin-inline: auto;
}

/* ── Shared voices ── */
.ivs-aff-eyebrow {
    font-family: var(--v5-font-label, sans-serif);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--v5-olive-700, #4a5e2f);
    margin: 0 0 .9rem;
}
.ivs-aff-eyebrow--onink { color: var(--v5-amber, #fcb913); }
.ivs-aff-h1,
.ivs-aff-h2 {
    font-family: var(--v5-font-display, Georgia, serif);
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 1rem;
    text-wrap: balance;
}
.ivs-aff-h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.ivs-aff-h2 { font-size: clamp(1.85rem, 3vw, 2.7rem); }
.ivs-aff-deck {
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--v5-stone, #5b574d);
    max-width: 58ch;
}
/* ════════════════════════════════════════════════════════════
   partner-with-us.html: two doors (Jesse's copy, §18.7)
   ════════════════════════════════════════════════════════════ */
.ivs-afd-head {
    padding-bottom: 2.2rem;
}
.ivs-afd-head .ivs-aff-deck { margin-bottom: 0; }
.ivs-afd-doors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    min-height: clamp(520px, 74svh, 780px);
}
.ivs-afd-door {
    position: relative;
    overflow: hidden;
    background: #14130f;
    display: flex;
    align-items: flex-end;
    color: #fff;
}
.ivs-afd-door img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ivs-anim-ease, ease);
}
@media (hover: hover) {
    .ivs-afd-door:hover img { transform: scale(1.035); }
}
.ivs-afd-scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 20% 92%,
        rgba(18, 17, 15, .84) 0%,
        rgba(18, 17, 15, .52) 40%,
        rgba(18, 17, 15, .14) 70%,
        rgba(18, 17, 15, 0) 100%);
}
.ivs-afd-text {
    position: relative;
    z-index: 2;
    padding: clamp(1.6rem, 4vw, 3rem);
    max-width: 580px;
}
.ivs-afd-kicker {
    font-family: var(--v5-font-label, sans-serif);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--v5-amber, #fcb913);
    margin: 0 0 .8rem;
}
.ivs-afd-title {
    font-family: var(--v5-font-display, Georgia, serif);
    font-weight: 500;
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 .8rem;
    color: #fff;
    text-wrap: balance;
}
.ivs-afd-copy {
    color: rgba(250, 249, 246, .9);
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0 0 1.4rem;
    max-width: 46ch;
}
.ivs-afd-signin {
    display: block;
    margin-top: 1rem;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .8rem;
    color: rgba(250, 249, 246, .78);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ivs-afd-signin:hover { color: #fff; }
.ivs-afd-foot {
    padding: 2rem 0 3rem;
    text-align: center;
}
@media (max-width: 860px) {
    .ivs-afd-doors { grid-template-columns: 1fr; min-height: 0; }
    .ivs-afd-door { min-height: 460px; }
}

/* ════════════════════════════════════════════════════════════
   affiliate.html: program page + application
   ════════════════════════════════════════════════════════════ */

/* Hero: a parchment band with the toile, the proposition set large, a
   postcard photo beside it. No full-bleed photo hero on purpose: this page
   is about a relationship, not a destination. */
.ivs-afl-hero {
    position: relative;
    background: var(--v5-parchment, #f2efe8);
    border-bottom: 1px solid var(--v5-line, #e4e0d5);
    box-shadow: inset 0 -14px 26px -14px rgba(32, 31, 29, .16);
    padding-bottom: clamp(2.6rem, 5vw, 4.5rem);
    overflow: hidden;
}
.ivs-afl-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../../images/italy-tile.webp') repeat;
    background-size: 620px;
    opacity: .14;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.2), #000 30%, #000 70%, rgba(0,0,0,.2));
    mask-image: linear-gradient(90deg, rgba(0,0,0,.2), #000 30%, #000 70%, rgba(0,0,0,.2));
}
.ivs-afl-hero > * { position: relative; z-index: 1; }
.ivs-afl-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.ivs-afl-hero .ivs-aff-h1 { max-width: 16ch; }
.ivs-afl-hero-actions { margin-top: 1.6rem; }
.ivs-afl-postcard {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--v5-ivory, #faf9f6);
    border: 1px solid var(--v5-line, #e4e0d5);
    padding: 10px;
    box-shadow: 0 18px 40px -26px rgba(32, 31, 29, .45);
}
.ivs-afl-postcard img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* How it works: a three-stop line. It is a real sequence, hence the numbers. */
.ivs-afl-steps { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.ivs-afl-steps-head { max-width: 640px; margin-bottom: 2.4rem; }
.ivs-afl-steps-head .ivs-aff-h2 { margin-bottom: 0; }
.ivs-afl-line {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    position: relative;
}
.ivs-afl-line::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 15px;
    height: 1px;
    background: var(--v5-line, #e4e0d5);
}
.ivs-afl-stop { position: relative; padding-top: 2.4rem; }
.ivs-afl-stop-n {
    position: absolute;
    top: 0; left: 0;
    width: 31px; height: 31px;
    background: var(--v5-olive-700, #4a5e2f);
    color: #fff;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .74rem;
    font-weight: 600;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 6px var(--v5-ivory, #faf9f6);
}
.ivs-afl-stop h3 {
    font-family: var(--v5-font-display, Georgia, serif);
    font-weight: 500;
    font-size: 1.32rem;
    line-height: 1.25;
    margin: 0 0 .55rem;
}
.ivs-afl-stop p {
    color: var(--v5-stone, #5b574d);
    line-height: 1.65;
    margin: 0;
    max-width: 38ch;
}

/* Who it is for: an ink band, three short lines as a ledger. */
.ivs-afl-who {
    background: #201f1d;
    border-top: 1px solid #14130f;
    border-bottom: 1px solid #14130f;
    box-shadow: inset 0 8px 16px -10px rgba(0, 0, 0, .5), inset 0 -8px 16px -10px rgba(0, 0, 0, .5);
    color: var(--v5-parchment, #f2efe8);
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.ivs-afl-who-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.ivs-afl-who .ivs-aff-h2 { color: #fff; margin-bottom: 0; }
.ivs-afl-ledger {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ivs-afl-ledger li {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    padding: 1rem 0;
    border-top: 1px solid rgba(250, 249, 246, .16);
    font-size: 1.05rem;
    line-height: 1.5;
}
.ivs-afl-ledger li:last-child { border-bottom: 1px solid rgba(250, 249, 246, .16); }
.ivs-afl-ledger li::before {
    content: '';
    flex: 0 0 auto;
    width: 8px; height: 8px;
    background: var(--v5-amber, #fcb913);
    transform: translateY(-2px);
}

/* Application: intro column + the form. */
.ivs-afl-apply { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem); }
.ivs-afl-apply-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
.ivs-afl-apply-intro { position: sticky; top: calc(var(--ivs-header-h, 128px) + 1.5rem); }
.ivs-afl-form {
    background: #fff;
    border: 1px solid var(--v5-line, #e4e0d5);
    padding: clamp(1.4rem, 3vw, 2.4rem);
}
.ivs-afl-applied {
    background: var(--v5-parchment, #f2efe8);
    border: 1px solid var(--v5-line, #e4e0d5);
    border-left: 3px solid var(--v5-olive-700, #4a5e2f);
    padding: clamp(1.4rem, 3vw, 2.2rem);
}
.ivs-afl-applied .ivs-aff-h2 { font-size: 1.6rem; }
.ivs-afl-help {
    text-align: center;
    padding: 0 0 clamp(3rem, 6vw, 5rem);
    color: var(--v5-stone, #5b574d);
}

@media (max-width: 900px) {
    .ivs-afl-hero-grid,
    .ivs-afl-who-grid,
    .ivs-afl-apply-grid { grid-template-columns: 1fr; }
    .ivs-afl-postcard { max-width: 560px; }
    .ivs-afl-apply-intro { position: static; }
}
@media (max-width: 720px) {
    .ivs-afl-line { grid-template-columns: 1fr; gap: 1.6rem; padding-left: 2.6rem; }
    .ivs-afl-line::before { left: 15px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
    .ivs-afl-stop { padding-top: 0; }
    .ivs-afl-stop-n { left: -2.6rem; top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ivs-afd-door img { transition: none; }
}