/* services/rules-of-the-air.page.css  (replaces rules-of-the-air.css)
   Page-specific layer for Rules of the Air. Generic parts (progress bar, hero,
   stats, dividers, section spacing, gallery) come from /shared/cinematic.css;
   this file only holds RotA deltas + RotA-only components. */

/* ==========================================================================
   OVERRIDES on shared cine-* (keep RotA look identical to pre-refactor)
   ========================================================================== */
.cine-hero__bg { filter: saturate(0.85) contrast(1.08); }
.cine-hero__title { max-width: 18ch; }
.cine-hero__badge { display: inline-block; animation-delay: 300ms; }
.cine-stat__value {
  font-size: clamp(48px, 6vw, 88px);
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
}
.cine-stat__value sup { font-size: 0.4em; color: var(--gold); font-weight: 400; top: -0.6em; position: relative; }
.cine-divider__bg { filter: saturate(0.85) contrast(1.08); }
.cine-divider__overlay { background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.75) 100%); }
.cine-divider__caption { opacity: 0.65; }
.cine-gallery__cell { cursor: pointer; }
.cine-gallery__img { filter: saturate(0.88) contrast(1.06); }
.cine-gallery__cell:hover .cine-gallery__img { transform: scale(1.06); }
.cine-gallery__cell:hover .cine-gallery__tint { opacity: 0.18; }
@media (max-width: 760px) {
  .cine-hero__bg { inset: 0; transform: none !important; }
}

/* ==========================================================================
   5. ICON GRID (replaces bullet lists)
   ========================================================================== */
.roa-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 auto 28px auto;
  max-width: 1200px;
  padding: 0 32px;
}
.roa-icons--3 { grid-template-columns: repeat(4, 1fr); }
.roa-icon-card {
  position: relative;
  padding: 22px 18px 20px 18px;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.015);
  transition: border-color 320ms var(--ease-cine), transform 480ms var(--ease-cine), background 320ms var(--ease-cine);
  opacity: 0;
  transform: translateY(20px);
  min-height: 170px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.roa-icon-card.is-in {
  opacity: 1;
  transform: translateY(0);
}
.roa-icon-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px) scale(1.015);
  background: rgba(201,169,97,0.04);
}
.roa-icon-card__svg {
  width: 38px;
  height: 38px;
  stroke: var(--gold);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.roa-icon-card__text {
  font-family: "Inter Tight", sans-serif;
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
  letter-spacing: -0.005em;
}
.roa-icon-card__text strong { color: #fff; font-weight: 500; }

@media (max-width: 960px) {
  .roa-icons { grid-template-columns: repeat(2, 1fr); padding: 0 20px; }
}
@media (max-width: 480px) {
  .roa-icons { grid-template-columns: 1fr; }
  .roa-icon-card { min-height: 0; }
}

/* ==========================================================================
   6. BODY TYPOGRAPHY UPGRADES
   ========================================================================== */
.article-prose.roa-prose h2 {
  margin-top: 4em;
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.035em;
}
.article-prose.roa-prose h2:first-child { margin-top: 0; }

/* Drop-cap on first paragraph after each H2 */
.article-prose.roa-prose h2 + p::first-letter {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  color: var(--gold);
  float: left;
  font-size: 4.2em;
  line-height: 0.88;
  padding: 0.08em 0.14em 0 0;
  margin-bottom: -0.1em;
}

/* Full-width pull-quote */
.article-prose.roa-prose .pullquote {
  display: block;
  margin: 56px -80px;
  padding: 28px 36px;
  border-left: 3px solid var(--gold);
  background: rgba(201,169,97,0.04);
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.4;
  color: #fff;
  letter-spacing: -0.01em;
}
.article-prose.roa-prose .pullquote strong {
  font-family: "Inter Tight", sans-serif;
  font-style: normal;
  font-weight: 600;
  color: var(--gold);
}
@media (max-width: 980px) {
  .article-prose.roa-prose .pullquote { margin: 48px 0; }
}

/* ==========================================================================
   7. CTR MAP — "WHERE WE FLY"
   ========================================================================== */
.roa-map {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 88px 0;
  background: radial-gradient(ellipse at center, rgba(201,169,97,0.04), transparent 70%);
}
.roa-map__head {
  text-align: center;
  margin-bottom: 32px;
}
.roa-map__kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.roa-map__title {
  margin-top: 12px;
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.025em;
  color: #fff;
}
.roa-map__wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
}
.roa-map__svg {
  width: 100%;
  height: auto;
  display: block;
}
.roa-map__outline {
  fill: rgba(201,169,97,0.04);
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-linejoin: round;
  opacity: 0.7;
}
.roa-map__dot-group { cursor: pointer; }
.roa-map__dot-core {
  fill: var(--gold);
  transition: r 220ms var(--ease-cine);
}
.roa-map__dot-pulse {
  fill: var(--gold);
  opacity: 0.5;
  transform-origin: center;
  transform-box: fill-box;
  animation: roa-pulse 2.4s ease-in-out infinite;
}
.roa-map__dot-group:hover .roa-map__dot-core { r: 6; }
.roa-map__icao {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  fill: rgba(255,255,255,0.78);
  text-transform: uppercase;
  pointer-events: none;
}
.roa-map__dot-group:hover .roa-map__icao { fill: var(--gold); }
.roa-map__tip {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  fill: var(--gold);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms var(--ease-cine);
}
.roa-map__dot-group:hover .roa-map__tip { opacity: 1; }

@keyframes roa-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  60%  { transform: scale(2.4); opacity: 0;    }
  100% { transform: scale(2.4); opacity: 0;    }
}
.roa-map__legend {
  margin-top: 28px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 760px) {
  .roa-map { padding: 64px 0; }
  .roa-map__wrap { padding: 0 20px; }
}

