/* ==========================================================================
   Responsive — breakpoint refinements that don't belong inline with a
   component's base rules. Most components are mobile-first already;
   this file layers on the exceptions.
   ========================================================================== */

/* ---- Small phones (~375px baseline) ---- */
@media (max-width: 30em) {
  .accordion-trigger__main {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* .accordion-trigger__title's `flex: 1 1 12rem` is a width hint for the
     row layout above this breakpoint — flex-basis always sizes the main
     axis, so once the row above switches to a column, that same 12rem gets
     read as a forced 192px MINIMUM HEIGHT instead, ballooning every trigger
     regardless of how short its actual question/title text is. */
  .accordion-trigger__title {
    flex: 1 1 auto;
  }
}

/* ---- Tablet (~768px) ---- */
@media (min-width: 48em) {
  .speaker-detail {
    grid-template-columns: minmax(0, 255px) 1fr;
    gap: var(--space-8);
  }
}

/* ---- Laptop (~1024px) ---- */
@media (min-width: 64em) {
  .nav-toggle {
    display: none;
  }

  .section {
    padding-block: var(--space-10);
  }

  .statement__text {
    max-width: 30ch;
  }
}

/* ---- Large desktop (~1440px) ---- */
@media (min-width: 90em) {
  .container {
    max-width: 1320px;
  }

  .container--wide {
    max-width: 1560px;
  }
}