/* ============================================================
   HALAL SOJOURN — Screen layouts
   ============================================================ */

/* ---------- MANIFESTO ---------- */
.manifesto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.manifesto__head { margin: 0.3em 0 0; }
.manifesto__r { padding-top: 6px; }
.manifesto__r .divider-motif { margin-bottom: var(--s5); justify-content: flex-start; }
[dir="rtl"] .manifesto__r .divider-motif { justify-content: flex-end; }
.manifesto__r .lead { margin: 0 0 var(--s5); }

/* ---------- DESTINATIONS GRID ---------- */
.dest-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
.dest-grid__row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); margin-top: var(--s4); }

/* ---------- JOURNEYS / TESTIMONIALS GRID ---------- */
.journeys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.4vw, 34px); }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.4vw, 32px); }

/* ---------- CTA ---------- */
.cta-soft { display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.cta-soft .display-lg { margin: 0.1em 0 0.1em; }
.cta-soft__actions { margin-top: var(--s4); }
.cta-soft__note { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: var(--s3) 0 0; letter-spacing: 0.01em; }
.cta-soft__note svg { color: var(--gold); }

/* ---------- NEWSLETTER BAND ---------- */
.news-band { background: var(--card); border-top: 1px solid var(--line-soft); }
.news-band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; padding-block: clamp(34px, 5vw, 56px); }
.news-band__title { font-size: 1.7rem; color: var(--ink); margin: 0 0 6px; }

/* ============================================================
   DESTINATION / JOURNEY DETAIL
   ============================================================ */
.detail-hero { position: relative; min-height: 76vh; display: flex; align-items: flex-end; color: var(--on-dark); overflow: hidden; }
.detail-hero__media { position: absolute; inset: 0; }
.detail-hero__media .media { height: 100%; border-radius: 0; }
.detail-hero__media .media img { height: 100%; }
.detail-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,30,24,0.84), rgba(20,30,24,0.28) 52%, rgba(20,30,24,0.34)); }
.detail-hero__inner { position: relative; z-index: 2; width: 100%; padding-block: 150px 56px; }
.detail-hero__crumbs { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--on-dark-muted); margin-bottom: var(--s5); }
.detail-hero__crumbs a { color: var(--on-dark-muted); }
.detail-hero__crumbs a:hover { color: var(--paper); }
.detail-hero h1 { color: var(--paper); margin: 0; max-width: 18ch; }
.detail-hero__sub { color: rgba(243,238,226,0.92); font-size: var(--fs-lead); max-width: 46ch; margin-top: var(--s4); }
.detail-hero__facts { display: flex; gap: clamp(20px,3vw,44px); margin-top: var(--s6); flex-wrap: wrap; }
.detail-fact { display: flex; flex-direction: column; gap: 3px; }
.detail-fact span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); }
.detail-fact strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--paper); }

/* layout with sticky enquire rail */
.detail-wrap { display: grid; grid-template-columns: 1fr 360px; gap: clamp(40px, 5vw, 80px); align-items: start; }
.detail-main { min-width: 0; }
.detail-rail { position: sticky; top: 96px; }
.enquire-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px,2.2vw,30px); box-shadow: var(--shadow-sm); }
.enquire-card__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: var(--s4); }
.enquire-card__price strong { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; color: var(--ink); }
.enquire-card h4 { margin: 0 0 6px; font-size: 1.3rem; font-family: var(--serif); font-weight: 600; color: var(--ink); }
.enquire-card p { font-size: 0.92rem; color: var(--text-muted); margin: 0 0 var(--s5); }
.enquire-card__list { list-style: none; margin: var(--s5) 0 0; padding: var(--s5) 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 11px; }
.enquire-card__list li { display: flex; gap: 10px; font-size: 0.9rem; color: var(--text); align-items: flex-start; }
.enquire-card__list svg { color: var(--emerald); margin-top: 3px; flex: 0 0 auto; }

.lede-block { max-width: 62ch; }
.lede-block .lead { color: var(--text); font-size: 1.5rem; line-height: 1.45; font-family: var(--serif); font-weight: 500; }

.detail-section { padding-block: clamp(38px, 5vw, 64px); border-top: 1px solid var(--line-soft); }
.detail-section:first-child { border-top: 0; }
.detail-section h2 { margin: 0 0 var(--s5); }

