/* ==========================================================================
   Cyber Falak v3: phone layer
   Loaded last. Everything here is for narrow screens (and touch), so desktop
   is untouched. Goals: shorter pages, thumb-friendly targets, swipe instead of
   long stacks, and one always-there way to call or book.
   ========================================================================== */

/* Touch: no sticky hover lifts, no grey tap flash */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .explore-grid a:hover, .ai-tiles li:hover, .fam-card:hover .fam-art > span { transform: none; }
}

@media (max-width: 719px) {
  /* ---------- Rhythm: tighter vertical spacing ---------- */
  .section { padding-block: 3.25rem; }
  .section-head { margin-bottom: 1.5rem; }
  h2 { text-wrap: balance; }

  /* ---------- Menu: a full sheet with a dimmed page behind ---------- */
  .site-header:has(.main-nav.open)::before {
    content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(3, 7, 26, .72);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: m-fade .3s ease;
  }
  .main-nav.mega-nav { max-height: calc(100svh - 96px); }
  .mega-nav .mega-trigger, .mega-nav .mega-link { min-height: 56px; font-size: 1.125rem; }
  html:has(.main-nav.open) { overflow: hidden; }

  /* ---------- Topic page heroes: shorter; jump chips swipe in one row ---------- */
  .page-jump {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent);
  }
  .page-jump::-webkit-scrollbar { display: none; }
  .page-jump li { flex: none; scroll-snap-align: start; }
  .page-jump a { white-space: nowrap; min-height: 44px; }

  /* ---------- Explore: compact rows with a small planet thumbnail ---------- */
  .explore-grid { gap: 10px; }
  .explore-grid a {
    display: grid; grid-template-columns: 84px 1fr; grid-template-areas: "art kick" "art title" "art desc"; align-content: center;
    column-gap: 14px; row-gap: .25rem; padding: 10px 14px 10px 10px; border-radius: 22px; position: relative;
  }
  .explore-grid a > :not(.ex-art) { margin-inline: 0; }
  .ex-art { grid-area: art; height: 84px; width: 84px; margin: 0; border-radius: 16px; align-self: center; }
  .ex-art i { transform: scale(.55); }
  .explore-grid a:hover .ex-art i { transform: scale(.6); }
  .ex-kicker { grid-area: kick; font-size: .75rem; padding-right: 20px; }
  .ex-title { grid-area: title; font-size: 1.125rem; }
  .ex-desc { grid-area: desc; font-size: .875rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ex-go { position: absolute; top: 14px; right: 14px; margin: 0; padding: 0; font-size: 0; }
  .ex-go span { font-size: 1.125rem; }

  /* ---------- Service family carousel: shorter art ---------- */
  .fam-art { height: 150px; }
  .fam-art > span { scale: .7; }
  .family-grid .fam-card { flex-basis: 86%; }
  .fam-body { padding: 1rem 1.25rem 1.25rem; }

  /* ---------- Lifecycle: steps swipe sideways, orbit fits the screen ---------- */
  .story-step h3 { font-size: 1.375rem; }
  .story-art { width: min(74vw, 280px); }
  .sa-node b { font-size: .75rem; padding: .25rem .6rem; }
  .story-inner { gap: 2rem; grid-template-columns: minmax(0, 1fr); }
  .story-copy { min-width: 0; }

  /* ---------- Finale banners: less scroll to get through ---------- */
  .finale[data-pinned] { height: 180vh; }
  .finale-mini[data-pinned] { height: 150vh; }
  .finale-stage { padding: 4.5rem 16px; }

  /* ---------- Small labels: readable minimum ---------- */
  .region-tag { font-size: .75rem; }

  /* ---------- Footer: two columns of links, real tap targets ---------- */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-grid > :last-child:nth-child(even) { grid-column: 1 / -1; }
  .site-footer ul { gap: 0; }
  .site-footer li a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 40px; }

  /* ---------- AI tiles and lists: a touch tighter ---------- */
  .ai-tiles { gap: 8px; }
  .ai-tiles li { padding: .7rem .85rem; }

  /* ---------- Forms: 16px inputs so iOS does not zoom ---------- */
  input, select, textarea { font-size: 16px !important; }
}

