/* ===========================================================================
   AIRL landing — laptop & mid-width adaptation
   ---------------------------------------------------------------------------
   The built bundle only ships one breakpoint (900px), and mobile.css only
   handles <=768px. Everything between 769px and the design width was falling
   back to desktop rules that contain hard pixel widths:

     .left-container   flex: 0 0 789px; width: 789px
     .content          width: 660px
     .subtitle         width: 644px
     .events-text      width: 672px   \ both flex-shrink: 0, plus a 32px gap,
     .events-list      width: 672px   / = 1376px of unshrinkable content
     .main-title h1    font-size: 104px; white-space: nowrap

   A 13" MacBook Air reports 1280px of CSS width, a 14" Pro 1512px, a 13.6" Air
   1512px. At 1280px the events row alone overflows by ~96px and the nowrap
   104px headline overflows by far more — which is why the page looked broken
   on "other Mac laptops" while being fine on a large external display.

   This file is loaded last so it wins on specificity ties. It converts those
   fixed widths to fluid ones and lets the headline wrap, without touching the
   >=1600px desktop presentation the design was built around.
   =========================================================================== */

/* --- Global overflow guard -------------------------------------------------
   `clip` rather than `hidden` so position: sticky keeps working. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

*,
*::before,
*::after {
  min-width: 0;
}

img,
video,
svg {
  max-width: 100%;
}

/* ===========================================================================
   769px – 1599px : laptops, small desktops, tablets in landscape
   =========================================================================== */
@media (min-width: 769px) and (max-width: 1599px) {
  /* ---------- Hero ---------- */
  .main-block {
    align-items: center !important;
    gap: clamp(16px, 2.5vw, 32px) !important;
    padding: 16px clamp(16px, 3vw, 32px) !important;
  }

  /* The single most important fix: stop reserving 789 rigid pixels. */
  .left-container {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 62% !important;
    gap: clamp(64px, 12vw, 220px) !important;
  }

  .content {
    width: 100% !important;
    max-width: 660px !important;
    gap: clamp(28px, 4vw, 64px) !important;
  }

  .subtitle {
    width: 100% !important;
    max-width: 644px !important;
    font-size: clamp(15px, 1.3vw, 20px) !important;
    line-height: 1.35 !important;
  }

  /* The nowrap 104px headline is what pushed the viewport sideways. */
  .main-title h1 {
    font-size: clamp(44px, 5.6vw, 104px) !important;
    line-height: 1.02 !important;
    letter-spacing: clamp(-5.2px, -0.32vw, -2px) !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .gemini-icon {
    width: clamp(32px, 3.4vw, 60px) !important;
    height: clamp(32px, 3.4vw, 60px) !important;
  }

  .orb {
    max-width: 60vw !important;
    filter: blur(24px) !important;
  }

  .btn-cta {
    font-size: clamp(15px, 1.2vw, 20px) !important;
  }

  /* ---------- Events: the 1376px unshrinkable row ---------- */
  .events-content {
    gap: clamp(40px, 5vw, 80px) !important;
    padding-left: clamp(16px, 3vw, 40px) !important;
    padding-right: clamp(16px, 3vw, 40px) !important;
  }

  .events-top {
    gap: clamp(20px, 3vw, 32px) !important;
    align-items: flex-start !important;
  }

  .events-text,
  .events-list {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 672px !important;
    flex-shrink: 1 !important;
  }

  .events-title {
    font-size: clamp(32px, 4vw, 72px) !important;
    line-height: 1.05 !important;
  }

  .event-name {
    font-size: clamp(18px, 1.8vw, 32px) !important;
  }

  .past-grid {
    flex-wrap: wrap !important;
    gap: clamp(16px, 2.4vw, 32px) !important;
  }

  .past-card {
    flex: 1 1 260px !important;
    min-width: 0 !important;
  }

  .past-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
  }

  /* ---------- Section headings / text blocks ---------- */
  .text-block {
    width: min(92vw, 1300px) !important;
    padding-left: clamp(16px, 3vw, 40px) !important;
    padding-right: clamp(16px, 3vw, 40px) !important;
  }

  .program-head,
  .program-cards {
    max-width: min(94vw, 1300px) !important;
    padding-left: clamp(16px, 3vw, 32px) !important;
    padding-right: clamp(16px, 3vw, 32px) !important;
  }

  .program-title {
    font-size: clamp(32px, 4vw, 64px) !important;
    line-height: 1.06 !important;
  }

  .forwhom-grid {
    max-width: min(94vw, 1400px) !important;
    gap: clamp(10px, 1.2vw, 16px) !important;
  }

  .modal-panel {
    max-width: min(92vw, 880px) !important;
    padding: clamp(24px, 3vw, 44px) !important;
  }
}

/* ===========================================================================
   769px – 1179px : narrow laptops & tablets — stack the two-column rows
   =========================================================================== */
@media (min-width: 769px) and (max-width: 1179px) {
  .main-block {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: clamp(32px, 5vw, 56px) !important;
  }

  .left-container {
    max-width: 100% !important;
  }

  .content {
    max-width: 100% !important;
  }

  .events-top {
    flex-direction: column !important;
  }

  .events-text,
  .events-list {
    max-width: 100% !important;
    width: 100% !important;
  }

  .program-cards {
    grid-template-columns: 1fr !important;
  }

  .forwhom-grid {
    flex-wrap: wrap !important;
  }

  .forwhom-grid > * {
    flex: 1 1 320px !important;
    min-width: 0 !important;
  }

  /* The team section positions cards absolutely with vw/vh offsets, which
     collapses into overlap on shorter laptop viewports. Return it to flow. */
  .team-section {
    min-height: auto !important;
    padding-bottom: 64px !important;
  }

  .team-card {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 251px !important;
  }

  .team-section .team-grid-bg ~ * {
    position: relative;
  }
}

