/* ==========================================================================
   Tema MODERN — panel membulat, kartu bergambar, pasangan huruf yang bisa dipilih.
   Warna tetap Tasawuf Indonesia: hijau toska, emas, merah (aksen kecil).
   File ini hanya menimpa gaya dari style.css; hapus/ganti tema di
   Admin → Pengaturan → Tampilan website untuk kembali ke desain Klasik.
   ========================================================================== */

.theme-modern {
    --paper: #EEF1EE;
    --paper-2: #F6F7F4;
    --line: #E2E6E1;
    --line-2: #CFD6D0;
    --ink: #172120;
    --ink-2: #3E4A48;
    --ink-3: #64706D;
    --gold-hl: #EBD9A6;
    --gold-hl-2: #F4E8C6;
    --panel-r: 30px;
    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 26px;
    --gut: clamp(8px, 1.4vw, 18px);
    --shadow: 0 1px 2px rgba(23, 33, 32, .04), 0 18px 40px -28px rgba(23, 33, 32, .28);
    --shadow-lg: 0 2px 4px rgba(23, 33, 32, .05), 0 30px 60px -30px rgba(23, 33, 32, .35);
    background: var(--paper);
}

/* ----------------------------------------------------------------- Huruf
   Tiga peran (paling banyak 3 jenis huruf), dipilih di Admin → Pengaturan → Pasangan huruf:
   --font-serif = judul besar H1–H2, angka & kutipan · --font-sans = subjudul H3–H6, menu, tombol, label
   --font-text  = paragraf & kalimat pengantar
   --display-scale membesarkan huruf judul yang ukuran matanya kecil (mis. Cormorant). */
.theme-modern {
    --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-sans: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-text: "Lora", Georgia, "Times New Roman", serif;
    --display-weight: 600; --display-ls: -.012em; --display-scale: 1.12;
    --head-weight: 500; --head-ls: 0;
}
html[data-font="kontemporer"] .theme-modern {
    --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
    --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --display-weight: 400; --display-ls: -.015em; --display-scale: 1.14;
    --head-weight: 600; --head-ls: -.01em;
}
html[data-font="tegas"] .theme-modern {
    --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
    --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-text: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --display-weight: 400; --display-ls: -.01em; --display-scale: 1;
    --head-weight: 600; --head-ls: -.01em;
}

/* :where() membuat aturan judul ini lemah: judul komponen yang punya kelas sendiri
   (judul kotak panel, kaki halaman, ringkasan, keranjang) tetap memakai ukuran & hurufnya sendiri. */
/* H1–H2: judul besar */
:where(.theme-modern) :is(h1, h2) { font-family: var(--font-serif); font-weight: var(--display-weight); letter-spacing: var(--display-ls); line-height: 1.1; }
:where(.theme-modern) h1 { font-size: calc(clamp(2.1rem, 4.6vw, 3.6rem) * var(--display-scale)); }
:where(.theme-modern) h2 { font-size: calc(clamp(1.75rem, 3.4vw, 2.6rem) * var(--display-scale)); }
.theme-modern h1 .accent, .theme-modern h2 .accent { font-style: italic; }
/* H3–H6: subjudul (huruf tanpa kait, sama dengan menu & tombol) */
:where(.theme-modern) :is(h3, h4, h5, h6),
.theme-modern .faq summary { font-family: var(--font-sans); font-weight: var(--head-weight); letter-spacing: var(--head-ls); line-height: 1.3; }
:where(.theme-modern) h3 { font-size: 1.3rem; }
:where(.theme-modern) h4 { font-size: 1.12rem; }
:where(.theme-modern) :is(h5, h6) { font-size: 1rem; }
/* Judul komponen kecil berhuruf sans meski berupa h2 */
.theme-modern :is(.cart-title, .summary h2) { font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--head-ls); }
/* Paragraf */
.theme-modern .lead { color: var(--ink-3); font-size: 1.12rem; line-height: 1.75; }
.theme-modern .article-body blockquote { font-family: var(--font-text); font-style: italic; }
/* Paragraf yang berfungsi sebagai label / tautan memakai huruf menu */
.theme-modern :is(.teacher-role, .companion-role, .section-more, .mp-links, .svc-hero-badge, .buy-label, .summary-note, .hero-note, .article-meta) { font-family: var(--font-sans); }
.theme-modern .accent { color: var(--teal-600); }

