/* The cream sheet slides up over the pinned hero */
.sheet { position: relative; z-index: 1; background: var(--cream); border-radius: var(--r-lg) var(--r-lg) 0 0; margin-top: -24px; }
@media (max-width: 767px) { .sheet { border-radius: var(--r-md) var(--r-md) 0 0; margin-top: -16px; } }

/* ============================================================
   INTRO / EDITORIAL
   ============================================================ */
.intro { padding: clamp(32px, 4vw, 56px) 0 var(--sec); }
.statement {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04;
  font-size: clamp(28px, 4vw, 56px); max-width: 20ch; text-wrap: balance;
}
.statement .w { display: inline-block; margin-right: 0.22em; will-change: opacity; }
.statement .w.hl { color: var(--rose); }
.intro-row { margin-top: clamp(56px, 8vw, 104px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.stat-n { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; font-size: clamp(44px, 5.4vw, 72px); }
.stat-t { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--plum-600); max-width: 18ch; }
.intro-side .lead { margin-bottom: 28px; }
.search {
  display: flex; align-items: center; gap: 8px; height: 58px; padding: 0 7px 0 20px; background: var(--white); border-radius: 999px;
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.12); border: 1px solid var(--sand-200); transition: box-shadow 0.25s var(--ease), border-color 0.25s;
}
.search:focus-within { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(201, 42, 98, 0.2), 0 12px 40px rgba(16, 24, 40, 0.12); }
.search > .icon { color: var(--plum-600); font-size: 24px; }
.search label { flex: 1; min-width: 0; display: block; color: var(--plum); }
.search label span { display: block; font-size: 13px; font-weight: 500; color: var(--plum); }
.search input {
  width: 100%; border: 0; outline: 0; background: transparent; padding: 0; height: 22px; font: 400 14px/1 var(--font-body); color: var(--plum);
}
.search input::placeholder { color: var(--mauve-500); opacity: 1; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sand-300); background: transparent; color: var(--plum);
  font: 500 14px/1 var(--font-body); white-space: nowrap; transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.16s var(--ease);
}
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--plum); color: var(--white); border-color: var(--plum); }
@media (hover: hover) and (pointer: fine) { .chip:not([aria-pressed="true"]):hover { border-color: var(--plum); } }
@media (max-width: 899px) { .intro-row { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
  .search { height: 60px; padding-left: 18px; }
  .search .btn { padding: 0 18px; }
}

/* ============================================================
   DESTINATIONS (horizontal rail)
   ============================================================ */
.dest { padding: var(--sec) 0; }
.dest-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 5vw, 56px); }
.dest-head .h2 { margin-top: 16px; max-width: 14ch; }
.rail-ctrl { display: flex; gap: 8px; }
.rail-ctrl .btn-icon[disabled] { opacity: 0.4; }
.rail {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: var(--page-x); scroll-padding-inline: var(--page-x); padding-bottom: 8px;
  max-width: calc(var(--max) + var(--page-x) * 2 + 400px); margin-inline: auto;
}
@media (min-width: 1600px) { .rail { max-width: none; padding-inline: max(var(--page-x), calc((100vw - var(--max)) / 2)); scroll-padding-inline: max(var(--page-x), calc((100vw - var(--max)) / 2)); } }
.rail::-webkit-scrollbar { display: none; }
.dcard { flex: 0 0 clamp(220px, 21vw, 290px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; }
.dcard:nth-child(even) { margin-top: 40px; }
.dcard-img { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; }
.dcard-img .ph { position: absolute; inset: 0; transition: transform 0.4s ease; }
@media (hover: hover) and (pointer: fine) { .dcard:hover .ph { transform: scale(1.04); } }
.save {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 999px; border: none;
  background: rgba(251, 249, 244, 0.92); display: grid; place-items: center; transition: transform 0.16s var(--ease);
}
.save:active { transform: scale(0.92); }
.save .icon { color: var(--rose); font-size: 20px; }
.save[aria-pressed="true"] .icon { transform: scale(1.15); }
.dcard h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; font-size: clamp(22px, 2vw, 26px); line-height: 1.1; margin: 6px 0 6px; }
.dcard p { font-size: 14px; line-height: 1.5; color: var(--plum-600); margin-bottom: 14px; text-wrap: pretty; }
.dcard-body { padding-inline: 2px; }
@media (max-width: 767px) { .dcard:nth-child(even) { margin-top: 0; } .dcard { flex-basis: 78vw; } .rail-ctrl { display: none; } }