/* ===========================================================================
   Short viewports (MacBook Air 13" is only 800px tall in CSS pixels)
   Full-height sections force scroll-jacking that hides content.
   =========================================================================== */
@media (min-width: 769px) and (max-height: 860px) {
  .main-block,
  .events-section,
  .team-section,
  .program-section {
    min-height: auto !important;
  }

  .left-container {
    gap: clamp(48px, 9vh, 160px) !important;
  }
}

/* ===========================================================================
   Retina / HiDPI text rendering — Macs render this stack noticeably heavier
   =========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
}

/* ===========================================================================
   Very wide displays — keep the composition centred instead of stretched
   =========================================================================== */
@media (min-width: 2100px) {
  .main-block,
  .events-content,
  .text-block {
    max-width: 1800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===========================================================================
   Touch + reduced motion
   =========================================================================== */
@media (hover: none) {
  .event-hover-img {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   "О нас" cards — Миссия / Ценности / Для кого мы
   ---------------------------------------------------------------------------
   The bundle builds these cards out of absolutely-positioned layers:

     .card-media    position: absolute; inset: 8px 8px 130px
     .card-footer   position: absolute; bottom: 0; height: 130px; overflow: hidden
     .card--hovered .card-footer   height: 35%      <-- % of the card
     .card--hovered .card-media    bottom: 35%

   Because the card's height derives from `.about-section { height: 100vh }`,
   that 35% is a viewport-derived number. On a 563px-tall laptop window it
   leaves ~1.3 lines for a four-line paragraph, so the text was cut off. On a
   1440px display it leaves room for ~12.7, which is why it only ever looked
   broken on laptops.

   Rather than patch the percentage — which just trades clipped text for a gap
   between the image and the caption — the card is converted to a flex column:

     .card-media    flex: 1   -> takes whatever space is left
     .card-footer   auto      -> takes exactly what its text needs

   Now the image and caption are always flush, the paragraph is never clipped,
   and neither depends on viewport height. The expand-on-hover animation is
   preserved: the description still transitions its max-height, and the image
   yields space smoothly as the footer grows.
   =========================================================================== */

.card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Image takes the leftover space instead of a fixed inset. */
.card-media {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 8px 8px 0 !important;
  transition: none !important;
}

/* Neutralise the percentage offsets that produced the gap. */
.card--hovered .card-media {
  bottom: auto !important;
  inset: auto !important;
}

.card-media-inner {
  width: 100% !important;
  height: 100% !important;
  min-height: 90px !important;
}

/* Caption sits directly under the image and sizes to its own content. */
.card-footer {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  padding: 0 20px 18px !important;
  overflow: hidden !important;
}

.card--hovered .card-footer {
  height: auto !important;
  justify-content: flex-start !important;
}

.card-footer-top {
  padding-top: 16px !important;
}

/* The reveal animation, unchanged in feel — only the container is different. */
.card-desc-wrap {
  max-height: 0 !important;
  overflow: hidden !important;
}

.card--hovered .card-desc-wrap {
  max-height: 420px !important;
}

.card-desc {
  padding-bottom: 0 !important;
  padding-top: 8px !important;
  overflow-wrap: break-word !important;
}

/* ---- fluid type so four lines fit without shrinking the image ------------- */
.card-label {
  font-size: clamp(22px, 2.4vw, 40px) !important;
  line-height: 1.1 !important;
}

.card-desc {
  font-size: clamp(12px, 1.15vw, 20px) !important;
  line-height: 1.35 !important;
}

@media (max-height: 900px) {
  .about-section {
    padding: 92px 24px 24px !important;
    gap: 20px !important;
  }

  .about-title {
    font-size: clamp(34px, 4.4vw, 56px) !important;
  }

  .about-sub {
    font-size: clamp(13px, 1.25vw, 18px) !important;
  }

  .card-label {
    font-size: clamp(20px, 2.1vw, 32px) !important;
  }

  .card-desc {
    font-size: clamp(11px, 1.05vw, 15px) !important;
  }

  .card-footer-top {
    padding-top: 12px !important;
  }

  .card-footer {
    padding-bottom: 14px !important;
  }
}

@media (max-height: 680px) {
  .about-title {
    font-size: clamp(28px, 3.6vw, 42px) !important;
  }

  .card-desc {
    font-size: clamp(10px, 0.95vw, 13px) !important;
  }

  .card-media-inner {
    min-height: 70px !important;
  }
}

/* ---- narrow screens: three columns leave no room for prose ---------------- */
@media (max-width: 900px) {
  .about-section {
    height: auto !important;
    min-height: 100vh !important;
  }

  .cards-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .card {
    height: auto !important;
  }

  /* Give the image a real height here — the flex row is no longer bounded by
     the section, so `flex: 1` alone would collapse it to nothing. */
  .card-media {
    flex: 0 0 auto !important;
    aspect-ratio: 16 / 10 !important;
  }

  .card-media-inner {
    height: 100% !important;
  }
}

/* ---- touch: no hover, so the description must be open by default ---------- */
@media (hover: none) {
  .card-desc-wrap {
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .card-media {
    flex: 0 0 auto !important;
    aspect-ratio: 16 / 10 !important;
  }

  .card-media-inner {
    height: 100% !important;
    min-height: 140px !important;
  }

  /* The video only plays on hover; keep the still visible instead. */
  .card-img {
    opacity: 1 !important;
  }

  .card-video {
    opacity: 0 !important;
  }
}