/* Saudi Arabia hall: hero, number tiles, destination mosaic, cards (existing palette and tokens only) */
.sa-hero { position: relative; color: #fff; background: linear-gradient(180deg, rgba(7, 24, 47, .55), rgba(10, 35, 66, .94)), var(--head-img) center 40% / cover, var(--pine); padding-block: clamp(2.4rem, 6vw, 4.4rem) clamp(2rem, 4vw, 3rem); }
.sa-hero .page-back { color: rgba(255, 255, 255, .8); }
.sa-hero-in { display: grid; gap: .8rem; justify-items: start; }
.sa-kicker { display: inline-flex; gap: .4rem; align-items: center; font-size: .85rem; font-weight: 600; padding: .3rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .14); color: var(--sun); }
.sa-title { font: 700 clamp(2rem, 5.4vw, 3.4rem)/1.15 var(--f-display); margin: 0; color: #fff; }
.sa-sub { max-width: 60ch; margin: 0; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.7; color: rgba(255, 255, 255, .88); }
.sa-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.sa-hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); }

.sa-nav { display: flex; gap: .5rem; overflow-x: auto; padding-block: .9rem; scrollbar-width: none; position: sticky; top: var(--hdr-h, 64px); z-index: 20; background: var(--bg); }
.sa-nav::-webkit-scrollbar { display: none; }
.sa-nav .chip { flex: none; text-decoration: none; }
.sa-sec { padding-block: 1.6rem; display: grid; gap: 1rem; scroll-margin-top: calc(var(--hdr-h, 64px) + 3.5rem); }
.sa-sec > h2, .sa-sec > p, .sa-sec > h3 { margin: 0; }
.sa-sec .h3 { display: flex; gap: .5rem; align-items: center; }
.sa-sec .h3 .ic { color: var(--accent); }
.sa-sub-h { margin-top: .6rem !important; }
.sa-src { margin: 0; }
.sa-src a { color: var(--accent-2); }

.sa-stats, .sa-goals, .sa-cards { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.sa-stat, .sa-goal, .sa-card { display: grid; gap: .35rem; align-content: start; }
.sa-ic { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent-2); }
.sa-num { font: 700 clamp(1.7rem, 4vw, 2.2rem)/1.1 var(--f-display); color: var(--pine); }
.sa-lbl { color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.sa-up { justify-self: start; }
.sa-bar { height: 8px; border-radius: 999px; background: var(--line); position: relative; overflow: hidden; margin-top: .3rem; }
.sa-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--fill); background: linear-gradient(90deg, var(--accent), var(--sun)); border-radius: inherit; }

.sa-dests { display: grid; gap: .9rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sa-dest { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--pine); min-height: 220px; isolation: isolate; }
.sa-dest.big { grid-column: span 2; grid-row: span 2; min-height: 340px; }
.sa-pic, .sa-pic picture, .sa-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-dest::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 35%, rgba(7, 24, 47, .88)); }
.sa-dest-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 1rem 1.1rem; color: #fff; }
.sa-dest-body h3 { margin: 0 0 .25rem; font: 600 1.2rem/1.3 var(--f-display); color: #fff; }
.sa-dest-body p { margin: 0; font-size: .88rem; line-height: 1.55; color: rgba(255, 255, 255, .88); }
@media (max-width: 800px) { .sa-dests { grid-template-columns: minmax(0, 1fr); } .sa-dest.big { grid-column: auto; grid-row: auto; min-height: 260px; } }

.sa-card h3 { margin: 0; font: 600 1.05rem/1.35 var(--f-display); }
.sa-card p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.65; }
.sa-ev { padding: 0; overflow: hidden; align-content: start; }
.sa-pad { padding: 1rem 1.1rem 0; margin: 0; }
.sa-ev > .sa-pad:last-child { padding-block: .8rem 1.1rem; display: grid; gap: .35rem; }
.sa-ev > .sa-ic.sa-pad { margin: 1rem 1.1rem 0; padding: 0; }
.sa-ev-pic { aspect-ratio: 16 / 9; background: var(--pine); }
.sa-ev-pic picture, .sa-ev-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-hero + .sa-nav + .sa-sec { padding-top: .6rem; }
.ticket-list { display: grid; gap: .8rem; }

