/* === MOBILE OVERRIDES (loaded after tools.css — wins the cascade) === */

/* Requested cleanup */
#register > .container > div { display: none; }

/* ── ALL TOUCH DEVICES ── */
@media (max-width: 1024px) {
  /* Touch: minimum tap targets */
  .btn { min-height: 44px; }
  .nav a, .nav .btn { min-height: 44px; display: flex; align-items: center; }

  /* Hero CTA */
  .hero__cta { min-width: 0; width: auto; }

  /* Scroll carousels */
  .blog-feed, .events__grid, .blog-grid, .feat-cols { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .blog-feed::-webkit-scrollbar, .events__grid::-webkit-scrollbar, .blog-grid::-webkit-scrollbar { display: none; }

  /* Active states for touch (supplement :hover) */
  .card:active { transform: translateY(-2px) !important; }
  .stat-card:active { transform: translateY(-2px) !important; }

  /* Performance */
  .money-rain { display: none; }
}

@media (max-width: 768px) {
  .blog-reel { flex-basis: min(220px, 62vw); }
  .event-card { flex-basis: min(300px, 72vw); }
  .nav { width: min(320px, 88vw); }
}

/* ── TABLET: 769px – 1024px ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { padding: 0 24px; }
  .section { padding: 62px 0; }

  .hero { min-height: auto; padding: max(92px, calc(env(safe-area-inset-top) + 64px)) 0 48px; }
  .hero__headline-text h1 { font-size: clamp(1.9rem, 3vw, 2.4rem); }
  .hero__sub-headline { font-size: 0.94rem; line-height: 1.45; }
  .hero__cta { min-width: 0; }

  /* Fix clipped course cards on tablets */
  .courses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .course-card { min-height: 100%; }
  .course-card__img { height: 138px; }
  .course-card__body {
    padding: 14px 14px 16px;
    gap: 10px;
    min-height: 0;
  }
  .course-card__body h3 {
    font-size: 0.82rem;
    line-height: 1.34;
    overflow-wrap: anywhere;
  }
  .btn--course {
    font-size: 0.64rem;
    padding: 8px 10px;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
  }
}