/* ============================================================
   EXPERIENCES (plum statement section)
   ============================================================ */
.xp { background: var(--plum); color: var(--white); border-radius: var(--r-lg); margin-inline: 12px; overflow: clip; }
.xp-in { padding-block: var(--sec); }
.xp h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; font-size: clamp(36px, 6vw, 88px); max-width: 12ch; text-wrap: balance; }
.xp h2 em { font-style: normal; color: var(--blush); }
.xp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(36px, 5vw, 56px); }
.xp .chip { border-color: rgba(255, 255, 255, 0.28); color: var(--white); display: inline-flex; align-items: center; gap: 8px; }
.xp .chip .icon { font-size: 18px; }
.xp .chip[aria-pressed="true"] { background: var(--blush); color: var(--plum); border-color: var(--blush); }
@media (hover: hover) and (pointer: fine) { .xp .chip:not([aria-pressed="true"]):hover { border-color: var(--white); } }
.xp-stage { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.xp-photo { aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; position: relative; }
.xp-photo .ph { position: absolute; inset: 0; }
.xp-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(24px, 2.6vw, 34px); text-wrap: balance; }
.xp-desc { margin-top: 12px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); max-width: 46ch; text-wrap: pretty; }
.xp-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 24px 0 32px; font-size: 14px; color: rgba(255, 255, 255, 0.88); }
.xp-meta span { display: inline-flex; align-items: center; gap: 6px; }
.xp-meta .icon { font-size: 18px; color: var(--blush); }
@media (max-width: 899px) { .xp-stage { grid-template-columns: 1fr; } .xp { margin-inline: 8px; border-radius: var(--r-md); } }

/* ============================================================
   EVENTS + MAP
   ============================================================ */
.ev { padding: var(--sec) 0; }
.ev-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.ev .h2 { margin: 16px 0 clamp(28px, 4vw, 44px); max-width: 12ch; }
.ev-list { background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--r-md); overflow: hidden; }
.ev-row { display: flex; gap: 16px; padding: 16px; align-items: center; border-bottom: 1px solid #f6eee7; cursor: pointer; transition: background-color 0.2s; }
.ev-row:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .ev-row:hover { background: var(--cream); } }
.ev-date { width: 56px; flex-shrink: 0; text-align: center; border-right: 1px solid var(--sand-200); padding-right: 12px; }
.ev-date b { display: block; font: 500 11px/1 var(--font-body); letter-spacing: 0.06em; }
.ev-date span { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 26px; line-height: 1.05; }
.ev-thumb { width: 64px; height: 64px; border-radius: var(--r-sm); flex-shrink: 0; background: repeating-linear-gradient(135deg, #f2e3d8 0 6px, #f8eee6 6px 12px); }
.ev-info { flex: 1; min-width: 0; }
.ev-cat { font-size: 12px; font-weight: 500; }
.ev-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ev-sub { font-size: 13px; color: var(--plum-600); }
.ev-save { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--sand-200); background: transparent; display: grid; place-items: center; flex-shrink: 0; transition: transform 0.16s var(--ease), background-color 0.15s; }
.ev-save:active { transform: scale(0.92); }
.ev-save[aria-pressed="true"] { background: var(--blush); border-color: var(--blush); }
.ev-save .icon { font-size: 20px; }
.ev-more { margin-top: 24px; }

.mapcard { background: var(--blush); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; min-height: 420px; position: relative; overflow: hidden; }
.mapcard::before {
  content: ""; position: absolute; inset: 0; opacity: 0.55; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0 14px, transparent 14px 28px);
  mask-image: linear-gradient(200deg, #000, transparent 55%); -webkit-mask-image: linear-gradient(200deg, #000, transparent 55%);
}
.mapcard > * { position: relative; }
.mapcard h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; font-size: clamp(32px, 3.6vw, 48px); margin-top: auto; text-wrap: balance; max-width: 10ch; }
.mapcard p { margin: 12px 0 20px; font-size: 15px; line-height: 1.55; color: var(--plum-700); max-width: 34ch; }
.legend { display: flex; flex-wrap: wrap; gap: 8px; }
.legend span { height: 36px; padding: 0 14px; border-radius: 999px; background: var(--white); font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 8px; height: 8px; border-radius: 99px; display: block; }
.mapcard .btn { align-self: flex-start; }
.mapcard-pin { position: absolute !important; top: 28px; right: 28px; width: 56px; height: 56px; border-radius: 999px; background: var(--white); border: 2px solid var(--rose); display: grid; place-items: center; }
.mapcard-pin .icon { color: var(--rose); font-size: 26px; }
@media (max-width: 899px) { .ev-grid { grid-template-columns: 1fr; } .mapcard { min-height: 360px; } }
@media (max-width: 479px) { .ev-thumb { display: none; } }