/* Theme-specific bits (space skin only) */
html:not(.a11y-contrast):not(.a11y-dark) {
  @media (max-width: 719px) {
    /* Numbers: compact tiles, the last one spans the row */
    & .stats { padding-block: 3rem .5rem; }
    & .stats-grid { gap: 10px; }
    & .stats-grid li, & .stats-grid li:nth-child(odd) { min-height: 132px; padding: 1.1rem 1.15rem; border-radius: 20px; }
    & .stats-grid strong { font-size: 2.25rem; }
    & .stats-grid span { font-size: .875rem; line-height: 1.4; margin-top: .35rem; }
    & .stats-grid li:last-child { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 1rem; }
    & .stats-grid li:last-child span { margin: 0; }
    & .stats-grid .bento-intro { min-height: 0; }

    & .main-nav.mega-nav { background: rgba(7, 14, 44, .98); }
    & .hero { padding-block: calc(var(--hdr-h) + 2.5rem) 4rem; }
    & .hero.page-hero { min-height: 0; padding-block: calc(var(--hdr-h) + 2.5rem) 2.5rem; }
  }
}

@keyframes m-fade { from { opacity: 0; } }

/* ==========================================================================
   Phone round 2: calmer type, compact hero and banners, less to read
   ========================================================================== */
@media (max-width: 719px) {
  /* Type scale: headings a step smaller, leads at body size */
  h2:not(.finale-title):not(.sr-only) { font-size: 1.625rem; line-height: 1.2; letter-spacing: -.02em; }
  .section-head p:not(.eyebrow), .lead { font-size: 1rem; line-height: 1.6; }
  .eyebrow { font-size: .6875rem; letter-spacing: .14em; }

  /* Less to read on the home page (everything is still one tap away on its own page) */
  body[data-page="index"] {
    & .bento-text, & .stats-note, & #services .section-head p:not(.eyebrow) { display: none; }
    & .bento-title { font-size: 1.25rem; margin: 0; }
    & .bento-kicker { margin-bottom: .6rem; }
    & .story-step p { font-size: .9375rem; }
    & .story-art { width: min(60vw, 230px); }
  }

  /* Banners (motto + finale): a framed portal card instead of a full-screen scene */
  .finale:not([data-pinned]) {
    & .finale-stage { min-height: 0; padding: 1.5rem 16px; }
    & .finale-window {
      inset: 1.5rem 16px; left: 16px; top: 1.5rem; width: auto; aspect-ratio: auto; border-radius: 28px; transform: none;
    }
    & .finale-planet { top: 64%; width: 210%; }
    & .finale-content { padding: 3.25rem 1.25rem 3.5rem; }
  }
  .finale .finale-title, .finale-mini .finale-title { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.03em; margin-bottom: 1.5rem; }
  .finale .finale-btn { min-height: 48px; font-size: .9375rem; padding-inline: 1.25rem; }
  .finale .eyebrow { margin-bottom: .75rem; }
}

/* Hero: smaller headline, side-by-side buttons, no wasted height */
html:not(.a11y-contrast):not(.a11y-dark) {
  @media (max-width: 719px) {
    & .fam-art { height: 150px; }
    & .hero:not(.page-hero) { min-height: 0; padding-block: calc(var(--hdr-h) + 3.25rem) 4.5rem; }
    & .hero-simple h1 { font-size: 1.75rem; line-height: 1.08; letter-spacing: -.035em; margin-bottom: 1rem; }
    & .hero .lead { font-size: .875rem; line-height: 1.6; color: #b9c6ec; }
    & .hero-coords { margin-bottom: 1rem; }
    & .hero .cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 1.5rem; }
    & .hero .cta-row .btn { min-height: 48px; padding: 0 .75rem; font-size: .875rem; justify-content: center; white-space: nowrap; }
    & .hero-simple .hero-listen { margin-top: .75rem; font-size: .8125rem; }
    & .hero-listen-icon { width: 30px; height: 30px; }
    & .hero:not(.page-hero) .planet-main { width: 240px; right: -70px; top: 18%; translate: none; opacity: .45; }
    & .planet-edge { width: 900px; left: -380px; bottom: -870px; }

    & .hero.page-hero { padding-block: calc(var(--hdr-h) + 2rem) 2rem; }
    & .page-hero h1 { font-size: 1.75rem; line-height: 1.08; margin: .35rem 0 .75rem; }
    & .page-hero .lead { font-size: .875rem; }
    & .crumbs { margin-bottom: .75rem; font-size: .8125rem; }
    & .page-jump { margin-top: 1.25rem; }
    & .page-jump a { min-height: 40px; font-size: .8125rem; padding: .4rem .9rem; }
  }
}

