/* =====================================================================
   /web-design-sharjah (EN, 2026-11-11) — a thin page layer loaded after
   service.css (sv-* sections) and locations.css (loc-* hero photo, prose,
   free-zone tiles, link groups, sources). Prefixed sh-*:

   .sh-hero     the long H1 sized for the poster
   .sh-week     Sharjah government week strip (Mon–Thu / Fri–Sun); decorative
                restatement of the paragraph beside it
   .sh-vol      search-volume bars (390 / 710 / 53,500); decorative restatement
   .sh-zones    free-zone tiles: first letter shown as a capital (DOM text verbatim)
   .sh-sell     three-check ticket: one column on phones/tablets, three on desktop
   .sh-pk       package tickets: list items start with a capital (DOM text verbatim)
   .sh-src      source type tag (official / secondary)
   ===================================================================== */

/* ---------- hero: a 70-character H1 on the poster ---------- */
.sh-hero .ph__title.loc-hero__title { font-size: clamp(36px, 8.4vw, 64px); line-height: .94; }
@media (min-width: 768px) { .sh-hero .ph__title.loc-hero__title { font-size: clamp(56px, 7.2vw, 74px); } }
@media (min-width: 1024px) { .sh-hero .ph__title.loc-hero__title { font-size: clamp(60px, 5.4vw, 94px); } }
.sh-hero .ph__lead { max-width: 36em; }

/* ---------- prose bands: room for the corner tab above a full-width heading (phones/tablets) ---------- */
@media (max-width: 1023px) { .sh-prose .loc-prose__head { padding-top: clamp(20px, 3.4vw, 28px); } }

/* ---------- licensing band: H2, then the H3 beside its lede, then copy beside the two consequences ---------- */
.sh-licence .sh-licence__h2 { margin-bottom: clamp(10px, 1.6vw, 22px); }
.sh-licence__aside { display: grid; gap: 16px; align-content: start; }
.sh-licence__aside > p { font-size: 17px; line-height: 1.65; }
.sh-licence__aside > .loc-licence__k { font: 400 clamp(24px, 2.2vw, 32px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
@media (min-width: 1024px) {
  .sh-licence .loc-licence__more { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; max-width: none; }
}

/* ---------- sectors: 3 + 2 on desktop, 2 + 2 + 1 on tablets (no orphan card) ---------- */
@media (min-width: 700px) and (max-width: 1023px) {
  .sh-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-sectors > li:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .sh-sectors { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sh-sectors > li { grid-column: span 2; }
  .sh-sectors > li:nth-child(n+4) { grid-column: span 3; }
}

/* ---------- Sharjah government week ---------- */
.sh-week { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); gap: 10px; margin-top: 6px; max-width: 640px; }
.sh-week__grp { display: grid; gap: 8px; align-content: start; }
.sh-week__days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.sh-week__days li { display: grid; place-items: center; min-height: clamp(54px, 6vw, 76px); border-radius: 14px; font: 400 clamp(17px, 1.9vw, 26px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: .02em; }
.sh-week__grp--on li { background: var(--deep); color: var(--cream); }
.sh-week__grp--on li:last-child { background: var(--b2); color: var(--ink); }
.sh-week__grp--off li { color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in oklab, var(--ink) 7%, transparent) 6px 7px); }
.sh-week__k { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }

/* ---------- search volume bars (deep band) ---------- */
.sh-vol { display: grid; gap: 16px; margin-top: clamp(4px, 1vw, 10px); padding: clamp(18px, 2vw, 26px); border-radius: var(--r-lg); background: color-mix(in oklab, var(--cream) 6%, transparent); box-shadow: inset 0 0 0 1px var(--rule); }
.sh-vol__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: baseline; }
.sh-vol__k { font-size: 14px; font-weight: 650; line-height: 1.3; color: var(--fg-2); }
.sh-vol__n { font: 400 clamp(26px, 2.6vw, 38px)/1 var(--f-num); color: var(--b2-on-deep); font-variant-numeric: tabular-nums; }
.sh-vol__row:last-of-type .sh-vol__n { color: var(--fg); }
.sh-vol__bar { grid-column: 1 / -1; height: 10px; border-radius: 999px; background: color-mix(in oklab, var(--cream) 12%, transparent); overflow: hidden; }
.sh-vol__bar i { display: block; height: 100%; width: max(8px, calc(var(--v, 0) * 100%)); border-radius: inherit; background: var(--b2); transform-origin: 0 50%; }
.sh-vol__row:last-of-type .sh-vol__bar i { background: color-mix(in oklab, var(--cream) 55%, transparent); }
[dir="rtl"] .sh-vol__bar i { transform-origin: 100% 50%; }
.sh-vol__foot { font-size: 12.5px; line-height: 1.4; color: var(--fg-2); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sh-vol__bar i { animation: shGrow linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
  }
}
@keyframes shGrow { from { transform: scaleX(0); } }

/* ---------- copy kept verbatim, shown with a leading capital ---------- */
.sh-zones span::first-letter, .sh-pk .tk__list span::first-letter { text-transform: uppercase; }

/* ---------- three-check ticket (selling online) ---------- */
.sh-sell .sv-ticket__list { grid-template-columns: minmax(0, 1fr); }
.sh-sell .sv-check, .sh-sell .sv-check__body { align-content: start; }
.sh-sell .sv-check p { max-width: 68ch; }
.sh-sell .sv-check p em { font-style: italic; }
@media (min-width: 1024px) {
  .sh-sell .sv-ticket__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .sh-sell .sv-check { grid-template-columns: 1fr; gap: 12px; padding-block: 22px; border-bottom: 0; }
}

/* ---------- package tickets ---------- */
.sh-pk .tk__label + .tk__list { margin-top: -6px; }
.sh-pk__note { margin-top: clamp(26px, 3vw, 40px); max-width: 78ch; color: var(--fg-2); font-size: 16px; line-height: 1.7; }
.sh-pk__note a { color: var(--acc); font-weight: 650; text-decoration-thickness: 1.5px; }

/* ---------- sources ---------- */
.sh-src__tag { display: inline-block; margin-inline-start: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.loc-sources__list .sh-src__sep { color: var(--fg-2); padding-inline: 4px; }

@media (max-width: 420px) {
  .sh-week { gap: 8px; }
  .sh-week__days { gap: 4px; }
  .sh-week__days li { border-radius: 10px; }
}