/* ============================================================
   PLAN CTA
   ============================================================ */
.plan { padding: 0 0 var(--sec); }
.plan-wrap { margin-inline: 12px; }
/* Blush panel: copy on the left, a fanned three-day trip on the right */
.plan-card {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(32px, 5vw, 72px);
  padding: clamp(32px, 5vw, 72px); border-radius: var(--r-lg); background: var(--blush); color: var(--plum); overflow: hidden;
}
.plan-copy h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; font-size: clamp(44px, 6.4vw, 96px); max-width: 8ch; text-wrap: balance; }
.plan-copy > p { margin-top: 18px; font-size: 16px; line-height: 1.6; color: var(--plum-700); max-width: 38ch; text-wrap: pretty; }
.plan-add { list-style: none; margin: 22px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.plan-add li { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--white); font-size: 13px; font-weight: 500; }
.plan-add .icon { font-size: 18px; color: var(--rose); }

.plan-stage { position: relative; height: clamp(340px, 34vw, 460px); display: grid; place-items: center; }
.plan-day {
  position: absolute; width: clamp(168px, 17vw, 236px); margin: 0; padding: 8px 8px 12px; border-radius: var(--r-md);
  background: var(--white); box-shadow: 0 18px 40px rgba(42, 27, 61, 0.16); will-change: transform;
}
.plan-day-img { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-sm); overflow: hidden; background: var(--sand-50); }
.plan-day-img .ph { position: absolute; inset: 0; }
.plan-day figcaption { display: flex; flex-direction: column; gap: 2px; padding: 10px 4px 0; }
.plan-day figcaption span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose); }
.plan-day figcaption strong { font-size: 15px; font-weight: 600; line-height: 1.25; }
.plan-day figcaption small { font-size: 12px; color: var(--mauve-500); }
.plan-day figcaption[data-end] { align-items: flex-end; text-align: end; }

@media (max-width: 899px) {
  .plan-card { grid-template-columns: minmax(0, 1fr); }
  .plan-stage { height: clamp(300px, 72vw, 400px); }
  .plan-day { width: clamp(136px, 34vw, 200px); }
}
@media (max-width: 767px) { .plan-wrap { margin-inline: 8px; } .plan-card { border-radius: var(--r-md); } }


/* ============================================================
   KIT SECTIONS: quick tiles, bands, stays, food, groups, guide
   ============================================================ */
