/* ============================================================
   AFG City Guide — pages. Navy/gold, logical properties (RTL+LTR),
   mobile first. Uses the tokens from main.css.
   ============================================================ */

.cg-h1{ font-family:var(--f-display); font-weight:var(--fw-head); font-size:var(--fs-h1); margin:0 0 .35em; color:var(--text); text-wrap:balance; }
.cg-h2{ font-family:var(--f-display); font-weight:var(--fw-head); font-size:var(--fs-h3); margin:0; color:var(--text); }
.cg-h3{ font-family:var(--f-display); font-weight:var(--fw-head); font-size:var(--fs-h4); margin:1.6em 0 .6em; color:var(--text); }
.cg-lead{ font-size:var(--fs-lg); color:var(--text-2); max-width:65ch; margin:0; }
.cg-num, .cg-hero__facts dd, .cg-bars b{ font-variant-numeric:tabular-nums; }
.cg-empty{ color:var(--text-3); padding:22px; border:1px dashed var(--line); border-radius:var(--radius-lg); }
.cg-note{ font-size:var(--fs-sm); color:var(--text-2); padding:14px 18px; border-inline-start:2px solid var(--gold); background:rgba(197,165,114,.06); border-radius:var(--radius); margin:18px 0; }
.cg-note--warn{ border-color:#d9a441; background:rgba(217,164,65,.1); color:var(--text); }
.cg-note--gold a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.cg-source{ font-size:var(--fs-xs); color:var(--text-3); }
.cg-source a{ color:var(--gold-light); text-decoration:underline; text-underline-offset:2px; }
.cg-updated{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--fs-sm); color:var(--text-3); margin:14px 0 0; }
.cg-updated svg{ width:16px; height:16px; color:var(--gold); }

/* ---------- Breadcrumbs ---------- */
.cg-crumbs ol{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:6px; font-size:var(--fs-xs); color:var(--text-3); }
.cg-crumbs li:not(:last-child)::after{ content:"/"; margin-inline-start:6px; color:var(--gold-deep); }
.cg-crumbs a{ color:var(--text-2); }
.cg-crumbs a:hover{ color:var(--gold); }
.cg-crumbs [aria-current] span{ color:var(--text); }

/* ---------- Page head / hero ---------- */
.cg-head, .cg-hero{ position:relative; padding-top:calc(var(--header-h) + clamp(36px,5vw,70px)); padding-bottom:clamp(30px,4vw,54px); border-bottom:1px solid var(--line-soft); isolation:isolate; }
.cg-head::before, .cg-hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(90% 120% at 85% 0%, rgba(197,165,114,.12), transparent 60%), linear-gradient(180deg,var(--bg-2),var(--bg)); }
.cg-hero{ padding-bottom:clamp(40px,5vw,70px); }
.cg-hero::after{ content:""; position:absolute; inset:0; z-index:-2; background:var(--cg-hero, none) center/cover no-repeat; opacity:.28; }
.cg-hero__facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; margin:32px 0 0; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; max-width:900px; }
.cg-hero__facts div{ background:rgba(10,24,40,.82); padding:16px 18px; }
.cg-hero__facts dt{ font-size:var(--fs-xs); color:var(--text-3); margin:0 0 6px; }
.cg-hero__facts dd{ margin:0; color:var(--gold-light); font-weight:var(--fw-head); font-size:1.05rem; }

/* ---------- Layout ---------- */
.cg-hub{ padding-block:26px 40px; }
.cg-layout{ display:grid; grid-template-columns:1fr; gap:28px; padding-block:26px 50px; }
.cg-main{ min-width:0; }
@media (min-width:1025px){
  .cg-layout{ grid-template-columns:260px minmax(0,1fr); gap:48px; }
  .cg-side{ position:sticky; top:calc(var(--header-h) + 20px); align-self:start; }
}