/* ------------------------------------------------------------ Pil label */
.pill, .theme-modern .eyebrow {
    display: inline-flex; align-items: center; gap: 8px; width: auto;
    padding: 7px 14px 7px 10px; margin-bottom: 18px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line); color: var(--teal-700);
    font-family: var(--font-sans); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.pill .icon { width: 1.05em; height: 1.05em; color: var(--teal-600); }
.theme-modern .eyebrow::before { content: ""; width: 8px !important; height: 8px; border-radius: 50%; background: var(--gold-500); opacity: 1; }
.theme-modern .is-center > .eyebrow::after, .theme-modern .is-center .eyebrow::after, .theme-modern .hero .eyebrow::after { display: none; }

/* --------------------------------------------------------------- Tombol */
.theme-modern .btn { border-radius: 999px; font-weight: 600; letter-spacing: 0; }
.theme-modern .btn-primary { background: var(--teal-700); box-shadow: none; }
.theme-modern .btn-primary:hover { background: var(--teal-900); }
.theme-modern .btn-light { background: #fff; border-color: var(--line); }
.theme-modern .btn-light:hover { border-color: var(--teal-600); background: #fff; }
.theme-modern .btn-outline { background: #fff; border-color: var(--line-2); color: var(--ink); }
.theme-modern .btn-outline:hover { background: #fff; border-color: var(--teal-700); color: var(--teal-800); }
.theme-modern .btn-gold { background: var(--gold-hl); color: var(--teal-900); box-shadow: none; }
.theme-modern .btn-gold:hover { background: #E2CB8B; color: var(--teal-900); }
.theme-modern .btn-outline-light { background: #fff; border-color: var(--line-2); color: var(--ink); }
.theme-modern .btn-outline-light:hover { border-color: var(--teal-700); color: var(--teal-800); background: #fff; }
.theme-modern .btn .icon { width: 1.1em; height: 1.1em; }
.theme-modern .input, .theme-modern .select { border-radius: 14px; border-color: var(--line-2); }
.theme-modern .textarea { border-radius: 16px; border-color: var(--line-2); }

/* -------------------------------------------------------- Kepala situs */
.theme-modern .site-header { background: rgba(238, 241, 238, .92); border-bottom: 0; }
.theme-modern .main-nav a { color: var(--ink-2); font-weight: 500; }
.theme-modern .main-nav a::after { display: none; }
.theme-modern .main-nav a:hover, .theme-modern .main-nav a[aria-current="page"] { color: var(--teal-700); }
.theme-modern .main-nav a[aria-current="page"] { font-weight: 600; }
.theme-modern .header-actions .btn-primary { background: var(--gold-hl); color: var(--teal-900); }
.theme-modern .header-actions .btn-primary:hover { background: #E2CB8B; color: var(--teal-900); }
.theme-modern .menu-toggle { border-radius: 999px; background: var(--teal-700); }
.theme-modern .mobile-menu { background: var(--paper-2); }
.theme-modern .mobile-nav a { font-family: var(--font-sans); font-weight: 600; font-size: 1.1rem; }

/* ------------------------------------------- Panel membulat (bagian halaman) */
.theme-modern main > .section-alt,
.theme-modern main > .page-head,
.theme-modern main > .partner-hero,
.theme-modern main > .quote-band,
.theme-modern main > .mh {
    margin: 0 var(--gut) var(--gut); border-radius: var(--panel-r); overflow: hidden;
}
.theme-modern .section-alt { background: #fff; }
.theme-modern .section { padding: clamp(56px, 7vw, 100px) 0; }
.theme-modern .page-head { background: #fff; border-bottom: 0; }
.theme-modern .page-head::after { opacity: .5; }

/* Panel pembuka halaman (Rumah Tasawuf, layanan, kerja sama): terang, bukan gelap */
.theme-modern .partner-hero { background: radial-gradient(800px 420px at 90% 0%, #DCEFEC, transparent 60%), #fff; color: var(--ink); }
.theme-modern .partner-hero::before { opacity: .45; background-image: var(--pattern); }
.theme-modern .partner-hero h1 { color: var(--ink); }
.theme-modern .partner-hero .lead { color: var(--ink-3); }
.theme-modern .partner-hero .eyebrow { color: var(--teal-700); }
.theme-modern .breadcrumb-light, .theme-modern .breadcrumb-light a { color: var(--ink-3); }
.theme-modern .audience-list li { border-color: var(--line-2); color: var(--ink-2); background: #fff; }
.theme-modern .svc-hero-price span { color: var(--ink-3); }
.theme-modern .svc-hero-price strong { color: var(--teal-800); }

/* ---------------------------------------------------------------- Kartu */
.theme-modern .card, .theme-modern .svc-card, .theme-modern .path, .theme-modern .offer, .theme-modern .testimonial,
.theme-modern .contact-card, .theme-modern .audience-cards li, .theme-modern .session-steps li, .theme-modern .price-table,
.theme-modern .not-do, .theme-modern .companion, .theme-modern .rule-card, .theme-modern .fin-card, .theme-modern .info-card {
    border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.theme-modern .section-alt .card, .theme-modern .section-alt .svc-card, .theme-modern .section-alt .path,
.theme-modern .section-alt .audience-cards li, .theme-modern .section-alt .session-steps li, .theme-modern .section-alt .testimonial {
    background: var(--paper-2); box-shadow: none;
}
.theme-modern .card-book .card-media { border-radius: 16px; }
.theme-modern .card-media, .theme-modern .feature-media { border-radius: 18px; }
.theme-modern .card { overflow: hidden; }
.theme-modern .card .card-media { border-radius: 0; }
.theme-modern .feature { border: 0; box-shadow: var(--shadow); border-radius: var(--panel-r); }
.theme-modern .panel { border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.theme-modern .table-wrap { border-color: transparent; border-radius: var(--radius); box-shadow: var(--shadow); }
.theme-modern .badge-teal { background: var(--teal-700); }
.theme-modern .pillars { border: 0; gap: 18px; }
.theme-modern .pillar { background: var(--paper-2); border-radius: var(--radius-lg); border: 0 !important; }
.theme-modern .pillar-icon { background: #fff; border-color: transparent; }
.theme-modern .steps li { border-top-color: var(--line-2); }
.theme-modern .steps li::before { font-family: var(--font-sans); font-weight: 500; color: var(--teal-600); }
.theme-modern .faq { border-top-color: var(--line); }
.theme-modern .faq details { border-bottom-color: var(--line); }
.theme-modern .faq summary { font-size: 1.1rem; }
.theme-modern .testimonial-mark { color: var(--gold-hl); font-family: var(--font-serif); }
.theme-modern .testimonial blockquote { font-family: var(--font-text); font-size: 1.02rem; }
.theme-modern .teacher-photo::before { border-color: var(--line-2); }
.theme-modern .teacher-role { color: var(--teal-700); }
.theme-modern .med-note, .theme-modern .svc-note, .theme-modern .majelis-strip { border-radius: var(--radius); }
.theme-modern .quote-text { font-family: var(--font-serif); font-style: italic; font-weight: var(--display-weight); font-size: calc(clamp(1.3rem, 2.6vw, 1.75rem) * var(--display-scale)); line-height: 1.5; }

/* ------------------------------------------------------------- Ajakan */
.theme-modern .cta-box { background: var(--gold-hl-2); color: var(--ink); border-radius: var(--panel-r); }
.theme-modern .cta-box::before { opacity: .5; background-image: var(--pattern); }
.theme-modern .cta-box h2 { color: var(--ink); }
.theme-modern .cta-box p, .theme-modern .cta-number { color: var(--ink-2); }
.theme-modern .cta-number strong { color: var(--teal-800); }
.theme-modern .cta-link { color: var(--teal-700); }
.theme-modern .cta-link:hover { color: var(--teal-900); }

/* --------------------------------------------------------- Kaki situs */
.theme-modern .site-footer { background: transparent; color: var(--ink-2); padding-top: 64px; }
.theme-modern .site-footer::before { background: var(--line-2); }
.theme-modern .site-footer a { color: var(--ink-2); }
.theme-modern .site-footer a:hover { color: var(--teal-700); }
.theme-modern .brand-light img { background: transparent; padding: 0; }
.theme-modern .brand-light .brand-t1 { color: var(--teal-700); }
.theme-modern .brand-light .brand-t2 { color: var(--red-600); }
.theme-modern .footer-tagline { color: var(--teal-700); font-family: var(--font-sans); font-style: normal; font-weight: 600; }
.theme-modern .footer-title { color: var(--ink); }
.theme-modern .footer-contact .icon { color: var(--teal-600); }
.theme-modern .social a { border-color: var(--line-2); background: #fff; }
.theme-modern .footer-bottom { border-top-color: var(--line-2); color: var(--ink-3); }
.theme-modern .footer-legal { color: var(--ink-3); }

/* ==========================================================================
   Beranda modern
   ========================================================================== */

.mh { position: relative; background: radial-gradient(900px 520px at 20% 0%, #FFFFFF, transparent 70%), linear-gradient(135deg, #FFFFFF 0%, #F3F6F3 55%, #E6F0EE 100%); }
.mh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 3vw, 48px); align-items: stretch; padding: clamp(18px, 2vw, 26px); }
.mh-copy { padding: clamp(28px, 4vw, 64px) clamp(8px, 2.4vw, 40px) clamp(20px, 3vw, 40px); display: flex; flex-direction: column; align-items: flex-start; }
.mh-title { font-size: calc(clamp(2.3rem, 4.8vw, 4rem) * var(--display-scale)); line-height: 1.04; margin: 0 0 22px; color: var(--ink); text-wrap: balance; }
.mh-lead { max-width: 520px; font-size: 1.08rem; color: var(--ink-3); margin: 0 0 30px; }
.mh-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.mh-proof { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.mh-proof img { width: 46px; height: 46px; padding: 5px; border-radius: 50%; object-fit: contain; background: #fff; box-shadow: var(--shadow); }
.mh-proof span { display: flex; flex-direction: column; line-height: 1.35; font-size: .95rem; color: var(--ink-2); }
.mh-proof small { color: var(--ink-3); font-size: .82rem; }
.mh-stats { list-style: none; padding: 0; margin: auto 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; width: 100%; }
.mh-stats li { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.mh-stats strong { font-family: var(--font-serif); font-size: calc(2rem * var(--display-scale)); font-weight: var(--display-weight); font-variant-numeric: lining-nums; color: var(--teal-700); line-height: 1.1; }
.mh-stats span { font-size: .84rem; color: var(--ink-3); line-height: 1.35; }

.mh-visual { position: relative; min-height: 600px; border-radius: 24px; overflow: hidden; background: var(--teal-900); }
.mh-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.mh-visual > img.is-art { object-position: 50% 62%; }
.mh-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 53, 51, .0) 40%, rgba(10, 53, 51, .35)); pointer-events: none; }
.mh-float { position: absolute; right: 18px; bottom: 18px; z-index: 2; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; width: min(290px, 46%); }
.mh-float a {
    display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 18px;
    background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: var(--ink); text-decoration: none; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .45); transition: transform .25s, background .25s;
}
.mh-float a:hover { transform: translateX(-4px); background: #fff; color: var(--ink); }
.mh-float-thumb { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; overflow: hidden; background: var(--teal-50); color: var(--teal-700); }
.mh-float-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mh-float-thumb .icon { width: 24px; height: 24px; }
.mh-float span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.mh-float strong { font-size: .95rem; font-weight: 600; }
.mh-float small { font-size: .8rem; color: var(--ink-3); }

@media (max-width: 980px) {
    .mh-grid { grid-template-columns: 1fr; }
    .mh-copy { padding: 26px 8px 8px; }
    .mh-visual { min-height: 0; }
    .mh-visual::after { background: linear-gradient(180deg, transparent 50%, rgba(10, 53, 51, .45)); }
    .mh-float { position: static; transform: none; width: auto; margin-top: 12px; }
    .mh-float a { background: #fff; box-shadow: var(--shadow); }
    .mh-visual { overflow: visible; background: transparent; }
    .mh-visual > img { position: relative; height: auto; aspect-ratio: 4 / 4.2; border-radius: 24px; }
    .mh-visual::after { display: none; }
}
@media (max-width: 520px) {
    .mh-title { font-size: calc(2.1rem * var(--display-scale)); }
    .pill, .theme-modern .eyebrow { letter-spacing: .08em; font-size: .7rem; }
    .mh-actions .btn { width: 100%; }
    .mh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Panel layanan Rumah Tasawuf */
.mm-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.mm-copy h2 { margin-bottom: 18px; }
.mm-copy .lead { margin-bottom: 28px; }
.mm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.img-card {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; padding: 22px;
    border-radius: 24px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate;
    background: #082F2D;
}
.img-card > img { position: absolute; top: 0; left: 0; z-index: -2; width: 100%; height: 80%; object-fit: cover; transition: transform .6s; }
.img-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 47, 45, 0) 24%, rgba(8, 47, 45, .72) 54%, #082F2D 80%); }
.img-card-body { text-shadow: 0 1px 14px rgba(0, 0, 0, .3); }
.img-card:hover { color: #fff; }
.img-card:hover > img { transform: scale(1.04); }
.img-card-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: auto; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--teal-700); }
.img-card-icon .icon { width: 22px; height: 22px; }
.img-card-body { display: flex; flex-direction: column; gap: 6px; margin-top: 80px; }
.img-card-body strong { font-size: 1.22rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.img-card-body small { font-size: .88rem; line-height: 1.5; color: rgba(255, 255, 255, .85); }
@media (max-width: 1080px) { .mm-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .mm-cards { grid-template-columns: 1fr; } .img-card { min-height: 240px; } .img-card-body { margin-top: 40px; } }

/* Deret jadwal majelis */
.mstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin: 6px 0 var(--gut); padding: 18px 26px; border-radius: 22px; background: var(--paper-2); border: 1px solid var(--line); }
.mstrip-label { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.mstrip-item { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: .95rem; }
.mstrip-item .icon { color: var(--teal-600); }
.mstrip > a { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 600; }
@media (max-width: 760px) { .mstrip > a { margin-left: 0; } }

/* Program belajar + kartu pengingat */
.mp-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 56px); align-items: start; }
.mp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.prog-card { display: flex; flex-direction: column; gap: 8px; }
.prog-media { position: relative; display: block; aspect-ratio: 4 / 4.4; border-radius: 22px; overflow: hidden; background: var(--paper-2); }
.prog-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.prog-card:hover .prog-media > img { transform: scale(1.04); }
.prog-tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: .78rem; font-weight: 600; }
.prog-card h3 { margin: 10px 0 0; font-size: 1.12rem; }
.prog-card h3 a { color: var(--ink); text-decoration: none; }
.prog-card h3 a:hover { color: var(--teal-700); }
.prog-card p { margin: 0; color: var(--ink-3); font-size: .92rem; }
.prog-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 600; font-size: .92rem; text-decoration: none; }
.mp-side h2 { margin-bottom: 16px; }
.mp-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 26px; }
.mp-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.remind-card { display: grid; gap: 10px; padding: 26px; border-radius: 24px; background: var(--gold-hl); color: var(--teal-900); }
.remind-card h3 { margin: 0; font-size: 1.3rem; color: var(--teal-900); }
.remind-card p { margin: 0 0 6px; color: #3D4B36; font-size: .94rem; }
.remind-card .input { background: #fff; border-color: transparent; border-radius: 999px; min-height: 50px; }
.remind-row { display: flex; gap: 8px; }
.remind-row .input { flex: 1; min-width: 0; }
.remind-row .btn { min-height: 50px; }
@media (max-width: 1080px) { .mp-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .mp-cards { grid-template-columns: 1fr; } .prog-media { aspect-ratio: 16 / 11; } }
@media (max-width: 420px) { .remind-row { flex-direction: column; } }

/* Ilustrasi / foto pada kartu & kepala halaman Rumah Tasawuf */
.svc-card-media { position: relative; margin: -12px -12px 6px; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--teal-800); }
.svc-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.theme-modern .svc-card:hover .svc-card-media img { transform: scale(1.04); }
.svc-card-media + .svc-card-top { position: absolute; top: 26px; left: 26px; z-index: 1; }
.svc-card-media + .svc-card-top .badge { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.theme-modern .partner-hero-grid.has-art { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero-mosaic { display: grid; grid-template-columns: 1.08fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: clamp(340px, 34vw, 470px); }
.hero-mosaic img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow); }
.hero-mosaic img:first-child { grid-row: span 2; }
.hero-art { height: clamp(340px, 36vw, 500px); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); background: var(--teal-800); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
    .theme-modern .partner-hero-grid.has-art { grid-template-columns: 1fr; }
    .hero-mosaic { height: 300px; }
    .hero-art { height: auto; aspect-ratio: 16 / 10; }
}
@media (max-width: 520px) { .hero-mosaic { height: 230px; gap: 10px; } .hero-mosaic img { border-radius: 16px; } }