/* halal points */
.halal-list { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.halal-list li { display: flex; gap: 14px; align-items: flex-start; padding: var(--s4) 0; border-bottom: 1px solid var(--line-soft); }
.halal-list li:last-child { border-bottom: 0; }
.halal-list .halal-ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: var(--emerald-wash); color: var(--emerald); display: grid; place-items: center; }
.halal-list p { margin: 0; font-size: 1.05rem; line-height: 1.55; }

/* experiences */
.exp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px,2.4vw,30px); }
.exp-card { display: flex; flex-direction: column; gap: var(--s3); }
.exp-card .media { border-radius: var(--r); }
.exp-card h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--ink); margin: 6px 0 0; }
.exp-card p { margin: 0; font-size: 0.96rem; color: var(--text-muted); line-height: 1.55; }

/* experience tiles (text-forward) */
.exp-tile { border: 1px solid var(--line-soft); border-radius: var(--r); padding: clamp(22px,2.4vw,30px); background: var(--card); display: flex; flex-direction: column; gap: 8px; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.exp-tile:hover { border-color: var(--gold-soft); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.exp-tile__tag { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.exp-tile h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); margin: 4px 0 0; line-height: 1.12; }
.exp-tile p { margin: 0; font-size: 1rem; color: var(--text-muted); line-height: 1.55; }

/* mobile sticky enquire bar */
.m-enquire { display: none; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90; background: rgba(250,246,236,0.95); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 12px clamp(16px,5vw,24px); align-items: center; justify-content: space-between; gap: var(--s4); box-shadow: 0 -8px 24px -16px rgba(22,34,28,0.4); }
.m-enquire__txt { display: flex; flex-direction: column; line-height: 1.1; }
.m-enquire__label { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.02em; }
.m-enquire__price { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.m-enquire .btn { padding-block: 0.85em; }
@media (max-width: 1000px) { .m-enquire { display: flex; } .detail .footer { padding-bottom: 80px; } }

/* ============================================================
   ENQUIRY
   ============================================================ */
.enquiry .section { padding-top: calc(var(--header-h) + 40px); }
.enquiry-wrap { display: grid; grid-template-columns: 340px 1fr; gap: clamp(40px,5vw,80px); align-items: start; }
.enquiry-rail { position: sticky; top: 100px; }
.step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.step-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r); color: var(--text-faint); transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.step-item.is-done { color: var(--text-muted); cursor: pointer; }
.step-item.is-active { background: var(--emerald-wash); color: var(--ink); }
.step-item__n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 0.8rem; font-weight: 600; flex: 0 0 auto; }
.step-item.is-active .step-item__n { border-color: var(--emerald); background: var(--emerald); color: var(--paper); }
.step-item.is-done .step-item__n { border-color: var(--emerald); color: var(--emerald); }
.step-item__t { font-size: 0.96rem; font-weight: 500; }
.enquiry-rail__note { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line-soft); font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
.enquiry-rail__note svg { color: var(--gold); flex: 0 0 auto; margin-top: 3px; }

.enquiry-form { max-width: 720px; }
.enq-progress { height: 3px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.enq-progress span { display: block; height: 100%; background: linear-gradient(to right, var(--emerald), var(--gold)); transition: width 0.5s var(--ease); }
.enq-progress__label { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; margin: 14px 0 var(--s6); }
.enq-step { animation: enqIn 0.5s var(--ease); }
@keyframes enqIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.enq-q { margin: 0 0 8px; }
.enq-sub { margin: 0 0 var(--s6); font-size: 1.05rem; max-width: 52ch; }
.choice-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.choice-grid--2 { grid-template-columns: repeat(2, 1fr); }
.choice-grid--3 { grid-template-columns: repeat(3, 1fr); }
.choice-grid--tight { gap: 8px; }
.enq-inline { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,40px); align-items: start; }
.stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; width: fit-content; background: var(--card); }
.stepper__btn { width: 46px; height: 46px; border: 0; background: transparent; font-size: 1.4rem; color: var(--emerald); line-height: 1; }
.stepper__btn:hover { background: var(--emerald-wash); }
.stepper__val { min-width: 52px; text-align: center; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.enq-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.enq-fields__full { grid-column: 1 / -1; }
.input--err { border-color: #b4533f; box-shadow: 0 0 0 3px rgba(180,83,63,0.12); }
.enq-consent, .enq-prefill { font-size: 0.85rem; margin-top: var(--s5); }
.enq-prefill { display: inline-flex; align-items: center; gap: 8px; color: var(--emerald); }
.enq-prefill svg { color: var(--emerald); }
.enq-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line-soft); }
.btn:disabled { opacity: 0.4; pointer-events: none; }