/* ---------- Guide navigation (sidebar desktop / rail mobile) ---------- */
.cg-gnav__title{ font-size:var(--fs-xs); color:var(--gold); margin:0 0 10px; letter-spacing:.06em; }
.cg-gnav ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.cg-gnav a{ display:block; padding:9px 12px; border-radius:var(--radius); color:var(--text-2); font-size:var(--fs-sm); border-inline-start:2px solid transparent; }
.cg-gnav a:hover{ color:var(--text); background:var(--surface); }
.cg-gnav a.is-active{ color:var(--text); background:var(--surface); border-inline-start-color:var(--gold); }
.cg-rail .cg-gnav__title{ display:none; }
.cg-rail .cg-gnav ul, .cg-side .cg-gnav ul{ grid-auto-flow:row; }
.cg-rail .cg-gnav ul{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-block:4px 14px; scroll-snap-type:x proximity; }
.cg-rail .cg-gnav ul::-webkit-scrollbar{ display:none; }
.cg-rail .cg-gnav a{ white-space:nowrap; border:1px solid var(--line); border-radius:40px; padding:8px 16px; scroll-snap-align:start; }
.cg-rail .cg-gnav a.is-active{ border-color:var(--gold); }
@media (max-width:1024px){
  .cg-side .cg-gnav__title{ display:none; }
  .cg-side .cg-gnav ul{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:6px; }
  .cg-side .cg-gnav ul::-webkit-scrollbar{ display:none; }
  .cg-side .cg-gnav a{ white-space:nowrap; border:1px solid var(--line); border-radius:40px; padding:8px 16px; }
  .cg-side .cg-gnav a.is-active{ border-color:var(--gold); }
}

/* ---------- Sections ---------- */
.cg-section{ padding-block:clamp(34px,5vw,64px); border-bottom:1px solid var(--line-soft); }
.cg-main .cg-section{ padding-block:28px; }
.cg-section:last-child{ border-bottom:0; }
.cg-section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.cg-section__head .cg-lead{ margin-top:8px; font-size:var(--fs-base); }
.cg-more{ color:var(--gold); font-size:var(--fs-sm); white-space:nowrap; }
.cg-more:hover{ color:var(--gold-light); }
.cg-cross{ margin-top:24px; }
.cg-cross a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Guide cards (hub) ---------- */
.cg-gcards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px; }
.cg-gcard{ position:relative; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:16px; row-gap:4px; align-items:center;
  padding:22px 20px; background:linear-gradient(160deg,var(--surface),var(--bg-2)); border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.cg-gcard::before{ content:""; position:absolute; inset-block-start:0; inset-inline:20px; height:1px; background:var(--gold-grad); opacity:0; transition:opacity var(--dur) var(--ease); }
.cg-gcard:hover{ border-color:var(--gold-deep); transform:translateY(-2px); }
.cg-gcard:hover::before{ opacity:1; }
.cg-gcard__ico{ grid-row:1 / span 2; width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--gold); }
.cg-gcard__ico svg{ width:22px; height:22px; }
.cg-gcard__t{ color:var(--text); font-family:var(--f-display); font-weight:var(--fw-head); font-size:1.2rem; line-height:1.3; }
.cg-gcard__h{ grid-column:2; color:var(--text-2); font-size:var(--fs-sm); line-height:1.5; }
.cg-gcard__go{ grid-row:1 / span 2; grid-column:3; color:var(--gold); }
.cg-gcard__go svg{ width:18px; height:18px; }
.afg-ar .cg-gcard__go svg, .afg-ar .cg-more span{ transform:scaleX(-1); }

/* ---------- Card grid ---------- */
.cg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:16px; }
.cg-card{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden; transition:border-color var(--dur) var(--ease); }
.cg-card:hover{ border-color:var(--line); }
.cg-card__media{ aspect-ratio:16/10; overflow:hidden; background:var(--surface-2); }
.cg-card__media img{ width:100%; height:100%; object-fit:cover; }
.cg-card__body{ padding:16px 18px 18px; display:grid; gap:6px; }
.cg-card__title{ font-family:var(--f-display); font-weight:var(--fw-head); font-size:1.2rem; margin:0; line-height:1.35; }
.cg-card__title a::after{ content:""; position:absolute; inset:0; }
.cg-card__title a:hover{ color:var(--gold-light); }
.cg-card__meta{ font-size:var(--fs-xs); color:var(--gold-light); margin:0; }
.cg-card__ex{ font-size:var(--fs-sm); margin:0; color:var(--text-2); }
.cg-card--afg{ border-color:var(--gold-deep); background:linear-gradient(160deg,rgba(197,165,114,.14),var(--surface) 55%); }
.cg-badge{ justify-self:start; font-size:11px; font-weight:600; color:var(--bg); background:var(--gold-grad); padding:3px 10px; border-radius:30px; }

