/* ═══════════════════════════════════════════════════════════════════════════
   partner-with-us.html: Travel Agent & Affiliate Center (Jesse's structure,
   V5 "La Villa" dress, 17 Oct 2026). Loaded only by
   affiliate/partner-with-us.blade.php, after pages/partner-signup-v5.css.
   ─────────────────────────────────────────────────────────────────────────
   The hero, doors sheet, sticky sub-nav, parchment + toile band, ledger rows
   and the closing concierge band are the shared .ivs-ps-* components of the
   travel-agent / affiliate pages. This file holds only what is specific to
   this page: the "why" photo cards + cells and the call-to-action band after
   them (27 Oct 2026), the DMC tiles + the Two Ways sheet, the
   resources photo band with glass tiles, the portal screenshot + checklist.
   Tokens from ivs-tokens.css (fallbacks kept, rule-wajib gotcha-teknis.md),
   buttons from ivs-buttons.css. Root: <main class="ivs-ps ivs-pjm">.
   Every rule here is prefixed .ivs-pjm-.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Root (the sibling pages take these from ivs-auth-v5.css, not loaded here) ── */
.ivs-pjm {
    background: var(--v5-ivory, #faf9f6);
    color: var(--v5-ink, #201f1d);
    font-family: var(--v5-font-body, 'Lora', Georgia, serif);
    overflow-x: clip;
}
.ivs-pjm a:not(.ivs-btn) { color: inherit; }
.ivs-pjm a { text-decoration: none; }
.ivs-pjm-center { text-align: center; }
.ivs-pjm-center .ivs-ps-h2,
.ivs-pjm-center .ivs-ps-deck { margin-inline: auto; }
/* height: the shared sheet's `.ivs-ps img { height: auto }` outranks
   .ivs-ps-hero-media, so below ~1100px the 3:2 photo stopped short of the
   hero's bottom edge. Pinned here at higher specificity. */
.ivs-pjm .ivs-ps-hero-media { height: 100%; object-position: center 62%; }
/* Jesse's long title: wider measure than the sibling heroes. */
.ivs-pjm .ivs-ps-h1 { max-width: 18ch; }
/* "Become a Travel Partner" under "New to IVS?" (one H2, Jesse's wording). */
.ivs-pjm-door-sub {
    display: block;
    margin-top: .2rem;
    font-size: 1.05rem;
    color: var(--v5-olive-700, #4a5e2f);
}

/* ── 2. Why partner: three featured photo cards (Jesse, 27 Oct 2026), then the
   other four reasons as hairline cells. Cards keep the page's square corners;
   the icon disc is the doors-sheet disc, sitting on the photo's lower edge. ── */
.ivs-pjm-feats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 2.2rem;
    text-align: left;
}
.ivs-pjm-feat {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--v5-line, #e4e0d5);
}
.ivs-pjm-feat-ph {
    margin: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--v5-parchment, #f2efe8);
}
.ivs-pjm .ivs-pjm-feat-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ivs-pjm-feat-body {
    position: relative;
    flex: 1;
    padding: 2.5rem clamp(1.2rem, 1.8vw, 1.8rem) clamp(1.4rem, 2vw, 1.9rem);
}
.ivs-pjm-feat-ico {
    position: absolute;
    top: -28px;
    left: clamp(1.2rem, 1.8vw, 1.8rem);
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--v5-olive-700, #4a5e2f);
    color: var(--v5-ivory, #faf9f6);
    /* white ring so the disc reads where it crosses the photo */
    box-shadow: 0 0 0 4px #fff;
}
.ivs-pjm-feat-ico .ivs-padv-icon { width: 26px; height: 26px; }
.ivs-pjm-feat .ivs-ps-h3 { font-size: 1.4rem; line-height: 1.25; }
.ivs-pjm-feat p {
    margin-top: .55rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--v5-stone, #5b574d);
}

.ivs-pjm-cells {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1.2rem;
    border-top: 1px solid var(--v5-line, #e4e0d5);
    border-left: 1px solid var(--v5-line, #e4e0d5);
    text-align: left;
}
.ivs-pjm-cell {
    min-width: 0;
    padding: clamp(1.2rem, 1.6vw, 1.7rem) clamp(.9rem, 1.3vw, 1.3rem);
    border-right: 1px solid var(--v5-line, #e4e0d5);
    border-bottom: 1px solid var(--v5-line, #e4e0d5);
}
.ivs-pjm-cell .ivs-padv-icon { margin-bottom: .9rem; color: var(--v5-olive-700, #4a5e2f); }
/* Narrow columns: one step below the page H3 so the long titles hold. */
.ivs-pjm-cell .ivs-ps-h3 { font-size: 1.15rem; }
.ivs-pjm-cell p {
    margin-top: .4rem;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--v5-stone, #5b574d);
}

/* ── 2b. Call to action: Positano at dusk, words on the dark sea side ── */
.ivs-pjm-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 6.5rem) 0;
    background: #14130f;
    color: var(--v5-ivory, #faf9f6);
}
.ivs-pjm .ivs-pjm-cta-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 55%;
}
.ivs-pjm-cta-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(20, 19, 15, .78) 0%, rgba(20, 19, 15, .5) 42%, rgba(20, 19, 15, .08) 78%);
    pointer-events: none;
}
.ivs-pjm-cta-inner { position: relative; z-index: 1; }
.ivs-pjm-cta .ivs-ps-h2 {
    max-width: 21ch;
    color: var(--v5-ivory, #faf9f6);
}
.ivs-pjm-cta-line {
    display: block;
    margin-top: .35rem;
    font-style: italic;
    color: rgba(250, 249, 246, .86);
}
.ivs-pjm-cta .ivs-btn { margin-top: 1.9rem; }
/* Parallax (bos, 27 Oct 2026): the photo holds still while the page slides over it,
   the same idea as the featured-tours sign-off (.ivs-ftcta), pure CSS so nothing runs
   on scroll. Done on the <img> instead of background-attachment so srcset and alt
   stay: the band clips, the photo is fixed to the viewport. Off on touch screens,
   at 991px and below and with reduced motion, exactly like .ivs-ftcta. */
@media (hover: hover) and (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .ivs-pjm-cta { clip-path: inset(0); }
    .ivs-pjm .ivs-pjm-cta-img {
        position: fixed;
        inset: 0;
        height: 100vh;
    }
}

/* ── 3. Established DMC + the Two Ways sheet ── */
.ivs-pjm-dmc {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
.ivs-pjm-dmc > * { min-width: 0; }
/* Two-class selector: the shared .ivs-ps-deck reset otherwise glues the deck to
   the (now two-line) "Your Italy Experts" title. */
.ivs-pjm-dmc .ivs-pjm-dmc-deck { margin-top: 1.1rem; }
.ivs-pjm-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 1.8rem;
}
.ivs-pjm-tiles > li { min-width: 0; }
.ivs-pjm-tile {
    padding: 6px 6px 0;
    background: #fff;
    box-shadow: 0 14px 30px -18px rgba(32, 31, 29, .5);
}
.ivs-pjm-tile img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.ivs-pjm-tile figcaption {
    padding: .7rem .4rem .8rem;
    font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-style: italic;
    font-size: .95rem;
    line-height: 1.35;
    text-align: center;
    color: var(--v5-ink, #201f1d);
}
.ivs-pjm-ways {
    position: sticky;
    top: calc(var(--ivs-subnav-offset, 194px) + .5rem);
    padding: clamp(1.4rem, 2.4vw, 2.2rem);
    background: var(--v5-ivory, #faf9f6);
    border-top: 3px solid var(--v5-olive-700, #4a5e2f);
    box-shadow: 0 24px 60px -30px rgba(32, 31, 29, .4);
}
.ivs-pjm-ways .ivs-ps-h2 { font-size: 1.55rem; }
.ivs-pjm-ways .ivs-ps-ledger { margin-top: 1.2rem; }
.ivs-pjm-ways .ivs-ps-ledger-row .ivs-ps-tert { margin-top: .7rem; }

/* ── 4. Resources: glass tiles over the Tuscan farmhouse ── */
.ivs-pjm-res {
    position: relative;
    overflow: hidden;
    background: #14130f;
    color: var(--v5-ivory, #faf9f6);
}
/* Two classes: the shared `.ivs-ps img { height: auto }` reset outranked a single
   class, so the photo kept its natural height and only its sky showed (27 Oct 2026).
   38% keeps the farmhouse and its cypress row in the band. */
.ivs-pjm .ivs-pjm-res-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
}
.ivs-pjm-res-scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 80% at 50% 60%, rgba(0, 0, 0, .55), transparent 75%),
        linear-gradient(to bottom, rgba(20, 19, 15, .55), rgba(20, 19, 15, .35) 40%, rgba(20, 19, 15, .8));
    pointer-events: none;
}
.ivs-pjm-res-inner { position: relative; z-index: 1; }
.ivs-pjm-res .ivs-ps-h2 { color: var(--v5-ivory, #faf9f6); }
.ivs-pjm-res-deck {
    margin-top: .8rem;
    max-width: 52ch;
    color: rgba(250, 249, 246, .85);
}
.ivs-pjm-rtiles {
    /* flex, not grid: a short last row (7 tiles in 4 or 2 columns) stays centred */
    --pjm-cols: 7;
    --pjm-gap: .9rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pjm-gap);
    margin-top: 2.2rem;
}
.ivs-pjm-rtiles > li {
    flex: 0 0 calc((100% - (var(--pjm-cols) - 1) * var(--pjm-gap)) / var(--pjm-cols));
    min-width: 0;
}
.ivs-pjm-rtile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    height: 100%;
    padding: 1.3rem .7rem;
    text-align: center;
    font-family: var(--v5-font-label, 'Inter', ui-sans-serif, system-ui, sans-serif);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .04em;
    color: var(--v5-ivory, #faf9f6);
    background: rgba(32, 31, 29, .42);
    border: 1px solid rgba(242, 239, 232, .28);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.ivs-pjm-rtile .ivs-padv-icon { color: var(--v5-gold, #b9995b); transition: color .3s ease; }
.ivs-pjm-rtile:hover,
.ivs-pjm-rtile:focus-visible {
    background: rgba(242, 239, 232, .95);
    border-color: var(--v5-ivory, #faf9f6);
    color: var(--v5-ink, #201f1d);
}
.ivs-pjm-rtile:hover .ivs-padv-icon,
.ivs-pjm-rtile:focus-visible .ivs-padv-icon { color: var(--v5-olive-700, #4a5e2f); }
.ivs-pjm-rtile:focus-visible { outline: 2px solid var(--v5-ivory, #faf9f6); outline-offset: 3px; }

/* ── 5. The portal: screenshot + checklist ledger ── */
.ivs-pjm-portal {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
.ivs-pjm-portal > * { min-width: 0; }
.ivs-pjm-shot {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--v5-parchment, #f2efe8);
    border: 1px solid var(--v5-line, #e4e0d5);
    box-shadow: 0 30px 70px -30px rgba(32, 31, 29, .55);
}
.ivs-pjm-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}
.ivs-pjm-shot-ph {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}
.ivs-pjm-shot img[hidden],
.ivs-pjm-shot-ph[hidden] { display: none; }
.ivs-pjm-shot-ph span {
    font-family: var(--v5-font-label, 'Inter', ui-sans-serif, system-ui, sans-serif);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--v5-stone, #5b574d);
}
.ivs-pjm-portal-deck { margin-top: 1rem; }
.ivs-pjm-checks { margin-top: 1.4rem; }
.ivs-pjm-checks .ivs-ps-ledger-row {
    grid-template-columns: 22px 1fr;
    align-items: center;
    padding: .85rem 0;
}
.ivs-pjm-checks .ivs-ps-ledger-row .ivs-padv-icon { width: 22px; height: 22px; margin-top: 0; }
.ivs-pjm-checks .ivs-ps-ledger-row span { font-size: 1rem; line-height: 1.5; color: var(--v5-ink, #201f1d); }
.ivs-pjm-actions { margin-top: 1.5rem; }

/* ── Closing band: the title is a paragraph (Jesse's heading outline untouched) ── */
.ivs-pjm-close-title { color: var(--v5-ivory, #faf9f6); }
.ivs-pjm-close-link { margin-top: 1.1rem; color: var(--v5-olive-300, #a9b58f); }
.ivs-pjm-close-link:hover { color: var(--v5-ivory, #faf9f6); }

/* ── Breakpoints ── */
@media (max-width: 1200px) {
    .ivs-pjm-rtiles { --pjm-cols: 4; }
}
@media (max-width: 900px) {
    .ivs-pjm-feats { grid-template-columns: 1fr; }
    .ivs-pjm-feat-ph { aspect-ratio: 16 / 9; }
    .ivs-pjm-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* stacked: the words sit over the whole photo, so the wash covers it evenly */
    .ivs-pjm-cta-scrim { background: rgba(20, 19, 15, .58); }
    .ivs-pjm-dmc,
    .ivs-pjm-portal { grid-template-columns: 1fr; }
    .ivs-pjm-ways { position: static; }
    .ivs-pjm-tiles { gap: .7rem; }
    .ivs-pjm-shot { max-width: 640px; margin-inline: auto; }
}
@media (max-width: 760px) {
    .ivs-pjm-rtiles { --pjm-cols: 2; --pjm-gap: .7rem; }
}
@media (max-width: 560px) {
    .ivs-pjm-cells { grid-template-columns: 1fr; }
    .ivs-pjm-tiles { grid-template-columns: 1fr 1fr; }
    .ivs-pjm-tile figcaption { font-size: .85rem; }
    .ivs-pjm-rtile { padding: 1.1rem .5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ivs-pjm-rtile,
    .ivs-pjm-rtile .ivs-padv-icon { transition: none; }
}

/* Hero photo here is bright sea and sky under the eyebrow: a second wash over
   the text block so the amber label reads (the shared scrim is bottom-heavy). */
.ivs-pjm .ivs-ps-hero-scrim {
    background:
        radial-gradient(ellipse 58% 62% at 14% 58%, rgba(0, 0, 0, .55), transparent 72%),
        linear-gradient(to right, rgba(0, 0, 0, .42), rgba(0, 0, 0, .18) 45%, transparent 70%),
        radial-gradient(ellipse 85% 70% at 15% 100%, rgba(0, 0, 0, .5), transparent 68%),
        linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .8) 100%);
}