.tiles { padding-top: clamp(20px, 3vw, 40px); }
.tiles-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tiles-grid > div { display: flex; }
.tile { position: relative; width: 100%; display: flex; flex-direction: column; gap: 22px; padding: 20px; border-radius: var(--r-md); transition: transform 0.25s var(--ease); }
.tile > .icon:first-child { font-size: 28px; }
.tile-tag { display: block; font: 500 11px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mauve-500); margin-bottom: 8px; }
.tile strong, .guide-item strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.tile-desc { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--plum-600); }
.tile-go { position: absolute; top: 22px; right: 22px; font-size: 20px; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s, transform 0.25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .tile:hover { transform: translateY(-3px); } .tile:hover .tile-go, .guide-item:hover .tile-go { opacity: 1; transform: none; } }
.tile:active { transform: scale(0.98); }
@media (max-width: 899px) { .tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile { gap: 20px; padding: 20px; } }

.band { padding: var(--sec) 0; }
.band-blush { background: var(--blush); }
.band-amber { background: #fff1d6; }
.band-mint { background: #e1f3f0; }
.sec { padding: var(--sec) 0; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 44px); }
.head .h2, .sec .h2, .band .h2 { margin-top: 14px; }
.head .h2 { max-width: 20ch; }
.head .link-arrow { flex-shrink: 0; margin-bottom: 8px; }
.rating { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 500; }
.rating .icon { font-size: 16px; color: var(--amber); }

.about { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.about-photo { aspect-ratio: 5 / 4; border-radius: var(--r-lg); overflow: hidden; position: relative; }
.about-photo .ph { position: absolute; inset: 0; }
.about .lead { margin: 18px 0 28px; }
.about .stats { margin-bottom: 32px; }
@media (max-width: 899px) { .about { grid-template-columns: 1fr; } .about-photo { aspect-ratio: 16 / 10; } }

.stay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.stay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--r-md); overflow: hidden; }
.stay-img { position: relative; min-height: 260px; }
.stay-img .ph { position: absolute; inset: 0; transition: transform 0.4s ease; }
@media (hover: hover) and (pointer: fine) { .stay:hover .ph, .food:hover .ph { transform: scale(1.04); } }
.stay-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.stay-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--plum-600); }
.stay h3 { font-size: 18px; font-weight: 600; line-height: 1.25; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tags span { padding: 3px 8px; border-radius: var(--r-xs); background: var(--sand-50); font-size: 12px; }
.stay-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid var(--sand-200); padding-top: 12px; }
.stay-foot b { font-size: 20px; font-weight: 600; }
.stay-foot span { font-size: 13px; color: var(--mauve-500); }
@media (max-width: 1099px) { .stay-grid { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .stay { grid-template-columns: 1fr; } .stay-img { min-height: 0; aspect-ratio: 16 / 10; } }

.food-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.food { display: flex; flex-direction: column; gap: 12px; }
.food-img { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; }
.food-img .ph { position: absolute; inset: 0; transition: transform 0.4s ease; }
.open { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: var(--r-xs); background: #e1f3f0; color: #0b6b61; font-size: 12px; font-weight: 500; }
.food-row { display: flex; justify-content: space-between; gap: 12px; }
.food h3 { font-size: 16px; font-weight: 600; }
.food p { font-size: 14px; color: var(--plum-600); margin-top: 2px; }
.food-meta { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; color: var(--mauve-500); }
.food-meta .rating { color: var(--plum); }
@media (max-width: 1099px) { .food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .food-grid { gap: 20px 12px; } .food-row { flex-direction: column; gap: 4px; } .food-meta { text-align: left; align-items: flex-start; flex-direction: row; gap: 10px; } }

.groups { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.groups .lead { margin: 16px 0 28px; }
.groups-photo { aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; position: relative; }
.groups-photo .ph { position: absolute; inset: 0; }
@media (max-width: 899px) { .groups { grid-template-columns: 1fr; } }

.guide-grid { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--sand-200); }
.guide-grid > div { display: flex; }
.guide-item { position: relative; width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 28px 28px 28px 0; }
.guide-grid > div + div .guide-item { padding-left: 28px; border-left: 1px solid var(--sand-200); }
.guide-ic { width: 44px; height: 44px; border-radius: 999px; background: var(--blush); display: grid; place-items: center; margin-bottom: 16px; }
.guide-item .tile-go { top: 28px; right: 28px; }
@media (max-width: 767px) {
  .guide-grid { grid-template-columns: 1fr; }
  .guide-grid > div + div .guide-item { padding-left: 0; border-left: 0; border-top: 1px solid var(--sand-200); }
  .guide-item { padding: 22px 0; }
  .guide-item .tile-go { opacity: 1; transform: none; top: 22px; right: 0; }
}

/* avoid stacked padding between adjacent cream sections */
.ev { padding-bottom: calc(var(--sec) * 0.5); }
#stays { padding-top: calc(var(--sec) * 0.5); }
.dest { padding-bottom: calc(var(--sec) * 0.75); }
@media (max-width: 599px) { .head { flex-direction: column; align-items: flex-start; gap: 16px; } .head .link-arrow { margin-bottom: 0; } }

a.ev-info { color: inherit; }
a.ev-info > span { display: block; }
.food-link { display: flex; flex-direction: column; gap: 12px; color: inherit; }


/* ============================================================
   WEATHER ACROSS SYRIA (city photo panel; a new city grows out of its tab)
   ============================================================ */
.wxh { padding: 0 0 var(--sec); }
.wxh-wrap { margin-inline: 12px; }
.wxh-panel {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); background: var(--plum); color: var(--white);
  min-height: min(640px, 88dvh); padding: clamp(24px, 3.5vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 28px;
}
.wxh-bg, .wxh-layer { position: absolute; inset: 0; }
.wxh-bg { z-index: -1; }
.wxh-layer { overflow: hidden; background: var(--plum); }
.wxh-layer img { width: 100%; height: 100%; object-fit: cover; }
/* Plum scrim: darker at the top (tabs) and bottom (city, temperature, strip), so copy reads on any photo. */
.wxh-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(42, 27, 61, 0.6) 0%, rgba(42, 27, 61, 0.1) 30%, rgba(42, 27, 61, 0.15) 50%, rgba(42, 27, 61, 0.88) 100%);
}

