/* =============================================================================
   PSTU Conference Platform — Responsive, a11y touch targets, print
   Брейкпоинты ТЗ: 480 / 768 / 900 / 1024 / 1280px
   Кроссбраузерность: Chrome, Firefox, Safari, Edge, Яндекс.Браузер (стандартный CSS;
   критичные свойства дублируются в компонентах: -webkit-backdrop-filter и т.д.)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Общие утилиты для «узких» экранов
----------------------------------------------------------------------------- */

@media (max-width: 1279px) {
  .section {
    padding-block: clamp(3rem, 7vw, 5.5rem);
  }
}

@media (max-width: 1023px) {
  :root {
    --container-padding: clamp(1rem, 3.5vw, 1.75rem);
  }
}

/* =============================================================================
   ≤480px — малые смартфоны
   ============================================================================= */
@media (max-width: 480px) {
  .container {
    padding-inline: clamp(0.875rem, 4vw, 1.25rem);
  }

  .section {
    padding-block: clamp(2.75rem, 10vw, 3.5rem);
  }

  .section__header {
    margin-bottom: clamp(1.25rem, 5vw, 1.75rem);
  }
}

/* =============================================================================
   481px–767px — крупные телефоны (портрет)
   ============================================================================= */
@media (min-width: 481px) and (max-width: 767px) {
  .section {
    padding-block: clamp(3rem, 8vw, 4.25rem);
  }
}

/* =============================================================================
   ≤767px — телефоны (общие правила секций)
   ============================================================================= */
@media (max-width: 767px) {
  .materials-search {
    max-width: none;
  }

  .contacts__layout {
    gap: var(--space-6);
  }
}

/* =============================================================================
   ≤900px — планшет / мобильное меню (синхрон с header.css)
   Hero countdown 2×2, спикеры 1 колонка, формы 1 колонка
   ============================================================================= */
@media (max-width: 900px) {
  /* ── Hero: таймер 2×2 ── */
  .countdown__numbers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: var(--space-3) var(--space-4);
    background-color: rgba(255, 255, 255, 0.05);
    overflow: hidden;
  }

  .countdown__cell {
    padding: var(--space-4);
    background: rgba(10, 42, 84, 0.6);
    min-width: auto;
  }

  .countdown__sep {
    display: none;
  }

  /* ── Спикеры: одна колонка (раньше breakpoints в sections.css) ── */
  .speakers-grid {
    grid-template-columns: 1fr;
  }

  /* ── Регистрация и прочие формы: одна колонка ── */
  .registration-form .form-row {
    grid-template-columns: 1fr;
  }

  /* Табы регистрации — удобнее на тач */
  .registration__tab {
    min-height: 44px;
    padding-inline: var(--space-4);
  }

  /* Мобильная навигация — минимальная высота строки 44px */
  .header__nav-link {
    min-height: 44px;
  }

  .header__burger {
    width: 44px;
    height: 44px;
  }

  .header__burger[aria-expanded="true"] .header__burger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .header__burger[aria-expanded="true"] .header__burger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .header__nav-cta-mobile .btn {
    min-height: 44px;
  }
}

/* =============================================================================
   768px–899px — планшет узкий
   ============================================================================= */
@media (min-width: 768px) and (max-width: 899px) {
  .program__filters {
    gap: var(--space-2);
  }
}

/* =============================================================================
   900px–1023px — планшет широкий / малый ноутбук
   ============================================================================= */
@media (min-width: 900px) and (max-width: 1023px) {
  .speakers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .topics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================================================
   1024px–1279px — десктоп
   ============================================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {
  .container {
    max-width: 100%;
  }
}

/* =============================================================================
   ≥1280px — широкий контейнер (совпадает с --container-max)
   ============================================================================= */
@media (min-width: 1280px) {
  .container {
    padding-inline: clamp(1.25rem, 2.5vw, 2rem);
  }
}

/* =============================================================================
   Тач-цели ≥ 44×44px (WCAG 2.5.5 — pointer / малые экраны)
   ============================================================================= */
@media (max-width: 1024px) {
  .btn:not(.btn-icon) {
    min-height: 44px;
    padding-top: max(0.5rem, calc((44px - 1em) / 2));
    padding-bottom: max(0.5rem, calc((44px - 1em) / 2));
  }

  .btn-sm:not(.btn-icon) {
    min-height: 44px;
    padding-inline: 1.25rem;
  }

  .hero__cta .btn {
    min-height: 44px;
  }

  .form-input:not([type="checkbox"]):not([type="radio"]),
  .form-textarea,
  .form-select {
    min-height: 44px;
  }

  .form-textarea {
    min-height: 120px;
  }

  .program__tab {
    min-height: 44px;
    padding-inline: var(--space-4);
  }

  .program__filter {
    min-height: 44px;
    padding-inline: var(--space-4);
  }

  .footer__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .form-checkbox-label {
    min-height: 44px;
    align-items: center;
  }
}

@media (pointer: coarse) {
  .header__nav-link {
    min-height: 44px;
  }
}

/* =============================================================================
   PRINT
   ============================================================================= */
@media print {
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html {
    scroll-behavior: auto;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.4;
  }

  .header,
  .footer {
    position: static !important;
    background: #fff !important;
    color: #000 !important;
    border: none !important;
  }

  .header__burger,
  .header__overlay,
  .hero__scroll,
  .hero-bg,
  .speakers-section__quote,
  .contacts-map,
  .registration-form__captcha,
  .registration-form__submit-wrap button[type="submit"],
  .btn-loading {
    display: none !important;
  }

  .header__nav {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
  }

  .header__nav-list {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0 !important;
  }

  .header__nav-link {
    color: #000 !important;
    padding: 0.25rem 0.5rem !important;
    border: none !important;
  }

  .hero {
    min-height: auto !important;
    padding: 1rem 0 !important;
    background: #fff !important;
    page-break-after: avoid;
  }

  .hero__title,
  .hero__subtitle,
  .section h2,
  .section h3 {
    color: #000 !important;
  }

  a[href^="http"]::after,
  a[href^="#"]::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    font-weight: normal;
  }

  a[href^="#"]::after {
    content: '';
  }

  .section {
    padding-block: 1rem !important;
    page-break-inside: avoid;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .registration__panel:not(.registration__panel--active) {
    display: none !important;
  }

  .program__day[hidden],
  .program-event[hidden] {
    display: none !important;
  }
}