/* about.css — page-only rules for /about (specs/about.md), every selector prefixed .about- (design-system.md §8.1).
   Shared classes (.page-title, .card, .btn, .grad-text, .photo, .rule, .celebration, .t-display, .text-intro) come from
   main.css; this file only adds the About page geometry. Breakpoints: 1366 · 1200 · 1024 · 880 · 767 (design-system §0). */

/* ---------- shared heading tweaks scoped to this page ---------- */
.about-title h1{line-height:77px;text-transform:uppercase}       /* Elementor 5.5rem @14px root; band = 40 + 77 + 40; source text is "ABOUT Dance Well Dance Strong" */
.about-display{line-height:77px}                               /* every 60px gradient h2 on this page uses the 77px pitch */

/* ---------- §2 hero band (Round Room photo, 42% black overlay, "mountains" shape dividers) ---------- */
.about-hero{position:relative;overflow:hidden;min-height:407px;padding:0 0 70px;
  background:var(--c-black) url("../images/spectators.webp") 0 -9px / cover no-repeat}
.about-hero::before{content:"";position:absolute;inset:0;background:var(--c-black);opacity:.42}
.about-shape{overflow:hidden;position:absolute;left:0;width:100%;line-height:0;direction:ltr;z-index:1}
.about-shape--top{top:-1px}
.about-shape--bottom{bottom:-1px;transform:rotate(180deg)}
.about-shape svg{display:block;width:calc(100% + 1.3px);position:relative;left:50%;transform:translateX(-50%)}
.about-shape--top svg{height:30px}
.about-shape--bottom svg{height:80px}
.about-shape__fill{fill:var(--c-white)}

/* ---------- §3 ticketing intro ---------- */
.about-intro{padding:70px 10px 42px;text-align:center}
.about-intro__logo{display:block;width:36%;height:auto;margin:0 auto 20px}
.about-intro__text{margin:20px 0 0}

/* ---------- §4 ticket cards ---------- */
.about-tickets{display:flex;align-items:stretch;gap:40px;padding:0 20px 100px}
.about-ticket{flex:1 1 0;min-width:0}
.about-ticket__body ul ul{margin:0 0 0 .5em;list-style-type:square}
.about-ticket__more h3{margin:0;font-size:18px;line-height:var(--lh-body);letter-spacing:normal}
.about-ticket__more{margin:0 0 1em}
.about-ticket__more[hidden]{display:none}
.about-collab-link{font-weight:700}
.about-readmore{display:inline-block;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.about-readmore:hover{color:var(--c-indigo)}

/* ---------- §5 photo + big logo + DANCE WELL DANCE STRONG ---------- */
.about-brand{display:flex;align-items:center;justify-content:center;gap:30px;padding:10px}
.about-brand__photo{flex:0 1 50%;min-width:0;padding:10px}
.about-brand__text{flex:0 1 60%;min-width:0;display:flex;flex-direction:column;padding:10px;text-align:center} /* flex column: rule/logo/title margins must not collapse (measured rule→rule 452px) */
.about-brand__rule{margin:15px 0}
.about-brand__logo{display:block;width:100%;height:auto;margin:20px 0;border-radius:var(--r-photo)}
.about-brand__title{text-transform:uppercase;margin:0 0 20px}

/* ---------- §6–§8 the story of us ---------- */
.about-story__heading{padding:42px 10px 10px}
.about-story__heading h2{text-transform:uppercase}
.about-story__row{display:flex;gap:0;padding:0 0 14px}
.about-story__text{flex:0 0 58.75%;min-width:0;padding:10px;display:flex;flex-direction:column;justify-content:center}
.about-story__photo{flex:0 0 41.25%;min-width:0;padding:10px;display:flex;flex-direction:column;justify-content:center}
.about-prose p{margin:0 0 1.4em;line-height:1.4}                /* the original is one <p> with <br><br> gaps = one 1.4 line */
.about-prose p:last-child{margin-bottom:0}
.about-duo{display:flex;gap:0;padding:10px}
.about-duo__photo{flex:0 1 30%;min-width:0;display:flex;flex-direction:column;justify-content:center;row-gap:15px;margin:0;padding:10px}
.about-duo__caption{font-style:italic;font-weight:500;font-size:19px;line-height:1;letter-spacing:-.04em;text-align:center}
.about-duo__text{flex:0 1 70%;min-width:0;padding:30px 10px 10px}                /* text starts ≈30px below the photo top (measured) */

/* ---------- §9 founders (Jill / Lindy cards + logo + photo) ---------- */
.about-founders{display:flex;gap:0;padding:10px}
.about-founders__main{flex:0 1 70%;min-width:0;padding:10px}
.about-founders__lead{margin:0 0 28px;padding-left:50px;font-size:19px;font-weight:400;line-height:1.4}
.about-founders__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0 20px}
.about-founder h2{text-transform:uppercase}
.about-founder .card__rule{margin:14px 0 25px}                   /* measured on the original: title glyphs → rule ≈52px, rule → text 25 */
.about-founders__aside{flex:0 1 30%;min-width:0;display:flex;flex-direction:column;align-items:center;row-gap:20px;padding:95px 10px 10px}
.about-founders__logo{display:block;width:42%;height:auto}