.wxh-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.wxh-head { display: flex; flex-direction: column; gap: 6px; }
.wxh-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.01em; }
.wxh-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.wxh-more .icon { font-size: 16px; transition: transform 0.25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .wxh-more:hover { color: var(--white); } .wxh-more:hover .icon { transform: translateX(3px); } }

.wxh-tabs {
  display: flex; gap: 2px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 999px;
  background: rgba(42, 27, 61, 0.42); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.wxh-tabs::-webkit-scrollbar { display: none; }
.wxh-tab { position: relative; flex-shrink: 0; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--white); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color 0.2s var(--ease), transform 0.16s var(--ease); }
.wxh-tab[aria-pressed="true"] { color: var(--plum); }
.wxh-tab:active { transform: scale(0.97); }
.wxh-tab-pill { position: absolute; inset: 0; border-radius: 999px; background: var(--white); }
.wxh-tab-label { position: relative; }
@media (prefers-reduced-motion: reduce) { .wxh-tab[aria-pressed="true"] { background: var(--white); } }
@media (hover: hover) and (pointer: fine) { .wxh-tab[aria-pressed="false"]:hover { background: rgba(255, 255, 255, 0.14); } }

/* City name bottom-left, temperature bottom-right, on one baseline */
.wxh-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; align-self: end; }
.wxh-city { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; font-size: clamp(52px, 9vw, 136px); }
.wxh-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.wxh-mask > span { display: inline-block; will-change: transform; }
.wxh-now { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: end; transition: opacity 0.2s var(--ease); }
.wxh-now[data-loading="true"] { opacity: 0.55; }
.wxh-temp { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; font-size: clamp(56px, 7vw, 104px); }
.wxh-temp .icon { font-size: clamp(36px, 4vw, 56px); color: var(--blush); }
.wxh-cond { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; font-size: 15px; font-weight: 500; }
.wxh-cond span { color: rgba(255, 255, 255, 0.78); font-weight: 400; }
.wxh-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; font-size: 15px; }
.wxh-note button { border: 0; background: none; padding: 0; color: var(--white); font-weight: 600; text-decoration: underline; }