/* ==========================================================================
   REDUCED MOTION (RotA-only; shared parts handled in cinematic.css)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .roa-icon-card { opacity: 1 !important; transform: none !important; transition: none !important; }
  .roa-map__dot-pulse { animation: none !important; opacity: 0 !important; }
  .cine-gallery__img, .cine-gallery__tint, .cine-gallery__cap { transition: none !important; }
}

/* "Almost never permitted" card: same look as the others, only a gold label */
.roa-never-badge {
  align-self: flex-start;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(201,169,97,0.55); padding: 3px 7px;
}
.roa-icon-card__foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
}
.roa-cats__cert { font-size: 16px; line-height: 1.55; font-weight: 300; color: rgba(255,255,255,0.86); margin: 0; }
@media (max-width: 760px) {
  .roa-cats .ctrz-table thead { display: none; }
  .roa-cats .ctrz-table tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--hair); }
  .roa-cats .ctrz-table td { display: block; border: 0; padding: 4px 0; width: auto; }
}

/* ---- Clickable cards → official wording ---- */
.roa-icon-card.is-clickable { cursor: pointer; }
.roa-icon-card.is-clickable:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.roa-icon-card__info {
  position: absolute; top: 12px; right: 12px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(201,169,97,0.6); color: var(--gold);
  font: italic 600 12px/18px Georgia, serif; text-align: center;
  transition: background 200ms ease, color 200ms ease;
}
.roa-icon-card.is-clickable:hover .roa-icon-card__info { background: var(--gold); color: #000; }

.roa-official {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: roaFade 200ms ease;
}
@keyframes roaFade { from { opacity: 0; } to { opacity: 1; } }
.roa-official__panel {
  width: min(640px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  background: #0a0a0a; border: 1px solid var(--gold); padding: 28px 30px 30px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7);
}
.roa-official__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.roa-official__kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.roa-official__close { background: none; border: 1px solid var(--hair); color: #fff; width: 32px; height: 32px; font-size: 20px; line-height: 1; cursor: pointer; }
.roa-official__close:hover { border-color: var(--gold); color: var(--gold); }
.roa-official__title { margin: 0 0 20px; font-family: "Inter Tight", sans-serif; font-weight: 300; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,0.8); }
.roa-official__title strong { color: #fff; font-weight: 500; }
.roa-official__title a { color: inherit; }
.roa-official__quote {
  margin: 0; padding: 18px 20px; border-left: 2px solid var(--gold); background: rgba(201,169,97,0.06);
  font-size: 16px; line-height: 1.6; font-weight: 300; color: #fff; font-style: normal; white-space: pre-line;
}
.roa-official__note { margin: 12px 0 0; font-size: 13px; color: rgba(255,255,255,0.55); }
.roa-official__meta { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); }
.roa-official__link { display: inline-block; margin-top: 18px; color: var(--gold); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.roa-official__link:hover { color: #fff; }
@media (max-width: 760px) {
  .roa-official { align-items: flex-end; padding: 0; }
  .roa-official__panel { max-height: 85vh; padding: 22px 18px 26px; border-left: 0; border-right: 0; border-bottom: 0; }
}
.roa-official__more { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 14px; }
.roa-official__extra p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; font-weight: 300; color: rgba(255,255,255,0.8); }
.roa-official__extra a { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--gold); text-decoration: none; }
.roa-official__extra a:hover { color: #fff; }

/* Disclaimer: only the official government / ILT / EASA texts are binding */
.article-prose.roa-prose .roa-disclaimer {
  margin: 48px 0 0 0;
  padding: 22px 24px;
  border: 1px solid var(--hair);
  border-left: 2px solid var(--gold);
  background: rgba(255,255,255,0.02);
}
.roa-disclaimer__kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.article-prose.roa-prose .roa-disclaimer p {
  margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.72);
}
.article-prose.roa-prose .roa-disclaimer p::first-letter { all: unset; }
@media (max-width: 760px) {
  .article-prose.roa-prose .roa-disclaimer { padding: 18px 16px; margin-top: 36px; }
}