/* ---------- Tables ---------- */
.cg-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); -webkit-overflow-scrolling:touch; }
.cg-table-wrap:focus-visible{ outline:2px solid var(--gold); }
.cg-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:620px; }
.cg-table th, .cg-table td{ padding:13px 16px; text-align:start; vertical-align:top; border-bottom:1px solid var(--line-soft); }
.cg-table thead th{ font-size:var(--fs-xs); color:var(--gold); font-weight:500; background:var(--bg-2); position:sticky; top:0; }
.cg-table tbody tr:hover{ background:rgba(255,255,255,.02); }
.cg-table tr.is-afg th{ color:var(--gold-light); }
.cg-table a{ color:var(--text); }
.cg-table a:hover{ color:var(--gold); }
.cg-table ul{ margin:0; padding-inline-start:18px; }
.cg-table--compare td{ min-width:160px; }

/* ---------- Price bars ---------- */
.cg-bars{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:12px; }
.cg-bars li{ display:grid; grid-template-columns:minmax(90px,160px) 1fr auto; gap:14px; align-items:center; font-size:var(--fs-sm); }
.cg-bars a{ color:var(--text); }
.cg-bars__track{ position:relative; height:8px; background:var(--surface); border-radius:8px; }
.cg-bars__track span{ position:absolute; inset-block:0; inset-inline-start:var(--lo); inset-inline-end:calc(100% - var(--hi)); min-width:8px; background:var(--gold-grad); border-radius:8px; }
.cg-bars b{ color:var(--gold-light); font-weight:500; font-size:var(--fs-xs); }
@media (max-width:600px){ .cg-bars li{ grid-template-columns:1fr auto; } .cg-bars__track{ grid-column:1 / -1; grid-row:2; } }

/* ---------- Facts / lists ---------- */
.cg-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:0 0 28px; }
.cg-facts div{ padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-2); }
.cg-facts dt{ font-size:var(--fs-xs); color:var(--text-3); margin-bottom:6px; }
.cg-facts dd{ margin:0; color:var(--text); font-weight:500; }
.cg-facts dd a{ color:var(--gold-light); }
.cg-facts small{ display:block; margin-top:6px; }
.cg-figure{ margin:0 0 26px; border-radius:var(--radius-lg); overflow:hidden; }
.cg-list{ padding-inline-start:20px; color:var(--text-2); }
.cg-list li{ margin-bottom:6px; }
.cg-proscons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.cg-list--pro li::marker{ color:#6fc2a0; }
.cg-list--con li::marker{ color:#e07a7a; }
.cg-travel{ list-style:none; padding:0; margin:0 0 20px; display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden; }
.cg-travel li{ display:flex; justify-content:space-between; gap:12px; padding:12px 16px; background:var(--bg); }
.cg-travel b{ color:var(--gold-light); font-weight:500; }
.cg-rich{ margin-block:30px; }

/* ---------- Chips / pager ---------- */
.cg-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.cg-chips a{ padding:7px 15px; border:1px solid var(--line); border-radius:40px; font-size:var(--fs-sm); color:var(--text-2); }
.cg-chips a:hover, .cg-chips a[aria-current]{ color:var(--text); border-color:var(--gold); }
.cg-pager{ display:flex; gap:6px; justify-content:center; margin-top:30px; }
.cg-pager a{ min-width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--radius); }
.cg-pager a[aria-current]{ border-color:var(--gold); color:var(--gold); }

/* ---------- Downloads ---------- */
.cg-downloads{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.cg-dl{ display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-2); }
.cg-dl__ext{ width:52px; height:52px; display:grid; place-items:center; border:1px solid var(--gold-deep); border-radius:var(--radius); color:var(--gold); font-size:12px; font-weight:600; letter-spacing:.05em; }
.cg-dl__body{ display:grid; gap:3px; min-width:0; }
.cg-dl__body b{ color:var(--text); font-weight:500; }
.cg-dl__body small{ color:var(--text-3); font-size:var(--fs-xs); }
@media (max-width:600px){ .cg-dl{ grid-template-columns:auto 1fr; } .cg-dl__btn{ grid-column:1 / -1; justify-content:center; } }

/* ---------- FAQ ---------- */
.cg-faq{ display:grid; gap:10px; }
.cg-faq details{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-2); }
.cg-faq summary{ cursor:pointer; list-style:none; padding:18px 20px; color:var(--text); font-weight:500; display:flex; justify-content:space-between; gap:16px; }
.cg-faq summary::-webkit-details-marker{ display:none; }
.cg-faq summary::after{ content:"+"; color:var(--gold); font-size:1.3rem; line-height:1; transition:transform var(--dur) var(--ease); }
.cg-faq details[open] summary::after{ transform:rotate(45deg); }
.cg-faq__a{ padding:0 20px 18px; color:var(--text-2); }