/* Frosted 7-day strip across the bottom */
.wxh-days {
  list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); transition: opacity 0.2s var(--ease);
}
.wxh-days[data-loading="true"] { opacity: 0.55; }
@media (prefers-reduced-transparency: reduce) { .wxh-days, .wxh-tabs { background: rgba(42, 27, 61, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.wxh-days li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border-radius: var(--r-sm); font-size: 13px; text-align: center; }
.wxh-days li:first-child { background: rgba(255, 255, 255, 0.14); }
.wxh-day { font-weight: 600; }
.wxh-days .icon { font-size: 26px; color: var(--white); }
.wxh-range { color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
.wxh-range b { color: var(--white); font-weight: 600; }
.wxh-rain { font-size: 12px; color: var(--blush); }

@media (max-width: 767px) {
  .wxh-wrap { margin-inline: 8px; }
  .wxh-panel { border-radius: var(--r-md); min-height: 0; gap: 20px; padding-top: 20px; }
  .wxh-top { flex-direction: column; }
  .wxh-tabs { align-self: stretch; }
  .wxh-main { padding-top: 140px; flex-direction: column; align-items: flex-start; }
  .wxh-now { align-items: flex-start; text-align: start; }
  .wxh-cond, .wxh-note { justify-content: flex-start; }
  .wxh-days { padding: 4px; gap: 0; }
  .wxh-days li { padding: 10px 0; font-size: 11px; gap: 3px; }
  .wxh-days .icon { font-size: 20px; }
  .wxh-range { display: flex; flex-direction: column; }
  .wxh-rain { font-size: 10px; }
}

/* ============================================================
   WATCH SYRIA (featured video + list)
   ============================================================ */
.vids { padding: var(--sec) 0; }
.vids-title { margin-bottom: clamp(24px, 3vw, 40px); }
.vids-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.vids-player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--plum); }
.vids-poster, .vids-poster .ph, .vids-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vids-play {
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 999px; border: 0; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92); color: var(--rose); box-shadow: 0 10px 30px rgba(42, 27, 61, 0.28); transition: transform 0.2s var(--ease), background-color 0.2s;
}
.vids-play .icon { font-size: 40px; }
.vids-play:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .vids-play:hover { transform: scale(1.06); background: var(--white); } }
.vids-name { margin-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em; line-height: 1.15; }
.vids-desc { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--plum-600); max-width: 60ch; }
.vids-desc span { font-weight: 600; color: var(--rose); margin-inline-end: 8px; }

.vids-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vids-item { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; padding: 8px; border: 0; border-radius: var(--r-sm); background: transparent; text-align: start; transition: background-color 0.2s var(--ease); }
.vids-item[aria-pressed="true"] { background: var(--white); box-shadow: var(--shadow-1); }
@media (hover: hover) and (pointer: fine) { .vids-item[aria-pressed="false"]:hover { background: var(--sand-50); } }
.vids-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xs); overflow: hidden; background: var(--sand-50); }
.vids-thumb .ph { position: absolute; inset: 0; }
.vids-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vids-item-text strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.vids-item-text small { font-size: 13px; color: var(--mauve-500); }
@media (max-width: 899px) { .vids-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .vids-item { grid-template-columns: 104px minmax(0, 1fr); } .vids-play { width: 60px; height: 60px; } .vids-play .icon { font-size: 32px; } }