/* ============================================================
   why-screen.html — page-specific styles
   (Moved out of an inline <style> block. Uses the shared tokens from
   colors_and_type.css. Loaded only on this page via the head partial's
   extra_head slot. Promote a block to site.css if a second page needs it.)
   ============================================================ */

/* Round hero image (this page's circle art; index leaves .dna square) */
.hero__art .dna { border-radius: var(--radius-full); }

/* Static world-map figures (fills baked in at build time — no JS) */
.mapfig { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--ibbis-white); padding: 24px 24px 20px; }
.mapfig__title { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-lg); color: var(--ibbis-navy); text-align: center; margin: 0 0 14px; }
.mapfig img { display: block; width: 100%; height: auto; }
/* Both maps share the exact same footprint (viewBox 2754×1180) so the
   toggle compares like-for-like. aspect-ratio reserves the box before load. */
.mapview { margin: 0; }
.mapview + .mapview { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.mapview__img { display: block; width: 100%; height: auto; aspect-ratio: 2754 / 1180; }
.mapfig__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 16px; }
.lg { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ibbis-navy); }
/* Swatch colour comes from an inline --sw token (set to a palette var per legend row) */
.lg__sw { width: 16px; height: 16px; border-radius: var(--radius-sm); display: inline-block; background: var(--sw, var(--grey-line)); border: 1px solid rgba(0,0,0,0.08); }
.mapfig__cap { text-align: center; max-width: 760px; margin: 14px auto 0; color: var(--grey-muted); font-size: var(--fs-sm); }
/* View toggle — revealed only when JS is on. Without JS both maps stack. */
.mapfig__head { display: flex; justify-content: center; margin-bottom: 16px; }
.mapfig__toggle { display: inline-flex; border: 1px solid var(--grey-line); border-radius: var(--radius-md); overflow: hidden; background: var(--ibbis-white); }
.maptab {
  appearance: none; border: 0; background: var(--ibbis-white); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); font-size: var(--fs-xxs); color: var(--grey-muted);
  padding: 10px 20px; transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
.maptab + .maptab { border-left: 1px solid var(--grey-line); }
.maptab:hover { color: var(--ibbis-navy); }
.maptab.is-active { background: var(--ibbis-navy); color: var(--ibbis-white); }
/* When enhanced: both maps overlap in one grid cell so toggling swaps them
   in place — identical size and position, no reflow. Both are preloaded
   (no lazy attr), so there is no flash of missing content. The hidden map
   keeps its space (visibility, not display:none), keeping the box stable. */
.mapgroup--js .mapstage { display: grid; }
.mapgroup--js .mapview { grid-area: 1 / 1; margin: 0; padding-top: 0; border-top: 0; visibility: hidden; }
.mapgroup--js .mapview.is-active { visibility: visible; }
.mapgroup--js .mapfig__title { display: none; }
.reg-note { text-align: center; margin: 18px 0 2px; padding-top: 16px; border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--ibbis-navy); }
.reg-note a { color: var(--ibbis-teal); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.reg-note a:hover { color: var(--teal-hover); }
.reg-disclaimer { text-align: center; max-width: 820px; margin: 12px auto 0; color: var(--fg-subtle); font-size: var(--fs-xxs); font-style: italic; line-height: var(--lh-normal); }
.reg-disclaimer a { color: inherit; }

/* Collapsible "Learn more" (native <details>, works without JS) */
.learn-more { border-top: 1px solid var(--border); }
.learn-more__summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; gap: 18px; padding: 28px 24px 24px; margin: 0 -24px; border-radius: var(--radius-md); transition: background var(--dur-med) var(--ease-out); }
.learn-more__summary:hover { background: var(--navy-tint, rgba(35,40,90,0.05)); }
.learn-more__summary::-webkit-details-marker { display: none; }
.learn-more__chevron { flex: none; width: 32px; height: 32px; position: relative; border: 1px solid var(--ibbis-navy); border-radius: var(--radius-full); transition: background var(--dur-med) var(--ease-out); }
.learn-more__chevron::before, .learn-more__chevron::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 2px; background: var(--ibbis-navy); transition: transform .25s ease, background var(--dur-med) var(--ease-out); }
.learn-more__chevron::before { transform: translate(-70%, -50%) rotate(45deg); }
.learn-more__chevron::after { transform: translate(-30%, -50%) rotate(-45deg); }
.learn-more[open] .learn-more__chevron::before { transform: translate(-70%, -50%) rotate(-45deg); }
.learn-more[open] .learn-more__chevron::after { transform: translate(-30%, -50%) rotate(45deg); }
.learn-more__body { padding-top: 12px; }
@media (prefers-reduced-motion: no-preference) { .learn-more[open] .learn-more__body { animation: learnReveal .35s ease; } }
@keyframes learnReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Quote-style story cards (misuse section) */
.card .qcard__quote { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-xl); line-height: 1.45; color: var(--ibbis-navy); margin: 0 0 14px; text-wrap: pretty; }
.card .qcard__by { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xxs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--grey-muted); margin: 0; }
.card .qcard__ctx { font-size: var(--fs-sm); line-height: 1.6; color: var(--grey-muted); margin: 10px 0 0; }
.card .qcard__ctx a { color: var(--ibbis-teal); white-space: nowrap; }
/* Quote card with a circular portrait beside the text */
.qcard--photo { display: flex; gap: 30px; align-items: flex-start; margin-top: 10px; }
.qcard__photo { flex: 0 0 140px; width: 140px; height: 140px; border-radius: var(--radius-full); object-fit: cover; object-position: 50% 22%; }
.qcard__main { min-width: 0; }
@media (max-width: 620px) { .qcard--photo { flex-direction: column; gap: 18px; } }

/* Logo + text cards (best-practices section) */
.logocard { display: grid; grid-template-columns: 128px 1fr; gap: 26px; align-items: center; }
.logocard__logo { display: flex; align-items: center; justify-content: center; min-height: 56px; }
.logocard__logo img { max-width: 100%; max-height: 58px; width: auto; height: auto; }
.logocard__logo img.logo--tall { max-height: 78px; max-width: 68px; }
.logocard__body .card__title { margin: 0 0 8px; }
@media (max-width: 560px) { .logocard { grid-template-columns: 1fr; gap: 14px; } .logocard__logo { justify-content: flex-start; } }