/* ==========================================================================
   Landing page mitra: /wholesale, /affiliate, /collaborate
   Isi diatur dari CMS (Landing Page); markup di application/modules/web/views/info/.

   Arah desain: halaman informasi yang lugas untuk calon mitra The Bath Box. Sedikit bagian, tiap bagian
   berbentuk sesuai isinya (prosa, tabel, daftar, langkah), tanpa label kecil, ikon, kartu, atau angka hias.
   - Warna: tinta cokelat #3A291A + kertas hangat #F3F1EE (identitas web TBB), satu aksen tanah liat.
   - Huruf: Ogg hanya untuk judul besar dan angka tier; Euclid Circular B untuk semua yang lain.
   - Gerak: hanya hover dan fokus.
   ========================================================================== */

@font-face {
    font-family: "Ogg";
    src: url("../web/assets/fonts/ogg/Ogg-Regular.otf") format("opentype");
    font-weight: 400;
    font-display: swap;
}

.lp {
    --lp-ink: #3a291a;
    --lp-paper: #f3f1ee;
    --lp-cream: #faf9f2;
    --lp-muted: #5e5046;
    --lp-line: rgba(58, 41, 26, 0.2);
    --lp-accent: #9a4f32;          /* 5.2:1 di atas kertas; untuk angka dan penanda kecil saja */
    --lp-accent-soft: #e3b48f;     /* aksen di atas tinta (7:1) */
    --lp-on-ink: #f3f1ee;
    --lp-on-ink-muted: rgba(243, 241, 238, 0.8);
    --lp-display: "Ogg", Georgia, "Times New Roman", serif;
    --lp-pad: clamp(20px, 7vw, 92px);

    background: var(--lp-paper);
    color: var(--lp-ink);
    font-family: "Euclid Circular B", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    overflow-x: hidden;
}

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp img { max-width: 100%; }

.lp-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--lp-pad); }

/* ---------- Bagian ---------- */
.lp-sec { padding: clamp(52px, 7vw, 100px) 0; }
.lp-sec--cream { background: var(--lp-cream); }
.lp-sec--ink { background: var(--lp-ink); color: var(--lp-on-ink); }
.lp-sec--rule { border-top: 1px solid var(--lp-line); }

/* ---------- Teks ---------- */
.lp-h1, .lp-h2 { font-family: var(--lp-display); font-weight: 400; margin: 0; color: inherit; }
.lp-h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 1.04; letter-spacing: -0.01em; }
.lp-h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.12; margin-bottom: 22px; }
.lp-h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.35; margin: 0 0 6px; }

.lp-lead { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.55; margin: 22px 0 0; max-width: 32em; }
.lp-p { margin: 0 0 1.1em; color: var(--lp-muted); max-width: 38em; }
.lp-p:last-child { margin-bottom: 0; }
.lp-p strong { color: var(--lp-ink); font-weight: 600; }
.lp-intro-body .lp-p:first-child { font-size: 1.2rem; color: var(--lp-ink); }
.lp-sec--ink .lp-p { color: var(--lp-on-ink-muted); }
.lp-note { margin: 18px 0 0; font-size: 0.95rem; color: var(--lp-muted); }
.lp-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Tombol ---------- */
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 34px; }
.lp-btn {
    display: inline-block;
    padding: 15px 28px;
    border: 1px solid var(--lp-ink);
    border-radius: 2px;
    background: var(--lp-ink);
    color: var(--lp-paper);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
.lp-btn:hover { background: transparent; color: var(--lp-ink); }
.lp-btn--sm { margin-top: 14px; padding: 11px 20px; font-size: 0.95rem; }
.lp-sec[id] { scroll-margin-top: 24px; }
.lp-btn--light { background: var(--lp-paper); border-color: var(--lp-paper); color: var(--lp-ink); }
.lp-btn--light:hover { background: transparent; color: var(--lp-paper); }
.lp .lp-textlink, .lp .lp-note a, .lp .lp-cta-note a { color: inherit; }
.lp a:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; }
.lp-sec--ink a:focus-visible, .lp-hero--ink a:focus-visible { outline-color: var(--lp-accent-soft); }

/* ---------- Gambar ---------- */
.lp-fig { margin: 0; background: #e4dfd6; overflow: hidden; }
.lp-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-fig--portrait { aspect-ratio: 4 / 5; }
.lp-fig--land { aspect-ratio: 4 / 3; }

/* ---------- Hero ---------- */
.lp-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 7vw, 100px); }
.lp-hero--ink { background: var(--lp-ink); color: var(--lp-on-ink); }
.lp-hero--ink .lp-lead { color: var(--lp-on-ink-muted); }
.lp-hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 88px); align-items: end; }
.lp-hero-grid--flip { grid-template-columns: 5fr 7fr; }
.lp-hero-grid--wide { grid-template-columns: 1fr 1fr; align-items: center; }
.lp-hero-grid--flip .lp-hero-text { order: 2; }

/* ---------- Tata letak ---------- */
.lp-intro { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 6vw, 88px); align-items: start; }
.lp-intro .lp-h2 { margin-bottom: 0; }
.lp-intro > div > .lp-h2 { margin-bottom: 22px; }
.lp-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.lp-head { max-width: 40em; margin-bottom: clamp(24px, 3.5vw, 44px); }
.lp-head .lp-h2 { margin-bottom: 0; }
.lp-statement { max-width: 880px; }
.lp-statement .lp-h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.1; }

