/* ==========================================================
   ZYARA.ID — pages.css
   Page-specific composition. Reusable component styling lives in
   components.css — this file is layout/section arrangement only.
   ========================================================== */

/* ---------------------------------------------------------- Announcement bar */
.announce{background:var(--night);color:rgba(243,239,228,.85)}
.announce-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:9px var(--gutter);font-size:13px;text-align:center}
.announce-row a{font-weight:700;color:var(--brass-2)}

/* ---------------------------------------------------------- Hero (no stock photography —
   deep-night gradient + lattice texture until licensed photography exists) */
.hero{position:relative;padding-block:calc(var(--sec-pad) + 20px) var(--sec-pad);background:radial-gradient(120% 140% at 15% 0%,var(--dusk) 0%,var(--night) 60%);overflow:hidden}
.hero-inner{position:relative;max-width:720px}
.hero-inner .h1{margin-top:16px}
.hero-inner .h1 em{font-style:normal;color:var(--brass-2)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.hero-chips li{font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:var(--r-pill);border:1px solid rgba(243,239,228,.22);color:rgba(243,239,228,.82)}

/* ---------------------------------------------------------- Journey Planner teaser (homepage) */
.jp-teaser-wrap{margin-top:calc(var(--sec-pad) * -1 + 40px);position:relative;z-index:2}
.jp-teaser p.lede{margin-bottom:20px}
.jp-teaser .jp-options{margin-bottom:22px}

/* ---------------------------------------------------------- Services / Umrah feature / Packages / Destinations */
.services{padding-block:var(--sec-pad)}
.umrah-feature{padding-block:var(--sec-pad);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:center}
.umrah-visual{aspect-ratio:4/5;position:relative}
.umrah-badge{position:absolute;bottom:18px;inset-inline-start:18px;background:var(--paper);border-radius:var(--r-md);padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh-2);max-width:240px}
.umrah-badge b{display:block;font-family:var(--fd);font-size:14px;color:var(--ink)}
.umrah-badge span{font-size:12px;color:var(--muted)}
.umrah-list{display:grid;gap:12px;margin-top:20px}
.umrah-list li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink)}
.umrah-list .icon{color:var(--palm)}

.pkg-section{padding-block:var(--sec-pad)}
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.dest-section{padding-block:var(--sec-pad);background:var(--night)}
.dest-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:var(--sp-4);overflow-x:auto;padding-bottom:8px}
.dest-card{border-radius:var(--r-lg);overflow:hidden;background:var(--dusk)}
.dest-card .ph{aspect-ratio:3/4;border-radius:0}
.dest-info{padding:14px}
.dest-info b{display:block;font-family:var(--fd);color:var(--sand);font-size:16px}
.dest-info span{font-size:12.5px;color:rgba(243,239,228,.65)}

.empty-panel{text-align:center;padding:var(--sp-8) var(--sp-5);border:1px dashed var(--line-strong);border-radius:var(--r-lg);color:var(--muted)}
.empty-panel .btn{margin-top:18px}
[data-theme="dark"] .empty-panel,.on-dark .empty-panel{border-color:rgba(243,239,228,.2);color:rgba(243,239,228,.7)}

/* ---------------------------------------------------------- Partners marquee section */
.partners-section{padding-block:var(--sec-pad)}
.partner-block{margin-top:var(--sp-6)}
.partner-block h3{font-family:var(--fd);font-size:16px;color:var(--ink);margin-bottom:14px}

/* ---------------------------------------------------------- How it works */
.flow-section{padding-block:var(--sec-pad)}
.flow-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-4);margin-top:var(--sp-6)}
.flow-step{text-align:center}
.fs-ic{width:52px;height:52px;border-radius:50%;background:var(--bone);display:grid;place-items:center;margin-inline:auto;margin-bottom:14px;color:var(--palm)}
.flow-step b{display:block;font-family:var(--fd);font-size:15px;color:var(--ink);margin-bottom:4px}
.flow-step span{font-size:12.5px;color:var(--muted)}

/* ---------------------------------------------------------- Stories section */
.stories-section{padding-block:var(--sec-pad)}

/* ---------------------------------------------------------- FAQ (accordion) */
.faq-section{padding-block:var(--sec-pad)}
.faq-list{max-width:760px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:20px 4px;font-family:var(--fd);font-size:17px;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .icon{transition:transform .25s var(--ease)}
.faq-item[open] summary .icon{transform:rotate(45deg)}
.faq-item p{padding:0 4px 20px;font-size:14.5px;color:var(--body);max-width:65ch}

/* ---------------------------------------------------------- Lead magnet */
.lead-section{padding-block:var(--sec-pad);background:var(--bone)}
.lead-panel{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--sp-6);align-items:center;background:var(--paper);border-radius:var(--r-xl);padding:clamp(24px,4vw,48px);box-shadow:var(--sh-1)}
.lead-form{display:grid;gap:12px}
.lead-form input{padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r-sm)}
.lead-form input:focus{border-color:var(--brass)}

/* ---------------------------------------------------------- Final CTA */
.final-cta{position:relative;padding-block:var(--sec-pad);background:radial-gradient(120% 140% at 85% 100%,var(--dusk) 0%,var(--night) 60%);text-align:center}
.final-cta .h2{max-width:720px;margin-inline:auto}
.final-cta .lede{margin-inline:auto}
.final-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}