/* ==========================================================================
   Phone round 3: compact lists everywhere
   ========================================================================== */
@media (max-width: 719px) {
  /* Short items become two-up tiles */
  .values-grid, #managed .solution-grid, .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html:not(.a11y-contrast):not(.a11y-dark) {
    & .values-grid li { min-height: 0; padding: 1rem; border-radius: 18px; }
    & .values-grid .value-num { margin-bottom: .4rem; }
    & .values-grid h3 { font-size: .9375rem; line-height: 1.3; }
    & .solution-grid li { padding: .9rem 1rem; border-radius: 18px; }
    & .solution-grid span { font-size: .875rem; }
    & .sector-grid li { min-height: 0; gap: .75rem; padding: .9rem; border-radius: 18px; }
    & .sector-name { font-size: .875rem; }
    & .sector-ic { width: 36px; height: 36px; }
    & .rule-list > li { padding: 1rem 1.1rem; border-radius: 18px; }
    & .region-grid .region-art, & .region-art { height: 96px; }
  }

  /* Long groups swipe sideways: one card and a peek of the next */
  .partner-map, .wave-grid, .invest-grid, .region-grid {
    display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -16px; padding: 4px 16px 14px; scroll-padding-inline: 16px;
  }
  :is(.partner-map, .wave-grid, .invest-grid, .region-grid)::-webkit-scrollbar { display: none; }
  :is(.partner-map, .wave-grid, .invest-grid, .region-grid) > li { flex: 0 0 82%; scroll-snap-align: start; }
  .swipe-hint { display: flex; align-items: center; gap: .4rem; margin: .25rem 0 .5rem; font: 600 .75rem/1 var(--sp-font, inherit); color: var(--text-muted); }
  .swipe-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* Glossary: terms list, tap a term to read it (all open while searching) */
  .glossary-list.gl-compact > div { padding: 0; }
  .glossary-list.gl-compact dt {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .75rem 1rem; margin: 0; cursor: pointer;
  }
  .glossary-list.gl-compact dt::after {
    content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px); opacity: .5; transition: transform .2s ease;
  }
  .glossary-list.gl-compact > div.open dt::after { transform: rotate(-135deg) translateY(-2px); }
  .glossary-list.gl-compact dd { display: none; padding: 0 1rem 1rem; margin: 0; }
  .glossary-list.gl-compact > div.open dd, .glossary-list.gl-compact.searching dd { display: block; }
  .glossary-list.gl-compact { gap: 8px; }
}
@media (max-width: 719px) {
  html:not(.a11y-contrast):not(.a11y-dark) .service { padding: 1.25rem 1.25rem 1.1rem; border-radius: 20px; }
  html:not(.a11y-contrast):not(.a11y-dark) .service-icon { width: 40px; height: 40px; }
}
@media (max-width: 719px) {
  html:not(.a11y-contrast):not(.a11y-dark) .mini-stats:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html:not(.a11y-contrast):not(.a11y-dark) .mini-stats:has(> li:nth-child(3):last-child) li { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: .9rem .8rem; font-size: .8125rem; }
  html:not(.a11y-contrast):not(.a11y-dark) .steps li { padding: 1.1rem 1.15rem; border-radius: 20px; }
}