/* locations.css — Location pages (/web-developer-basra-iraq/, /web-developer-turkey/).
   Shares tokens, nav, cards and footer with main.css; reuses the archive hero
   from projects.css. Only the pieces those two files do not already provide
   live here. */

/* Tighter vertical rhythm than the homepage: these pages are read top to bottom */
.location-page main section{padding:84px 0}
.location-page main section.loc-hero{padding-block:132px 64px}
.location-page .section-intro{margin-bottom:40px}

.loc-hero .archive-title{max-width:18ch}
.loc-hero .section-subtitle{max-width:60ch;font-size:1.1rem}
.loc-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* The stat strip comes from the archive page, where every value is a short
   number. Here the values are words, so size them down and never let one wrap. */
.loc-hero .archive-stats dd{font-size:1.5rem;white-space:nowrap}

/* Two-column body: prose plus a sticky facts rail */
.loc-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 64px;align-items:start}
.loc-prose > * + *{margin-top:18px}
.loc-prose h2{font-size:clamp(1.8rem,3.2vw,2.6rem);letter-spacing:-0.035em;margin-top:8px}
.loc-prose h3{font-size:1.2rem;letter-spacing:-0.02em;margin-top:32px}
.loc-prose p{color:var(--muted);font-size:1.04rem;max-width:66ch}
.loc-prose strong{color:var(--text);font-weight:600}
.loc-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.loc-facts{
  position:sticky;top:110px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px 30px;
}
.loc-facts dl{display:grid;gap:14px}
.loc-facts dt{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-bottom:3px;
}
.loc-facts dd{color:var(--text);font-size:.98rem}
.loc-facts dd a{color:var(--accent);white-space:nowrap}
.loc-facts .loc-facts-note{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--border);
  font-size:.88rem;color:var(--muted);
}

/* Native-language block (Arabic / Turkish): summary on one side, service list on the other */
.loc-native{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 56px;align-items:start;
  padding:40px 44px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
}
.loc-native::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,176,102,.55),transparent);
}
.loc-native h2{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-0.03em;line-height:1.2;margin-bottom:18px}
.loc-native p{color:var(--muted);font-size:1.03rem;max-width:62ch}
.loc-native p + p{margin-top:12px}
.loc-native a{color:var(--accent);white-space:nowrap}
.loc-native-list{list-style:none;align-self:center}
.loc-native-list li{
  display:flex;align-items:center;gap:12px;padding:11px 0;
  font-size:.98rem;color:var(--text);border-bottom:1px dashed var(--border);
}
.loc-native-list li:last-child{border-bottom:0}
.loc-native-list li::before{content:'';width:5px;height:5px;background:var(--accent);transform:rotate(45deg);flex:none}
/* Arabic: system Arabic faces, no tracking (letter-spacing breaks the joined script), more leading */
.loc-native[lang="ar"]{font-family:'Segoe UI','Geeza Pro','Noto Naskh Arabic',Tahoma,var(--font-body);line-height:1.9}
.loc-native[lang="ar"] h2,.loc-native[lang="ar"] .card-tag{font-family:inherit;letter-spacing:0;line-height:1.5}
.loc-native[lang="ar"] .card-tag{font-size:.9rem}

/* Inline links inside running text on these pages */
.faq-aside .section-subtitle a,.loc-facts-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* Closing call to action */
.loc-cta{
  position:relative;overflow:hidden;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;
  padding:40px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--surface),var(--bg));
}
.loc-cta::before{
  content:'';position:absolute;inset:auto -10% -140% -10%;height:200%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,138,31,.13),transparent);
}
.loc-cta > *{position:relative;z-index:1}
.loc-cta h2{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-0.035em;max-width:22ch}
.loc-cta p{color:var(--muted);margin-top:10px;max-width:52ch}
.loc-cta-actions{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:992px){
  .loc-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  .loc-facts{position:static}
  .loc-native{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
  .loc-hero .archive-stats{display:grid;grid-template-columns:auto minmax(0,1fr) auto}
  .loc-hero .archive-stats div{padding:12px 14px}
  .loc-hero .archive-stats div:first-child{padding-left:0}
  .loc-hero .archive-stats dt{font-size:.58rem;letter-spacing:.1em}
  .loc-hero .archive-stats dd{font-size:1.15rem;letter-spacing:-0.02em}
}
@media (max-width:640px){
  .location-page main section{padding:56px 0}
  .location-page main section.loc-hero{padding-block:104px 40px}
  .loc-native,.loc-cta{padding:24px 22px}
}