/* ---------- Related links ---------- */
.cg-related{ margin-top:40px; padding:26px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-2); }
.cg-related .cg-h3{ margin-top:0; }
.cg-related__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px 30px; }
.cg-related__group h3{ font-size:var(--fs-xs); color:var(--gold); font-weight:500; margin:0 0 10px; }
.cg-related__group ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cg-related__group a{ color:var(--text); font-size:var(--fs-sm); }
.cg-related__group a:hover{ color:var(--gold); }
.cg-related__group small{ display:block; color:var(--text-3); font-size:var(--fs-xs); }

/* ---------- AFG block ---------- */
.cg-afg{ margin-top:40px; padding:clamp(24px,4vw,42px); border:1px solid var(--gold-deep); border-radius:var(--radius-lg);
  background:radial-gradient(100% 140% at 100% 0%, rgba(197,165,114,.16), transparent 60%), var(--surface); }
.cg-afg--full{ margin-block:clamp(34px,5vw,64px); }
.cg-afg__head p{ max-width:60ch; margin:10px 0 0; }
.cg-afg__head .afg-eyebrow{ margin-bottom:12px; }
.cg-afg__projects{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:14px; margin:24px 0; }
.cg-afg__card{ display:grid; grid-template-columns:88px 1fr; gap:14px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-2); transition:border-color var(--dur) var(--ease); }
.cg-afg__card:hover{ border-color:var(--gold); }
.cg-afg__card img{ width:88px; height:88px; object-fit:cover; border-radius:var(--radius); }
.cg-afg__cardbody{ display:grid; gap:3px; }
.cg-afg__cardbody b{ color:var(--text); }
.cg-afg__cardbody small{ color:var(--text-3); }
.cg-afg__cardbody em{ font-style:normal; font-size:var(--fs-xs); color:var(--gold); }
.cg-afg__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.cg-afg-grid{ margin-bottom:30px; }

/* ---------- Cities index ---------- */
.cg-cities{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:18px; padding-block:30px 60px; }
.cg-city{ position:relative; min-height:260px; display:flex; align-items:flex-end; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); isolation:isolate; }
.cg-city img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.55; transition:transform .6s var(--ease); }
.cg-city::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 30%,rgba(10,24,40,.95)); }
.cg-city:hover img{ transform:scale(1.04); }
.cg-city__body{ display:grid; gap:4px; padding:22px; }
.cg-city__body b{ font-size:1.25rem; color:var(--text); }
.cg-city__body small{ color:var(--text-2); }
.cg-city__body em{ font-style:normal; color:var(--gold-light); font-size:var(--fs-sm); }

/* ---------- Map container + list fallback ---------- */
.cg-mapwrap{ display:grid; gap:14px; }
.cg-map{ position:relative; height:min(62vh,560px); min-height:360px; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-2); }
.cg-mapwrap--full .cg-map{ height:calc(100svh - var(--header-h) - 120px); min-height:460px; }
.cg-mapwrap--mini .cg-map{ height:300px; min-height:0; }
.cg-map__poster{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:24px; color:var(--text-2);
  background:repeating-linear-gradient(45deg, rgba(197,165,114,.035) 0 12px, transparent 12px 24px), var(--bg-2); }
.cg-map.is-loading .cg-map__poster p::after{ content:""; display:block; width:28px; height:28px; margin:16px auto 0; border:2px solid var(--line); border-top-color:var(--gold); border-radius:50%; animation:cgspin 1s linear infinite; }
@keyframes cgspin{ to{ transform:rotate(360deg); } }
.cg-maplist{ border:1px solid var(--line-soft); border-radius:var(--radius-lg); }
.cg-maplist summary{ cursor:pointer; padding:14px 18px; color:var(--text-2); font-size:var(--fs-sm); }
.cg-maplist__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; padding:0 18px 18px; }
.cg-maplist h3{ font-size:var(--fs-xs); color:var(--gold); margin:0 0 8px; }
.cg-maplist ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:var(--fs-sm); }
.cg-maplist a:hover{ color:var(--gold); }

@media (prefers-reduced-motion: reduce){
  .cg-gcard, .cg-city img{ transition:none; }
  .cg-map.is-loading .cg-map__poster p::after{ animation:none; }
}