@media (max-width: 640px) {
  /* Hero: tighter vertical rhythm for small screens */
  .hero {
    min-height: auto;
    padding: max(78px, calc(env(safe-area-inset-top) + 56px)) 0 42px;
  }
  .hero__dates-row {
    width: 100%;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
  }
  .date-chip {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    min-width: 136px;
    padding: 8px 10px;
  }
  .hero__headline { margin-bottom: 14px; }
  .hero__sub-headline {
    font-size: 0.9rem;
    line-height: 1.42;
    margin-top: 8px;
  }
  .hero__bottom {
    width: 100%;
    align-items: center;
    gap: 12px;
  }
  .hero__gift { justify-content: center; }

  /* --- WELCOME MOCKUP: mobile full-width text --- */
  .welcome-mockup__inner {
    grid-template-columns: 1fr;
    padding: 20px;
    align-items: flex-start;
  }
  .welcome-mockup__left {
    width: 100%;
    max-width: 100%;
  }
  .welcome-mockup__sub,
  .welcome-path,
  .welcome-path__bar {
    max-width: 100%;
  }
  .welcome-mockup__right {
    display: none;
  }
  .devices-img {
    display: none;
  }
  .sim-lever__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    align-items: center;
    gap: 10px;
  }
  .sim-lever__label {
    white-space: normal;
    min-width: 0;
  }
  .sim-lever__label--on {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    justify-self: start;
    color: #8b5cf6;
  }

  /* --- COURSES: compact horizontal carousel --- */
  .courses-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 10px;
    margin-top: 24px;
    scrollbar-width: none;
  }
  .courses-grid::-webkit-scrollbar { display: none; }
  .course-card {
    flex: 0 0 min(260px, 82vw);
    width: min(260px, 82vw);
    scroll-snap-align: start;
  }
  .course-card__img { height: 140px; }
  .course-card__body { padding: 16px 14px 16px; gap: 10px; }
  .course-card__body h3 { font-size: 0.88rem; }
  .course-card .btn--course,
  .course-card .promo-gate__trigger {
    padding: 8px 10px;
    font-size: 0.72rem;
    white-space: normal;
  }
  .course-card .promo-gate__trigger { min-height: auto; }

  /* --- BENTO: квадратные ячейки, 2 в ряд --- */
  .bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .bento-cell {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 14px;
    gap: 4px;
  }
  .bento-cell--tall {
    grid-column: 1 / -1;
    aspect-ratio: unset;
    min-height: 110px;
  }
  .bento-big { font-size: 1.38rem; }
  .bento-cell p { font-size: 0.68rem; line-height: 1.3; }

  /* --- FEAT-COLS: все 3 в одной горизонтальной строке --- */
  .feat-cols {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .feat-cols::-webkit-scrollbar { display: none; }
  .feat-col {
    flex: 0 0 min(250px, 80vw);
    min-height: 240px;
    scroll-snap-align: start;
  }

  /* --- BLOG FEED: карусель, одно видео за раз --- */
  .blog-feed {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0;
    padding: 0 0 10px;
    margin-bottom: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .blog-feed::-webkit-scrollbar { display: none; }
  .blog-reel {
    flex: 0 0 100%;
    aspect-ratio: 3 / 4;
    scroll-snap-align: start;
  }

  /* --- REGISTER BOX: компактнее --- */
  .register__box {
    padding: 18px 12px;
    max-width: 100%;
  }
  .register__box .section__title {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
    margin-bottom: 8px;
  }
  .register__box > p {
    font-size: 0.8rem;
    margin-bottom: 0.6rem;
  }
  .register__box .check-list {
    gap: 8px;
    margin-bottom: 14px;
  }
  .register__box .check-list li {
    font-size: 0.8rem;
    padding-left: 24px;
  }
}

@media (max-width: 480px) {
  .hero { padding: max(72px, calc(env(safe-area-inset-top) + 52px)) 0 34px; }
  .hero__headline-text h1 {
    font-size: clamp(1.45rem, 7.2vw, 2rem);
    line-height: 1.05;
  }
  .hero__big-num { font-size: 2.6rem; }
  .hero__cta { margin-bottom: 16px; }
  .hero__countdown {
    width: 100%;
    justify-content: center;
    gap: 4px;
  }
  .countdown__block { min-width: 40px; }
  .countdown__block span { font-size: 1.2rem; }
  .countdown__block small { font-size: 0.48rem; }

  .date-chip {
    flex: 1 1 100%;
    min-width: 0;
  }

  .nav { width: min(320px, 92vw); }
  .nav a:not(.btn), .nav .btn { min-height: 46px; }

  .blog-reel { aspect-ratio: 4 / 5; }
  .feat-col { flex: 0 0 min(230px, 84vw); min-height: 218px; }
  .bento-cell { padding: 12px; }
}

/* ── CABINET PROMO LEFT — compact mobile ── */
@media (max-width: 640px) {
  .cab-promo { padding: 36px 0; }
  .cab-promo__inner { gap: 20px; }

  .cab-promo__left .section__title {
    font-size: clamp(1.2rem, 5.5vw, 1.7rem);
    margin-bottom: 6px;
  }
  .cab-promo__lead {
    font-size: 0.82rem;
    line-height: 1.45;
  }
  .cab-promo__list {
    gap: 10px;
    margin-bottom: 18px;
  }
  .cab-promo__list li {
    font-size: 0.82rem;
    gap: 10px;
    line-height: 1.35;
  }
  .cab-promo__icon { font-size: 1rem; }
  .cab-promo__btns {
    flex-direction: column;
    gap: 10px;
  }
  .cab-promo__btns .btn {
    width: 100%;
    text-align: center;
    padding: 12px 18px;
    font-size: 0.84rem;
  }
}