/* ---------- §10 rule ---------- */
.about-rule{padding:10px}
.about-rule .rule{margin:15px 0}

/* ---------- §11 photo marquee ---------- */
.about-gallery{padding:10px 10px 60px;overflow:hidden}          /* full-bleed (no .container): the strip is clipped at the screen
                                                                    edges like the original, never at the 1440 container, and the
                                                                    track adds no horizontal page overflow */
.about-marquee{overflow:visible}   /* the original bleeds past this box; .about-gallery does the clipping */
.about-marquee__track{display:flex;flex-wrap:nowrap;align-items:center;gap:50px;width:max-content;margin:0;padding:0;list-style:none;
  animation:about-marquee 30s linear infinite}
.about-marquee:focus-within .about-marquee__track{animation-play-state:paused}   /* keyboard only: the original does not pause on hover */
.about-marquee__item{flex:0 0 auto;width:300px;overflow:hidden;border-radius:var(--r-photo)}
.about-marquee__item img{display:block;width:100%;height:auto;object-fit:cover}
.about-gallery:has(.about-gallery__pause:checked) .about-marquee__track{animation-play-state:paused}
.about-gallery__controls{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.about-gallery__controls:focus-within{position:static;display:flex;align-items:center;justify-content:flex-end;gap:8px;
  width:auto;height:auto;margin:10px 0 0;overflow:visible;clip-path:none;white-space:normal;font-size:16px}
@keyframes about-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 25px))}}
@media (prefers-reduced-motion:reduce){
  .about-marquee{overflow-x:auto}
  .about-marquee__track{animation:none}
}

/* ---------- §12 celebration spacing (measured on the original /about at 1440 and 390) ---------- */
.page-about .celebration h2{margin:0 0 20px}                     /* one 20px Elementor spacer, desktop and mobile */
.page-about .celebration p{margin:0 0 19px}

/* ---------- responsive ---------- */
@media (max-width:1366px){
  .about-intro__text{padding:0 20px}
  .about-tickets{padding:0 30px}
  .about-story__heading{padding:42px 40px 10px}
  .about-story__row{padding:0 30px 14px}
}
@media (max-width:1200px){
  .about-founders__lead,.about-duo__caption{font-size:16px}
}
@media (max-width:1024px){
  .about-hero{background-position:0 0}
  .about-intro{padding:14px 10px}
}
@media (max-width:880px){
  .about-tickets .btn{white-space:normal}                          /* the original wraps the School pill to two lines here */
  .about-brand__title{font-size:50px}
  .about-founders{flex-direction:column}
  .about-founders__main,.about-founders__aside{flex:1 1 auto;width:100%}
  .about-founders__aside{padding-top:20px}
}
@media (max-width:767px){
  .about-hero{min-height:500px}
  .about-intro{padding:14px 0}
  .about-intro__text{padding:0 10px}
  .about-tickets{flex-direction:column;gap:0;padding:20px}
  .about-ticket:last-child{margin-top:20px}                      /* the original: School + Participant touch, Spectator 20px below */
  .about-brand{flex-direction:column;gap:20px}
  .about-brand__photo,.about-brand__text{flex:1 1 auto;width:100%}
  .about-brand__title{font-size:36px;line-height:1.2}
  .about-story__heading{padding:10px 20px}
  .about-story__row{flex-direction:column;gap:0;padding:0 10px}
  .about-story__text,.about-story__photo{flex:1 1 auto;width:100%}
  .about-story__photo{padding:10px}                                /* photo → next text ≈30px on mobile (measured) */
  .about-prose p{line-height:26px}
  .about-duo{flex-direction:column-reverse;padding:20px 10px 0}
  .about-duo__photo,.about-duo__text{flex:1 1 auto;width:100%}
  .about-duo__photo{padding:16px 10px}
  .about-duo__text{padding:0 10px 10px}
  .about-founders__lead{padding-left:0}
  .about-founders__grid{grid-template-columns:minmax(0,1fr)}
  .about-founders__aside{padding:68px 10px 16px}                  /* original leaves ≈110px between the Lindy card and the small logo */
  .about-founders__grid{padding:0}
  .about-gallery{padding-bottom:60px}
  .about-marquee__item{width:200px;height:200px}
  .about-marquee__item img{height:100%}
}