/* ==========================================================================
   AVOM Bharat Art Fest 2027 — responsive.css
   Every breakpoint only ever re-declares values smaller than the desktop ones.
   ========================================================================== */

/* ---------- ≤1280 ---------- */

@media (max-width: 1280px) {
  :root {
    --h1: 64px;
    --h2: 46px;
    --h3: 32px;
    --h4: 24px;

    --space-20: 16px;
    --space-80: 64px;
    --space-100: 88px;
    --space-120: 104px;

    --gutter: 40px;
    --hero-copy-width: 520px;
    --ticket-w: 124px;
    --ticket-h: 220px;
    --fan-spread: 25deg;
    --highlights-per-view: 3;
    --people-per-view: 4;
  }

  .site-nav {
    gap: var(--space-20);
  }
}

/* ---------- ≤1100: the hero stacks, copy above the collage ---------- */

@media (max-width: 1100px) {
  :root {
    --h1: 56px;
    --h2: 42px;
    --h3: 30px;

    --space-40: 32px;
    --space-48: 40px;
    --space-56: 44px;
    --space-64: 52px;
    --space-80: 48px;
    --space-100: 72px;
    --space-120: 88px;

    --gutter: 32px;
    --header-height: 72px;
    --logo-height: 64px;
    --highlights-per-view: 2.4;
    --people-per-view: 3.2;
  }

  .site-nav {
    display: none;
  }

  .site-header__menu {
    display: flex;
  }

  .hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-24);
    padding-right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  }

  .hero__media {
    justify-content: center;
  }

  .hero__copy {
    align-items: center;
    max-width: 640px;
    justify-self: center;
    text-align: center;
  }

  .hero__facts,
  .hero__actions {
    justify-content: center;
  }

  .hero__title-script {
    transform-origin: center;
  }

  .faq__container {
    gap: var(--space-48);
  }

  .site-footer__container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

/* ---------- ≤768 ---------- */

@media (max-width: 768px) {
  :root {
    --h1: 44px;
    --h2: 34px;
    --h3: 26px;
    --h4: 21px;
    --h5: 18px;
    --h6: 16px;

    --text-19: 17px;
    --text-18: 16px;
    --text-17: 16px;

    --space-24: 20px;
    --space-32: 24px;
    --space-40: 28px;
    --space-48: 32px;
    --space-56: 36px;
    --space-64: 40px;
    --space-80: 40px;
    --space-100: 60px;
    --space-120: 72px;

    --gutter: 20px;
    --header-height: 64px;
    --logo-height: 52px;
    --slider-gap: 16px;
    --highlights-per-view: 1.3;
    --people-per-view: 1.7;
  }

  .stats__container {
    grid-template-columns: 1fr 1fr;
  }

  .stat {
    padding: var(--space-24) var(--space-16);
  }

  .stat:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .stat:nth-child(n + 3) {
    border-top: 1px solid rgba(245, 242, 238, 0.14);
  }

  .faq__container {
    grid-template-columns: 1fr;
  }

  .faq__head {
    position: static;
  }

  .site-footer__container {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: var(--space-8);
  }

  .welcome {
    right: var(--space-16);
    bottom: var(--space-16);
  }
}

/* ---------- ≤480 ---------- */

@media (max-width: 480px) {
  :root {
    --h1: 38px;
    --h2: 30px;
    --h3: 24px;

    --gutter: 16px;
    --highlights-per-view: 1.15;
    --people-per-view: 1.35;
  }

  .site-header__cta {
    display: none;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* two link columns side by side; the brand and the contact column take the full width */
  .site-footer__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-32) var(--space-20);
  }

  .site-footer__col:last-child {
    grid-column: 1 / -1;
  }
}

/* ---------- Poster-collage home ---------- */

@media (max-width: 1280px) {
  :root {
    --hero-title: 140px;
    --hero-script: 88px;
    --stalls-per-view: 3;
    --speaker-card: 280px;
  }
}