/* ---------- Baris bergaris (judul kiri, uraian kanan) ---------- */
.lp-rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--lp-line); }
.lp-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4px 32px; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--lp-line); }
.lp-row p { margin: 0; color: var(--lp-muted); }
.lp-row .lp-h3 { margin: 0; font-size: 1.2rem; }
.lp-inline { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 0.95rem; color: var(--lp-ink); }
.lp-inline li + li::before { content: "/"; margin: 0 10px; color: var(--lp-accent); }

/* ---------- Fakta berdampingan (kolom bergaris atas) ---------- */
.lp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.lp-fact { padding: 20px 0 8px; border-top: 1px solid var(--lp-ink); }
.lp-fact p { margin: 0; color: var(--lp-muted); }

/* ---------- Marketplace: logo kiri, uraian kanan ---------- */
.lp-mk { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px 40px; align-items: center; padding: 24px 0; border-top: 1px solid var(--lp-line); }
.lp-mk--nologo { grid-template-columns: 1fr; }
.lp-mk-logo { height: 40px; display: flex; align-items: center; }
.lp-mk-logo img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left center; background: none; border: 0; box-shadow: none; mix-blend-mode: multiply; /* latar putih pada logo JPG melebur ke halaman */ }
.lp-mk p { margin: 0; color: var(--lp-muted); }

/* ---------- Daftar centang (tanpa ikon font) ---------- */
.lp-checks { list-style: none; margin: 0; padding: 0; }
.lp-checks li { position: relative; padding: 10px 0 10px 32px; border-top: 1px solid var(--lp-line); }
.lp-checks li:last-child { border-bottom: 1px solid var(--lp-line); }
.lp-checks li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 17px;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--lp-accent);
    border-bottom: 2px solid var(--lp-accent);
    transform: rotate(-45deg);
}
.lp-plain { list-style: none; margin: 0; padding: 0; }
.lp-plain li { padding: 10px 0; border-top: 1px solid var(--lp-line); }
.lp-plain li:last-child { border-bottom: 1px solid var(--lp-line); }

/* ---------- Langkah: daftar bernomor biasa ---------- */
.lp-steps { list-style: none; margin: 0; padding: 0; counter-reset: lp-step; }
.lp-step { position: relative; counter-increment: lp-step; padding: 16px 0 16px 44px; border-top: 1px solid var(--lp-line); }
.lp-step:last-child { border-bottom: 1px solid var(--lp-line); }
.lp-step::before { content: counter(lp-step) "."; position: absolute; left: 0; top: 16px; font-weight: 600; color: var(--lp-accent); }
.lp-step-title { display: block; font-weight: 600; }
.lp-step-text { display: block; color: var(--lp-muted); }

/* ---------- Galeri kolaborator: logo (utuh) atau foto (penuh) ---------- */
.lp-partners { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 24px; }
.lp-partner a { display: block; color: inherit; text-decoration: none; }
.lp-partner-img { display: block; aspect-ratio: 4 / 3; background: var(--lp-cream); border: 1px solid var(--lp-line); overflow: hidden; }
.lp-partner-img img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.lp-partners--photo .lp-partner-img { border: 0; background: #e4dfd6; }
.lp-partners--photo .lp-partner-img img { object-fit: cover; padding: 0; }
.lp-partner-name { display: block; margin-top: 10px; font-weight: 500; }
.lp-partner a:hover .lp-partner-name { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Tangkapan layar aplikasi (utuh, tidak dipotong) ---------- */
.lp-shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 28px 24px; align-items: start; }
.lp-shots img { display: block; width: 100%; height: auto; border: 1px solid var(--lp-line); background: var(--lp-cream); }
.lp-shots figcaption { margin-top: 8px; font-size: 0.95rem; color: var(--lp-muted); }
.lp-shots figure { margin: 0; }
.lp-hero-grid--solo { grid-template-columns: minmax(0, 46em); }

/* ---------- Ajakan akhir ---------- */
.lp-cta-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 6vw, 88px); align-items: end; }
.lp-cta .lp-h2 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.06; margin-bottom: 0; }
.lp-cta .lp-actions { margin-top: 22px; }
.lp-cta-note { margin: 18px 0 0; font-size: 0.95rem; color: var(--lp-on-ink-muted); }

/* ---------- Tablet dan ponsel ---------- */
@media (max-width: 991.98px) {
    .lp-hero-grid, .lp-hero-grid--flip, .lp-hero-grid--wide, .lp-intro, .lp-two, .lp-cta-grid { grid-template-columns: 1fr; }
    .lp-hero-grid--flip .lp-hero-text { order: 0; }
    .lp-hero .lp-fig--portrait { aspect-ratio: 4 / 3; }
}

@media (max-width: 575.98px) {
    .lp { font-size: 1rem; }
    .lp-mk { grid-template-columns: 1fr; gap: 10px; }
    .lp-mk-logo { height: 36px; }
    .lp-row { grid-template-columns: 1fr; }
    .lp-actions { gap: 16px 22px; }
    .lp-btn { padding: 15px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-btn { transition: none; }
}