/**
 * Studio Takaya — responsive overrides.
 * ТЗ §7.5: desktop >=1280px full mega-menu, tablet 768-1279px simplified
 * 2-column menu, mobile <768px hamburger + accordion.
 *
 * Accepted deviation (investigated, not guessed): Olivero's mobile-nav
 * collapse is governed by a compiled, literal `min-width: 75rem` (1200px)
 * media query baked into several core CSS files, read at runtime via
 * Drupal.olivero.isDesktopNav()'s computed-style check -- there is no
 * --nav-breakpoint (or any other) runtime CSS variable to override; the
 * source uses a build-time PostCSS @custom-media construct that no longer
 * exists once compiled. Forking Olivero's collapse threshold would mean
 * duplicating multiple core CSS files (and trusting the JS reads them the
 * same way after every future core update) to close an 80px gap (1200px
 * vs ТЗ's 1280px) that's invisible outside a narrow window-width range.
 * Not worth the maintenance burden this sub-theme was built to avoid --
 * the mobile/hamburger nav kicks in ~80px earlier than ТЗ §7.5 specifies,
 * everything else in that section (768px mobile threshold, accordion,
 * hamburger) matches exactly.
 */

@media (min-width: 768px) and (max-width: 1279px) {
  .takaya-projects-megapanel__inner {
    flex-direction: column;
  }

  .primary-nav__menu-link {
    font-size: 0.8rem;
  }
}

@media (max-width: 767px) {
  .site-footer__inner {
    text-align: center;
  }
}

/*
 * Phase 10, Task 4, Finding 7 — conservative, best-effort mobile rules.
 *
 * Task 1's audit found zero coverage for any content-template class in
 * this file specifically (some of these already have media queries
 * elsewhere -- .takaya-team-full__header stacks at 768px in content.css,
 * .takaya-projects-grid reflows at 1023px/767px in blocks.css -- this
 * file had none). Pablo's brief grants explicit permission for
 * conservative/safe-default mobile rules here for the 3 components the
 * audit named as most likely needing it, since we cannot browser-test
 * visually. These are deliberately non-destructive (image max-width
 * caps, single-column stacking of side-by-side layouts) and require
 * Pablo's visual sign-off -- NOT a guaranteed-correct fix.
 */
@media (max-width: 767px) {
  /* takaya-team-full: belt-and-suspenders alongside content.css's
   * existing 768px stack rule -- caps the photo so it never overflows
   * narrower viewports even if that rule is later changed. */
  .takaya-team-full__photo img {
    max-width: 100%;
    height: auto;
  }

  /* takaya-project-row (/projects listing rows): currently has no
   * media query anywhere. The row is a flex layout with a fixed
   * 150x90px photo + text body side by side -- safe to stack
   * vertically below 768px so the text isn't squeezed. */
  .takaya-project-row__link {
    flex-direction: column;
    align-items: flex-start;
  }

  .takaya-project-row__photo {
    width: 100%;
    flex-basis: auto;
    height: auto;
    max-height: 220px;
  }

  /* takaya-hero-slider: no-JS fallback height on narrow viewports
   * (hero-slider.js overrides via --hero-slide-height either way). */
  .takaya-hero-slider .takaya-placeholder-box,
  .takaya-hero-slider__track .field__item {
    height: var(--hero-slide-height, 240px);
  }

  .takaya-hero-slider__arrow {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
}