@media (max-width: 1100px) {
  :root {
    --hero-title: 112px;
    --hero-script: 72px;
    --stalls-per-view: 2.4;
    --speaker-card: 270px;
  }

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

  .tile--feature {
    grid-row: auto;
  }

  .art-mosaic {
    --art-cols: 4;
  }

  .calls__container {
    grid-template-columns: 1fr;
  }

  .calls__main {
    align-items: center;
    text-align: center;
  }


}

@media (max-width: 768px) {
  :root {
    --hero-title: 76px;
    --hero-script: 50px;
    --stalls-per-view: 1.3;
    --speaker-card: 240px;
    --torn-height: 16px;
    --launch-tear: 20px;
  }

  .stats {
    padding-top: var(--space-64);
  }

  .ticker__item {
    font-size: var(--text-16);
  }

  .art-mosaic {
    --art-cols: 2;
    gap: var(--space-12);
  }

  .art-tile {
    min-height: 96px;
  }

  .art-mosaic {
    --art-icon: 44px;
  }

  .intro-grid {
    grid-template-columns: 1fr;
  }

  .intro-card {
    padding: var(--space-24);
  }

  .intro-card__icon {
    width: 180px;
    height: 90px;
  }

  /* the bento becomes a swipe track; the next tile peeks in */
  .bento {
    grid-auto-flow: column;
    grid-auto-columns: 78vw;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .bento::-webkit-scrollbar {
    display: none;
  }

  /* the tile peeking in is the swipe hint, so tiles in the track skip the fade */
  .has-reveal .bento > .reveal:not(.reveal--words),
  .has-reveal .activity-grid > .reveal:not(.reveal--words) {
    opacity: 1;
    transform: none;
  }

  .tile,
  .tile--feature,
  .tile--wide {
    grid-column: auto;
    grid-row: auto;
    scroll-snap-align: start;
  }

  /* in the swipe track every photo takes the same shape, so the wide pottery tile no longer
     sits short with an empty card below it */
  .tile__img {
    aspect-ratio: 10 / 7;
    object-fit: cover;
  }

  .tile--feature .tile__body {
    padding: var(--space-12);
  }

  .tile--feature .tile__title {
    font-size: var(--h5);
  }






  .big-stat {
    padding: 0 var(--space-12);
  }

  .big-stat__value {
    white-space: nowrap;
  }

  .partner-cells {
    grid-template-columns: 1fr;
  }

  .partner-cell {
    padding: var(--space-16);
  }


  .site-footer__identity {
    gap: var(--space-12);
  }

  .site-footer__logo {
    width: 64px;
  }
}

@media (max-width: 480px) {
  :root {
    --hero-title: 64px;
    --hero-script: 42px;
    --stalls-per-view: 1.15;
    --speaker-card: 220px;
  }

  .bento {
    grid-auto-columns: 84vw;
  }
}

/* ---------- Poster launch ---------- */

@media (max-width: 1280px) {
  :root {
    --launch-copy-width: 760px;
  }

  .launch__art {
    height: 88%;
  }
}

@media (max-width: 1100px) {
  .launch {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding-bottom: 0;
  }

  .launch__art {
    position: static;
    align-self: flex-end;
    height: 260px;
    transform: none;
  }
}

@media (max-width: 768px) {
  :root {
    --launch-icon: 32px;
    --marigold: 60px;
    --ticket-w: 80px;
    --notch: 14px;
    --ticket-h: 156px;
    --fan-spread: 21deg;
    --flowers-size: 80px;
    --flowers-top: 16px;
    --flowers-right: -12px;
    --partner-edge: 220px;
    --hero-edge: 180px;
  }

  .launch__details {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

  .launch__detail,
  .launch__detail:first-child {
    padding: 0;
    border-left: 0;
  }

  .launch__value {
    white-space: normal;
  }

  .launch__art {
    height: 200px;
  }
}

/* Touch screens swipe; the arrows are for pointers only */
@media (hover: none) {
  .slider__arrow {
    display: none;
  }
}

/* ---------- About page ---------- */

@media (max-width: 1280px) {
  :root {
    --page-title: 112px;
    --page-script: 52px;
    --page-hero-art: 540px;
  }

  .activities__art {
    width: 200px;
  }
}

/* ≤1100: the hero stacks like the home hero; two-column blocks start folding */
@media (max-width: 1100px) {
  :root {
    --page-title: 96px;
    --page-script: 46px;
    --page-hero-art: 440px;
  }

  .page-hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .page-hero__copy {
    align-items: center;
    max-width: 680px;
    justify-self: center;
    text-align: center;
  }

  .breadcrumb__list,
  .page-hero__actions {
    justify-content: center;
  }

  .page-hero__title-script {
    max-width: none;
    transform-origin: center;
  }

  /* stacked under the copy, the collages can use the full column */
  .pass-collage,
  .page-hero__media--collage .page-hero__image {
    width: min(560px, 100%);
    height: auto;
  }

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

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

  /* split heads stack before the title gets squeezed into a narrow column */
  .poster-head--split {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
  }

  .poster-head--split > .poster-head__text {
    flex-basis: auto;
    max-width: 640px;
  }

  .logo-story__container {
    grid-template-columns: 1fr;
    gap: var(--space-48);
  }

  .logo-story__mark {
    position: relative;
    top: auto;
    width: 100%;
    max-width: 400px;
    justify-self: center;
  }

  .fest-intro__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-48);
  }

  .learn__container {
    grid-template-columns: 1fr;
    gap: var(--space-64);
  }

  .impact__container {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .reach__grid {
    grid-template-columns: 1fr;
    gap: var(--space-48);
  }

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

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

@media (max-width: 768px) {
  :root {
    --page-title: 68px;
    --page-script: 36px;
    --page-hero-art: 340px;
  }

  .page-hero {
    padding-bottom: var(--space-64);
  }

  .page-hero--flush {
    padding-bottom: 0;
  }

  .about__cols {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .focus__grid {
    gap: var(--space-16);
  }

  .focus-card {
    padding: var(--space-24) var(--space-16);
  }

  .focus-card__icon {
    height: 64px;
  }

  .vision__grid {
    grid-template-columns: 1fr;
  }

  .vision-card,
  .panel,
  .impact__card,
  .why {
    padding: var(--space-24);
  }

  .impact__card {
    padding-left: var(--space-32);
  }

  .activities__head {
    align-items: flex-start;
  }

  .activities__art {
    width: 130px;
    margin-bottom: 0;
  }

  /* the six activities become a swipe track, the next card peeking in, like the home bento */
  .activity-grid {
    grid-auto-flow: column;
    grid-auto-columns: 78vw;
    grid-template-columns: none;
    gap: var(--slider-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .activity-grid::-webkit-scrollbar {
    display: none;
  }

  .activity {
    padding: var(--space-24);
    scroll-snap-align: start;
  }

  .fest-intro__container {
    grid-template-columns: 1fr;
  }

  .logo-story__mark {
    max-width: 340px;
    padding: var(--space-40);
  }

  .logo-story__image {
    max-width: 240px;
  }

  .meaning {
    padding: var(--space-16);
  }

  .fest-ticket {
    --stub: 84px;
    padding: var(--space-24) var(--space-24) 0;
    rotate: 0.8deg;
  }

  .programme__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "install"
      "digital";
  }

  .panel__cols {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .workshop-grid {
    grid-template-columns: 1fr;
  }

  .workshop__title {
    flex-direction: row;
    align-items: center;
  }

  .reach-table__th,
  .reach-table__row-head,
  .reach-table__td {
    padding: var(--space-12);
    font-size: var(--text-14);
  }

  .why__list {
    grid-template-columns: 1fr;
  }

  .partner-cells--detail {
    grid-template-columns: 1fr;
  }

  .team-card {
    padding: var(--space-16);
  }

  .team-card--lead {
    grid-row: auto;
    padding: var(--space-24);
  }

  .team-card--lead .team-card__num {
    font-size: var(--h2);
  }
}

@media (max-width: 480px) {
  :root {
    --page-title: 56px;
    --page-script: 30px;
    --page-hero-art: 300px;
  }

  .page-hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* one focus per row: the icon beside its line */
  .focus__grid {
    grid-template-columns: 1fr;
  }

  .focus-card {
    flex-direction: row;
    gap: var(--space-16);
    padding: var(--space-16) var(--space-20);
    text-align: left;
  }

  .focus-card__icon {
    flex: 0 0 88px;
    height: 52px;
  }

  .activities__art {
    display: none;
  }

  .activity-grid {
    grid-auto-columns: 84vw;
  }

  .fact-list__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* ≤560: the three big numbers stay on one row, scaled to the screen */
@media (max-width: 560px) {
  .big-stats {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  .big-stat {
    padding: 0 var(--space-8);
  }

  .big-stat__value {
    font-size: clamp(22px, 7.2vw, 34px);
  }

  .big-stat__label {
    font-size: var(--text-12);
    line-height: var(--lh-snug);
  }
}

/* ---------- ≤768: open-call tickets and the poster-launch art ---------- */

@media (max-width: 768px) {
  /* the fan is too tight on a phone: the twelve tickets stand in a swipe row instead,
     full size and turned a touch either way, with dots underneath */
  .ticket-fan {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .ticket-fan__hand {
    --ticket-w: 136px;
    --ticket-h: 236px;
    --notch: 18px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--ticket-w);
    gap: var(--space-20);
    height: auto;
    padding: var(--space-16) var(--space-8) var(--space-24);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--space-8);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .ticket-fan__hand::-webkit-scrollbar {
    display: none;
  }

  .ticket,
  .has-reveal .ticket-fan:not(.is-visible) .ticket,
  .ticket:hover {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    transition-delay: 0s;
    scroll-snap-align: start;
  }

  /* the fan turns each ticket about a point far below it; in the row they turn about their own centre */
  .ticket {
    transform-origin: center;
  }

  .ticket:nth-child(odd) {
    rotate: -1.5deg;
  }

  .ticket:nth-child(even) {
    rotate: 1.5deg;
  }

  /* the palm and Rajwada are left out on phones; the band keeps its bottom padding */
  .launch {
    padding-bottom: var(--space-80);
  }

  .launch__art {
    display: none;
  }
}

/* ≤400: twelve ticket dots still fit on one line */
@media (max-width: 400px) {
  .scroll-dots__dot {
    width: 20px;
  }

  .scroll-dots__dot.is-active {
    width: 32px;
  }

  .scroll-dots__dot.is-active::before {
    width: 20px;
  }
}

/* ---------- Client feedback additions: nights, zone, open stage, contact, soon pages ---------- */

@media (max-width: 1100px) {
  .nights__grid,
  .zone__container,
  .stage-call__container {
    grid-template-columns: 1fr;
  }

  .night-card--feature {
    grid-row: auto;
  }

  .zone__container,
  .stage-call__container {
    gap: var(--space-48);
  }

  .zone__media {
    width: min(560px, 100%);
    justify-self: center;
  }

  /* stacked, the photo keeps its own shape instead of stretching to the copy */
  .zone__frame {
    min-height: 0;
  }

  .zone__img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
  }

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

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

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

@media (max-width: 768px) {
  .night-card {
    padding: var(--space-24);
    gap: var(--space-16);
  }

  .night-card--feature {
    padding: 0;
  }

  .night-card--feature .night-card__body {
    padding: var(--space-24);
  }

  .night-card__icon {
    width: 68px;
    height: 68px;
  }

  .stage-steps {
    padding: var(--space-24);
  }

  .soon-grid,
  .soon-grid--two {
    grid-template-columns: 1fr;
  }

  .page-hero--soon .page-hero__media {
    min-height: 380px;
  }

  .notify {
    padding: var(--space-24);
  }
}

@media (max-width: 560px) {
  .zone__cols,
  .contact-grid,
  .soon-steps {
    grid-template-columns: 1fr;
  }

  .night-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .night-card--feature {
    align-items: stretch;
  }
}

/* ≤360: long team names such as "Content & Documentation" need the full width */
@media (max-width: 360px) {
  .team-list {
    grid-template-columns: 1fr;
  }
}