html[data-theme="dark"] .sa-num { color: var(--accent-2); }
html[data-theme="dark"] .sa-nav { background: var(--bg); }

/* Home: the Saudi hall band, Saudi green and gold over a landmark photo */
.sa-hx { --sa-green: #006c35; --sa-gold: #e0b84c; position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #00321a; margin-top: 1.5rem; scroll-margin-top: 72px; }
.sa-hx-bg { position: absolute; inset: 0; z-index: -1; }
.sa-hx-bg img, .sa-hx-bg picture { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; }
.sa-hx-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(0, 50, 26, .94) 0%, rgba(0, 108, 53, .72) 55%, rgba(0, 40, 20, .35) 100%); }
[dir="ltr"] .sa-hx-bg::after { background: linear-gradient(to right, rgba(0, 50, 26, .94) 0%, rgba(0, 108, 53, .72) 55%, rgba(0, 40, 20, .35) 100%); }
.sa-hx-in { display: grid; gap: .9rem; justify-items: start; padding-block: clamp(2.2rem, 6vw, 4rem); }
.sa-hx .sa-kicker { background: rgba(0, 0, 0, .35); border: 1px solid var(--sa-gold); color: var(--sa-gold); }
.sa-hx-t { margin: 0; max-width: 26ch; font: 700 clamp(1.6rem, 4.2vw, 2.8rem)/1.25 var(--f-display); color: #fff; }
.sa-hx-d { margin: 0; max-width: 60ch; font-size: clamp(1.0625rem, 1.6vw, 1.125rem); line-height: 1.75; color: #fff; }
.sa-hx-stats { width: 100%; margin: .6rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 2px solid var(--sa-gold); background: rgba(0, 30, 15, .55); }
.sa-hx-stats > div { padding: 1rem clamp(.6rem, 2vw, 1.4rem); min-width: 0; }
.sa-hx-stats > div + div { border-inline-start: 1px solid rgba(224, 184, 76, .4); }
.sa-hx-stats dt { font: 800 clamp(1.6rem, 4.4vw, 2.7rem)/1.1 var(--f-display); color: var(--sa-gold); }
.sa-hx-stats dd { margin: .35rem 0 0; font-size: .95rem; line-height: 1.45; color: #fff; }
.sa-hx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: .4rem; }
.sa-hx-btn { background: var(--sa-gold); color: #002614; border: 0; font-weight: 700; }
.sa-hx-btn:hover { background: #f0cd6a; color: #002614; }
.sa-hx .caption { color: rgba(255, 255, 255, .85); }
.sa-hx .caption a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .sa-hx-bg::after, [dir="ltr"] .sa-hx-bg::after { background: linear-gradient(180deg, rgba(0, 60, 30, .7), rgba(0, 50, 26, .92)); }
  .sa-hx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-hx-stats > div:nth-child(odd) { border-inline-start: 0; }
  .sa-hx-stats > div:nth-child(n + 3) { border-top: 1px solid rgba(224, 184, 76, .4); }
}

/* The Saudi hall link in the top bar: green pill with a gold icon */
.nav-links a.nav-sa { display: inline-flex; position: relative; align-items: center; gap: .35rem; background: #006c35; color: #fff; box-shadow: inset 0 0 0 1px #e0b84c; }
.nav-links a.nav-sa svg { color: #e0b84c; }
.nav-links a.nav-sa:hover, .nav-links a.nav-sa.active { background: #00552a; color: #fff; }
.drawer-item[href="/saudi"], .drawer-item[href="/#saudi"] { color: #006c35; font-weight: 600; }
[data-theme="dark"] .drawer-item[href="/saudi"], [data-theme="dark"] .drawer-item[href="/#saudi"] { color: #4fc283; }