/* ═══════════════════════════════════════════════════════════════════════════
   ivs-partner-band: homepage partner band ("A1 Ink & gold", Oct 2026) plus
   the two pieces it shares with partner-with-us.html.
   ─────────────────────────────────────────────────────────────────────────
   .ivs-pband      homepage band (partials/partner-band.blade.php)
   .ivs-pseal      round "25 years" seal; sits inside a positioned photo box
   .ivs-padv-icon  the six advantage line icons (partials/partner-advantage-icon)

   Every rule is scoped to one of those three roots. Tokens come with
   fallbacks because --v5-* is not guaranteed on every layout. Ink band
   pattern = .tv5-facts (rule-wajib/komponen.md "Band gelap"). Spacing is
   kept tight on purpose (client: not a lot of white space).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Seal: a gold ribbon hanging from the photo's top edge, swallowtail
   cut at the bottom. The fill and the fine inner rule are pseudo layers so
   the drop shadow (filter) is not clipped by the notch. Shared. ── */
.ivs-pseal {
    position: absolute;
    top: 0;
    right: 18px;
    z-index: 2;
    width: 64px;
    height: 96px;
    padding-top: 16px;
    color: var(--v5-ink, #201f1d);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
    pointer-events: none;
}
.ivs-pseal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(250, 249, 246, .22) 0%, rgba(250, 249, 246, 0) 45%, rgba(32, 31, 29, .16) 100%), var(--v5-gold, #b9995b);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}
.ivs-pseal::after {
    content: "";
    position: absolute;
    top: 0;
    left: 5px;
    right: 5px;
    height: 72%;
    z-index: -1;
    border: 1px solid rgba(32, 31, 29, .32);
    border-top: 0;
}
.ivs-pseal b {
    display: block;
    font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
}
.ivs-pseal span {
    display: block;
    margin-top: 5px;
    font-family: var(--v5-font-label, 'Inter', system-ui, sans-serif);
    font-size: .54rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* ── Advantage icon: size only, colour comes from the host. ── */
.ivs-padv-icon {
    display: block;
    width: 30px;
    height: 30px;
    flex: none;
    overflow: visible;
}

/* ════════════════════════════ Homepage band ════════════════════════════ */
.ivs-pband {
    position: relative;
    overflow: hidden;
    background: var(--v5-ink, #201f1d);
    color: var(--v5-ivory, #faf9f6);
    font-family: var(--v5-font-body, 'Lora', Georgia, serif);
    padding: 64px 0;
    border-top: 1px solid #14130f;
    border-bottom: 1px solid #14130f;
    box-shadow: inset 0 10px 18px -12px rgba(0, 0, 0, .6), inset 0 -10px 18px -12px rgba(0, 0, 0, .6);
}
.ivs-pband :where(h2, h3, p, ul, li, figure, figcaption) { margin: 0; padding: 0; }
.ivs-pband :where(ul) { list-style: none; }

/* Wide V5 container (rule-wajib komponen.md), wider than the 1230px site shell. */
.ivs-pband-wrap {
    position: relative;
    width: min(1560px, calc(100% - 4rem));
    margin-inline: auto;
}
.ivs-pband-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: center;
}

/* Text column */
.ivs-pband-eyebrow,
.ivs-pband-kicker {
    font-family: var(--v5-font-label, 'Inter', system-ui, sans-serif);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--v5-gold, #b9995b);
}
.ivs-pband-title {
    margin-top: 14px;
    font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-size: clamp(2rem, 3.4vw, 3.1rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.005em;
    color: var(--v5-ivory, #faf9f6);
    text-wrap: balance;
}
.ivs-pband-deck {
    margin-top: 16px;
    max-width: 46ch;
    font-size: 1.08rem;
    font-style: italic;
    line-height: 1.65;
    color: rgba(242, 239, 232, .82);
}
.ivs-pband-doors {
    margin-top: 28px;
    border-top: 1px solid rgba(185, 153, 91, .45);
}
.ivs-pband-door {
    display: grid;
    gap: 8px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(185, 153, 91, .45);
}
.ivs-pband-door .ivs-pband-kicker { color: var(--v5-gold, #b9995b); letter-spacing: .2em; }
.ivs-pband-door-title {
    font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--v5-ivory, #faf9f6);
}
.ivs-pband-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

/* Buttons: the global component (css/components/ivs-buttons.css: --primary,
   --ghost, --sheen); this file only sets size and the house voice (tombol.md). */
.ivs-pband .ivs-pband-btn {
    justify-content: center;
    min-height: 46px;
    padding: .9rem 1.4rem;
    font-size: .74rem;
    letter-spacing: .16em;
    text-align: center;
}
.ivs-pband .ivs-pband-btn:focus-visible { outline: 2px solid var(--v5-gold, #b9995b); outline-offset: 3px; }

/* Media column: tall road photo with a gold inner hairline. */
.ivs-pband-media { position: relative; min-width: 0; }
.ivs-pband-photo {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 600px;
    background: var(--v5-olive-900, #33421f);
}
.ivs-pband-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ivs-pband-photo::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(185, 153, 91, .55);
    pointer-events: none;
}
.ivs-pband-cap {
    position: absolute;
    right: 24px;
    bottom: 22px;
    z-index: 1;
    font-size: .74rem;
    font-style: italic;
    line-height: 1.3;
    color: rgba(250, 249, 246, .9);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

/* Calling card: ivory, overlapping the photo's bottom-left corner. */
.ivs-pband-card {
    position: absolute;
    left: -40px;
    bottom: -34px;
    z-index: 2;
    width: min(330px, 72%);
    padding: 14px;
    background: var(--v5-ivory, #faf9f6);
    color: var(--v5-ink, #201f1d);
    box-shadow: 0 26px 40px -24px rgba(0, 0, 0, .7);
}
.ivs-pband-card-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--v5-olive-900, #33421f);
}
.ivs-pband-card-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ivs-pband-card-photo .ivs-pseal { right: 12px; width: 54px; height: 80px; padding-top: 13px; }
.ivs-pband-card-photo .ivs-pseal b { font-size: 1.45rem; }
.ivs-pband-card-photo .ivs-pseal span { font-size: .5rem; }
.ivs-pband-card-in {
    margin-top: 12px;
    padding: 12px 6px 2px;
    border-top: 1px solid var(--v5-gold, #b9995b);
}
.ivs-pband-card-brand {
    font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-size: 1.3rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.15;
    color: var(--v5-ink, #201f1d);
}
.ivs-pband-card-sub {
    margin-top: 6px;
    font-family: var(--v5-font-label, 'Inter', system-ui, sans-serif);
    font-size: .64rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--v5-olive-700, #4a5e2f);
}
.ivs-pband-card-text {
    margin-top: 8px;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--v5-stone, #5b574d);
}
.ivs-pband .ivs-pband-card-link {
    display: inline-block;
    margin-top: 8px;
    font-size: .9rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.4;
    color: var(--v5-olive-700, #4a5e2f);
    text-decoration: underline;
    text-decoration-color: rgba(74, 94, 47, .35);
    text-underline-offset: 4px;
}
.ivs-pband .ivs-pband-card-link:hover,
.ivs-pband .ivs-pband-card-link:focus-visible {
    color: var(--v5-olive-900, #33421f);
    text-decoration-color: currentColor;
}
.ivs-pband .ivs-pband-card-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 18px; }
.ivs-pband .ivs-pband-card-link--site { font-style: normal; font-size: .82rem; color: var(--v5-stone, #5b574d); }

/* The six advantages: 3 x 2 on gold hairlines, icon left of the title. */
.ivs-pband-six {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 40px;
    margin-top: 64px;
}
.ivs-pband-adv {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 0 14px;
    align-items: start;
    padding-top: 16px;
    border-top: 1px solid var(--v5-gold, #b9995b);
}
.ivs-pband-adv-icon { color: var(--v5-gold, #b9995b); line-height: 0; }
.ivs-pband-adv-title {
    font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--v5-ivory, #faf9f6);
}
.ivs-pband-adv-copy {
    margin-top: 6px;
    font-size: .93rem;
    line-height: 1.6;
    color: rgba(242, 239, 232, .72);
}

@media (max-width: 900px) {
    .ivs-pband-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .ivs-pband-card { left: 16px; }
    /* Stacked: a landscape photo keeps the band short (the client dislikes long empty runs). */
    .ivs-pband-photo { aspect-ratio: 16 / 10; max-height: 520px; }
    .ivs-pband-six { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; }
}

@media (max-width: 560px) {
    .ivs-pband { padding: 44px 0; }
    .ivs-pband-wrap { width: calc(100% - 2rem); }
    .ivs-pband-photo { aspect-ratio: 3 / 2; max-height: 260px; }
    .ivs-pband-card {
        position: relative;
        left: auto;
        bottom: auto;
        width: auto;
        margin: -40px 14px 0;
    }
    .ivs-pband-acts .ivs-pband-btn { flex: 1 1 100%; }
    .ivs-pband-six { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 36px; }
}