/* success */
.enq-success { display: flex; flex-direction: column; align-items: center; gap: var(--s4); padding-top: var(--s6); }
.enq-success__mark { margin-bottom: var(--s3); }
.enq-success .display-lg { margin: 0; }
.enq-success__card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r); padding: clamp(24px,3vw,36px); text-align: start; max-width: 540px; width: 100%; margin: var(--s4) 0; box-shadow: var(--shadow-xs); }
.enq-success__card h4 { font-size: 1.3rem; color: var(--ink); margin: 0 0 var(--s4); }
.enq-next { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 12px; color: var(--text-muted); line-height: 1.55; }
.enq-next strong { color: var(--ink); }

@media (max-width: 1000px) {
  .enquiry-wrap { grid-template-columns: 1fr; }
  .enquiry-rail { position: static; }
  .step-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .step-item { padding: 8px 12px; }
  .step-item__t { display: none; }
  .step-item.is-active .step-item__t { display: inline; }
}
@media (max-width: 680px) {
  .choice-grid--2, .choice-grid--3 { grid-template-columns: 1fr; }
  .choice-grid--3.choice-grid--tight { grid-template-columns: repeat(3,1fr); }
  .enq-inline, .enq-fields { grid-template-columns: 1fr; }
}

/* itinerary day list */
.itin { display: flex; flex-direction: column; }
.itin-day { display: grid; grid-template-columns: 92px 1fr; gap: clamp(18px,2.4vw,36px); padding: var(--s6) 0; border-top: 1px solid var(--line-soft); }
.itin-day:first-child { border-top: 0; padding-top: 0; }
.itin-day__num { font-family: var(--serif); font-size: 2.4rem; font-weight: 500; color: var(--gold); line-height: 1; }
.itin-day__num small { display: block; font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); margin-top: 8px; }
.itin-day__t { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.itin-day__b { margin: 0 0 10px; color: var(--text-muted); line-height: 1.6; max-width: 60ch; }
.itin-day__stay { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--gold-deep); font-weight: 500; letter-spacing: 0.02em; }

/* includes columns */
.inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); }
.inc-col h3 { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 var(--s4); }
.inc-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.inc-col li { display: flex; gap: 11px; align-items: flex-start; font-size: 1rem; line-height: 1.5; }
.inc-col li svg { margin-top: 4px; flex: 0 0 auto; }
.inc-col--yes li svg { color: var(--emerald); }
.inc-col--no li { color: var(--text-muted); }
.inc-col--no li svg { color: var(--text-faint); }

/* gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery-grid .media { border-radius: var(--r-sm); aspect-ratio: 3/4; }
.gallery-grid .media:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* listing index pages */
.index-head { padding-block: calc(var(--header-h) + 56px) var(--s7); background: var(--linen); border-bottom: 1px solid var(--line-soft); }
.index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px,3vw,44px); }
.index-grid--j { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .manifesto { grid-template-columns: 1fr; gap: var(--s5); }
  .dest-grid { grid-template-columns: 1fr 1fr; }
  .dest-grid__row { grid-template-columns: repeat(3, 1fr); }
  .journeys-grid { grid-template-columns: 1fr 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .journeys-grid > :nth-child(3) { display: none; }
  .detail-wrap { grid-template-columns: 1fr; }
  .detail-rail { position: static; margin-top: var(--s6); }
  .index-grid, .index-grid--j { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .dest-grid { grid-template-columns: 1fr; }
  .dest-grid__row { grid-template-columns: 1fr; }
  .journeys-grid { grid-template-columns: 1fr; }
  .exp-grid, .inc-grid { grid-template-columns: 1fr; }
  .news-band__inner { flex-direction: column; align-items: flex-start; }
  .itin-day { grid-template-columns: 60px 1fr; gap: 16px; }
  .itin-day__num { font-size: 1.8rem; }
  .index-grid, .index-grid--j, .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid .media:first-child { grid-column: span 1; grid-row: span 1; }
}