/* ============================================================
   RESPONSIVE — Breakpoints: 1024, 768, 480
   ============================================================ */

/* ===== TABLET (max-width: 1024px) ===== */
@media (max-width: 1024px) {
  :root {
    --header-h: 64px;
  }

  .container {
    padding: 0 var(--space-md);
  }

  .section {
    padding: var(--space-3xl) 0;
  }

  /* Header */
  .header {
    background: rgba(250, 248, 245, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .nav { display: none; }
  .header__actions { display: none; }
  .header__cta { display: none; }
  .header__ask { display: none; }
  .burger { display: flex; }

  /* Header logo */
  .header__logo-img {
    height: 60px;
  }

  /* Burger: larger touch target */
  .burger {
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  /* Editorial grids */
  .editorial-split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .editorial-split--reverse {
    direction: ltr;
  }

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

  .editorial-with-sidebar {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    order: 2;
  }

  .bento-grid__item--wide,
  .bento-grid__item--twothirds {
    grid-column: span 12;
  }

  .bento-grid__item--narrow,
  .bento-grid__item--third {
    grid-column: span 6;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .footer__brand {
    grid-column: span 2;
  }

  /* Academy hero image */
  .page-hero .editorial-split > div:last-child {
    max-width: 100%;
  }

  /* Founder photo on main page: override inline max-width */
  .editorial-split img[style*="max-width: 280px"] {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Grid-4 → 2 columns */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {
  :root {
    --header-h: 60px;
  }

  .section {
    padding: var(--space-2xl) 0;
  }

  .section--lg {
    padding: var(--space-3xl) 0;
  }

  /* Header logo */
  .header__logo-img {
    height: 56px;
  }

  /* Page hero */
  .page-hero {
    padding: var(--space-3xl) 0 var(--space-2xl);
  }

  .page-hero__title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  /* Hero with background: stack content */
  .hero--bg {
    min-height: auto;
    padding: var(--space-3xl) 0;
  }

  .hero--bg .container {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
  }

  .hero--bg__badge {
    align-self: flex-start;
    flex-direction: row;
    gap: var(--space-md);
  }

  /* Bento grid: all full width */
  .bento-grid {
    grid-template-columns: 1fr;
  }

  /* Override inline min-width on bento cards */
  .bento-card[style*="min-width"] {
    min-width: 0 !important;
  }

  /* Override inline flex-shrink:0 on any child */
  .editorial-split > div[style*="flex-shrink"] {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
  }

  /* Bento 2x2: all full width */
  .bento-grid--2x2 {
    grid-template-columns: 1fr;
  }

  /* Reviews: single column on mobile */
  .reviews-section .reviews-left {
    grid-template-columns: 1fr;
  }

  .bento-grid__item--wide,
  .bento-grid__item--narrow,
  .bento-grid__item--full,
  .bento-grid__item--third,
  .bento-grid__item--twothirds {
    grid-column: span 1;
  }

  /* Editorial 3col */
  .editorial-3col {
    grid-template-columns: 1fr;
  }

  /* Age cards: horizontal scroll */
  .age-cards-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    margin: 0 calc(-1 * var(--space-md));
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    scrollbar-width: none;
  }

  .age-cards-scroll::-webkit-scrollbar { display: none; }

  .age-cards-scroll > * {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }

  /* Reviews: horizontal scroll */
  .reviews-scroll,
  .reviews-stack {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    margin: 0 calc(-1 * var(--space-md));
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    scrollbar-width: none;
  }

  .reviews-scroll::-webkit-scrollbar,
  .reviews-stack::-webkit-scrollbar { display: none; }

  .reviews-scroll > *,
  .reviews-stack > * {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }

  /* Stats: 2x2 grid */
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  /* Tabs → Accordion on mobile */
  .tabs__nav {
    flex-direction: column;
    border-bottom: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .tabs__btn {
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    text-align: left;
    padding: var(--space-md) var(--space-lg);
  }

  .tabs__btn--active {
    border-bottom-color: var(--color-border);
    border-left-color: var(--color-primary);
    background: var(--color-primary-pale);
  }

  .tabs__panel {
    padding: var(--space-md) 0;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer__brand {
    grid-column: span 1;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Floating CTA */
  .floating-cta {
    display: block;
  }

  .floating-cta .btn {
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg);
  }

  /* Pull quote */
  .pull-quote__text {
    font-size: var(--fs-h3);
  }

  /* Founder grid */
  .founder-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .founder-grid img {
    margin: 0 auto;
  }

  /* Team grid */
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Utility grids: responsive */
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Anchor nav scrollable */
  .anchor-nav__link {
    padding: var(--space-md) var(--space-md);
    font-size: var(--fs-caption);
  }

  /* Age card height */
  .age-card {
    min-height: 300px;
  }

  /* Academy program images: override inline min-width */
  .tabs__panel .editorial-split > div:last-child {
    min-width: 0 !important;
    flex-shrink: 1 !important;
    width: 100%;
  }

  /* Academy program images: fix crop */
  .tabs__panel .editorial-split img {
    object-position: top center !important;
    height: auto !important;
    max-height: 280px;
  }

  /* Academy program images: stack vertically */
  .tabs__panel .editorial-split {
    flex-direction: column;
  }

  /* Course cards: fix grid targeting */
  .grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* Methodology: skill blocks full width, skill-summary full width */
  .skill-summary {
    font-size: var(--fs-small) !important;
    padding: var(--space-md) !important;
  }

  /* Masterclass features: allow wrap */
  .masterclass__features {
    gap: var(--space-sm);
  }

  .masterclass__feature-text {
    white-space: normal;
  }

  /* Header inner: tighter padding */
  .header__inner {
    padding: 0 var(--space-md);
  }

  /* Anchor nav: scrollable */
  .anchor-nav__inner {
    justify-content: flex-start;
  }

  /* Masterclass info: reduce top padding on mobile */
  .masterclass__info {
    padding-top: var(--space-xl) !important;
  }

  /* Form touch targets: larger on mobile */
  .form-control,
  .form-input {
    padding: 1rem 1rem;
    font-size: 1rem;
    min-height: 48px;
  }

  .btn {
    min-height: 48px;
    padding: 0.75rem 1.5rem;
  }

  /* Stats grid: override inline style */
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar form: full width */
  .sidebar__form {
    width: 100%;
  }

  /* Editorial split within tabs: ensure proper spacing */
  .tabs__panel .editorial-split > div:first-child {
    order: 2;
  }

  .tabs__panel .editorial-split > div:last-child {
    order: 1;
  }

}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-md);
  }

  .page-hero__title {
    font-size: 1.75rem;
  }

  /* Hero badge: full width on small mobile */
  .hero--bg__badge {
    width: 100%;
    justify-content: center;
  }

  .hero--bg__badge-number {
    font-size: 2.25rem;
  }

  /* Stats: single column */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* Team grid: single column */
  .team-grid {
    grid-template-columns: 1fr;
  }

  /* Utility grids: single column */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Age cards: nearly full width */
  .age-cards-scroll > * {
    flex: 0 0 92%;
  }

  .reviews-scroll > * {
    flex: 0 0 92%;
  }

  /* Form */
  .form-section {
    padding: var(--space-xl);
  }

  /* Cards */
  .card__body {
    padding: var(--space-lg);
  }

  /* Bento grid gap */
  .bento-grid {
    gap: var(--space-md);
  }

  /* Breadcrumbs smaller */
  .breadcrumbs {
    padding: var(--space-sm) 0;
  }

  .breadcrumbs__list {
    font-size: var(--fs-caption);
  }

  /* Pull quote */
  .pull-quote {
    padding: var(--space-lg);
  }

  /* Bento cards: ensure flex items wrap */
  .bento-card[style*="display: flex"] {
    flex-direction: column;
  }

  .bento-card[style*="min-width"] {
    min-width: 0 !important;
  }

  /* Form inputs: larger touch targets on small mobile */
  .form-control,
  .form-input {
    padding: 1.1rem 1rem;
    font-size: 1.1rem;
  }

  .btn {
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
  }

  /* Hero content: ensure it fits */
  .page-hero__content {
    max-width: 100% !important;
  }

  /* Masterclass and diagnostics images: smaller */
  .masterclass__image-wrap img,
  .diagnostics__image-wrap img {
    height: 250px;
  }

  /* Course cards: full width */
  .course-card {
    flex-direction: column;
  }

  .course-card__image {
    width: 100%;
    height: 200px;
  }

  /* Sidebar form: full width */
  .sidebar__form {
    padding: var(--space-lg);
  }

  /* Masterclass features: allow wrapping on small screens */
  .masterclass__features {
    gap: var(--space-sm);
  }

  .masterclass__feature {
    padding: var(--space-xs) var(--space-md);
  }

  .masterclass__feature-text {
    white-space: normal;
  }

  /* Course card price/button: stack vertically */
  .course-card__body > div[style*="justify-content"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-sm) !important;
  }

  /* Gallery slider: smaller nav buttons */
  .gallery-slider__btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  /* Diagnostics fact grid: single column */
  .diagnostics__fact-grid {
    grid-template-columns: 1fr;
  }

  /* Diagnostics result block: smaller on mobile */
  .diagnostics__result {
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .diagnostics__result-icon {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }

  .diagnostics__result-label {
    font-size: var(--fs-caption);
  }

  .diagnostics__result-text {
    font-size: var(--fs-small);
  }

  /* Diagnostics steps: adjust for mobile */
  .diagnostics__step--compact {
    padding: var(--space-2xs) 0;
  }

  .diagnostics__step-text {
    font-size: var(--fs-caption);
    line-height: 1.5;
  }

  /* Anchor nav: single row scroll */
  .anchor-nav__inner {
    justify-content: flex-start;
    padding: var(--space-sm) var(--space-md);
  }

  /* Footer: tighter layout */
  .footer__brand-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer__brand p {
    max-width: 100%;
  }

  /* Values strip: center on small mobile */
  .values-strip {
    justify-content: center;
  }

  /* About page contacts: stack social buttons */
  .contacts-socials {
    flex-direction: column;
  }

  /* About page projects: center single item */
  .projects-grid {
    justify-items: center;
  }
}

/* ===== PRINT ===== */
@media print {
  .header, .footer, .floating-cta, .mobile-menu, .anchor-nav, .burger {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  .section {
    padding: 1cm 0;
    page-break-inside: avoid;
  }

  a { color: black; text-decoration: underline; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}