/* v1.4 - layout of v1.2 (Ru feedback), restyled by theme.css = urban theme A + urban video style (Dido 2026-10-09). Loaded after base.css and BEFORE theme.css.
   Photo treatment lives only in the PHOTO EFFECTS block below. */
.brand img{width:44px;height:auto}

/* hero: five lines instead of stats */
.hero{min-height:min(92vh,820px)}
.hero h1{margin-bottom:.4em}
.points-band{padding:28px 0 0}
.hero-points{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (min-width:1080px){.hero-points{grid-template-columns:repeat(5,1fr)}}
@media (max-width:420px){.hero-points{grid-template-columns:1fr}}
.hero-points li{position:relative;background:var(--card-bg);border:1px solid var(--card-line);box-shadow:var(--card-shadow);border-radius:var(--radius);padding:40px 18px 20px;font-size:1.02rem;font-weight:700;line-height:1.4}
.hero-points li::before{content:"";position:absolute;left:18px;top:18px;width:12px;height:12px;border-radius:3px;background:var(--accent);transform:rotate(45deg)}
.hero-actions{margin-top:28px}

/* schedule: two clearly separated locations */
.locs{display:grid;gap:28px}
@media (min-width:980px){.locs{grid-template-columns:1fr 1fr}}
.loc2{display:flex;flex-direction:column}
.loc-photo{position:relative;aspect-ratio:16/9;overflow:hidden}
.loc-photo img{width:100%;height:100%;object-fit:cover}
.loc-tag{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:var(--accent);color:var(--accent-fg);padding:5px 10px;border-radius:999px;margin-bottom:10px}
.loc2 h3{font-size:1.6rem;margin:0 0 4px}
.loc2 .addr{margin:0 0 10px;color:var(--muted)}
.maps{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--link);text-decoration:none;margin-bottom:16px}
.maps svg{width:18px;height:18px}
.maps:hover{text-decoration:underline}
.grp-list{display:grid;gap:10px}
.grp{display:grid;gap:10px;padding:14px;border-radius:14px;background:rgba(255,255,255,.65);border:1px solid var(--line)}
@media (min-width:560px) and (max-width:979px),(min-width:1240px){.grp{grid-template-columns:1fr auto;align-items:center}}
.grp-h b{display:block;font-size:1.05rem}
.grp-h span{color:var(--muted);font-size:.95rem}
.price{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:220px}
.price span{display:block;text-align:center;padding:8px 10px;border-radius:10px;background:rgba(255,200,61,.18);font-weight:800;font-size:1.1rem;line-height:1.2}
.price small{display:block;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}

/* how rehearsals work: 4 horizontal steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:640px){.steps{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--card-bg);border:1px solid var(--card-line);box-shadow:var(--card-shadow);border-radius:var(--radius);overflow:hidden;padding-bottom:18px}
.step-img{aspect-ratio:4/3;overflow:hidden}
.step-img img{width:100%;height:100%;object-fit:cover}
.step-n{display:block;margin:16px 18px 4px;font-weight:900;font-size:.85rem;letter-spacing:.14em;color:var(--link)}
.step h3{margin:0 18px 8px;font-size:1.2rem;line-height:1.25}
.step p{margin:0 18px;color:var(--muted)}
.step .full-text{margin-top:8px}
.more-wrap{margin-top:28px;text-align:center}

/* teacher */
.photo-wrap{border-radius:var(--radius);overflow:hidden}
.photo-wrap .photo{display:block;border-radius:0;border:0}
#teacher h2{margin-top:0}

/* gallery, shows, videos as one slider */
.slider{position:relative}
.slider-track{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:8px;scrollbar-width:none;overscroll-behavior-x:contain}
.slider-track::-webkit-scrollbar{display:none}
@media (min-width:700px){.slider-track{grid-auto-columns:calc((100% - 32px)/2.4)}}
@media (min-width:1080px){.slider-track{grid-auto-columns:calc((100% - 48px)/3.3)}}
.slide{margin:0;scroll-snap-align:start;position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;background:#111}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide>button{all:unset;cursor:pointer;display:block;width:100%;height:100%;position:relative}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 16px;color:#fff;font-weight:800;font-size:1.1rem;line-height:1.25;background:linear-gradient(180deg,transparent,rgba(11,10,22,.82));pointer-events:none}
.slide figcaption span{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.slide figcaption small{display:block;font-weight:500;font-size:.88rem;opacity:.9;margin-top:4px}
.slide .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.slide .play svg{width:26px;height:26px;margin-left:3px}
.slide iframe{width:100%;height:100%;border:0;display:block}
.slider-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
.snav{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.75);color:var(--fg);display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s}
.snav svg{width:22px;height:22px}
.snav:hover{background:var(--accent);transform:translateY(-2px)}
.snav:active{transform:scale(.94)}
.snav:disabled{opacity:.35;cursor:default;transform:none}
.slide-count{font-weight:800;min-width:64px;text-align:center;color:var(--muted)}

/* reviews */
.review{max-width:820px;margin:0 auto;text-align:center}
.review .card-body{padding:36px 24px}
.stars{color:#E9A91C;font-size:1.4rem;letter-spacing:.2em;margin-bottom:10px}
.review .quote{font-size:clamp(1.1rem,2.4vw,1.4rem)}
.review .btn{margin-top:14px}

/* enrol form on a slightly darker band */
section.enrol{background:linear-gradient(180deg,rgba(214,200,170,.38),rgba(214,200,170,.5))}
.enrol .contact-list{margin-top:20px}
.enrol h2{margin-top:0}
.form-msg:empty{display:none}

/* small trainers / hall-rent block at the very bottom */
/* trainers / hall-rent block at the bottom: more visible than a footnote, less than the enrolment form */
.rent-mini{padding-block:8px 48px}
.rent-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;padding:28px 32px;border-radius:var(--radius);background:var(--card-bg);border:1px solid var(--card-line);box-shadow:var(--card-shadow);border-left:6px solid var(--accent)}
.rent-box .eyebrow{margin-bottom:6px}
.rent-box h3{margin:0 0 8px;font-size:clamp(1.3rem,2.4vw,1.7rem)}
.rent-box p{margin:0;max-width:62ch}
.rent-box .rent-addr{color:var(--muted);font-size:.9rem;margin-top:6px}

/* ---- effects (scope point 12) ---- */
/* buttons: light reaction */
.btn{transition:transform .2s,box-shadow .2s,background .2s}
.btn:active{transform:translateY(0) scale(.97)}
/* sections float in on scroll (only when JS runs) */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
/* ===== PHOTO EFFECTS - swap this whole block to change the photo treatment =====
   Photos are in colour by default (no grayscale). Effects: slow zoom on the hero photo,
   gentle zoom when a photo enters the view, stronger zoom on hover (desktop). */
.hero-img.zoom{animation:kenburns 24s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.bw img{filter:none;transition:transform 1.2s ease}
.reveal.in .zoom:not(.hero-img),.in-view .zoom:not(.hero-img){transform:scale(1.04)}
@media (hover:hover){.bw:hover img.zoom:not(.hero-img){transform:scale(1.07)}}
/* ===== end PHOTO EFFECTS ===== */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .hero-img.zoom,.zoom,.bw img{animation:none!important;transform:none!important;transition:none!important}
  .btn:hover,.btn:active,.snav:hover,.snav:active{transform:none}
  .slider-track{scroll-behavior:auto}
  .aurora .blob{animation:none}
}

.hero .shell{padding-bottom:88px}
.grp-h span{white-space:nowrap}

/* Gallery = photo carousel (scope 2026-10-11 p16b): 6 at a time on a wide screen, 3 on a tablet, 2 on a phone; arrows + swipe (native scroll with snap). */
.g-car{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.g-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 10px)/2);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;padding:6px 2px 10px}
.g-track::-webkit-scrollbar{display:none}
@media (min-width:640px){.g-track{grid-auto-columns:calc((100% - 28px)/3);gap:14px}}
@media (min-width:1000px){.g-track{grid-auto-columns:calc((100% - 70px)/6)}}
.g-item{scroll-snap-align:start;padding:0;border:4px solid var(--paper);background:var(--paper);box-shadow:var(--card-shadow);cursor:pointer;overflow:hidden;line-height:0}
.g-item img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .3s}
.g-item:hover img,.g-item:focus-visible img{transform:scale(1.05)}
.g-arr{width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--gold);color:var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.g-arr svg{width:22px;height:22px}
.g-arr:disabled{opacity:.35;cursor:default;box-shadow:none}
@media (max-width:639px){.g-car{grid-template-columns:1fr}.g-arr{position:absolute;top:50%;z-index:2;transform:translateY(-50%)}.g-prev{left:-6px}.g-next{right:-6px}}
@media (prefers-reduced-motion:reduce){.g-track{scroll-behavior:auto}.g-item img{transition:none}}
/* Shows: every card opens the show page (scope 2026-10-11 p16b). */
a.show-link{display:block;color:inherit;text-decoration:none;transition:transform .2s}
a.show-link:hover,a.show-link:focus-visible{transform:translateY(-4px)}
/* Yellow "Виж снимките" on the five cards with a page; the whole card stays the link (scope 2026-10-11 p16i item 2). */
.show-btn{margin-top:14px}

/* Videos as the same carousel when the CMS has more than 6 (scope 2026-10-11 p16g); sixth show card "Disco Night" without a page. */
.v-track .video{scroll-snap-align:start}
/* p16i item 3: yellow label, dark text (.show .card-body p made the text grey on black). */
.show-soon .card-body .soon{display:inline-block;margin-top:8px;background:var(--gold);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:800 .95rem/1 var(--font-head);text-transform:uppercase;letter-spacing:.08em;padding:7px 10px 6px}

/* Gallery and videos in pages (scope 2026-10-11 p16h items 2, 9): >=800px = pages of 6 photos (3 x 2, the look of the v1.5 grid: white print borders,
   slight tilt), the arrows move one whole page; below 800px = one photo per view, swipe or arrows. v1.5.js groups the photos
   of .g-pages by 6 into .g-page (then adds .paged); one page only = .g-single, the arrows hide. */
.g-pages .g-track{grid-auto-columns:100%;gap:16px;padding:10px 8px 14px;scroll-padding-inline:8px}
.g-pages .g-page{display:contents}
@media (min-width:800px){
  .g-pages .g-track:not(.paged){grid-auto-columns:calc((100% - 32px)/3)}
  .g-pages .g-page{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-content:start;scroll-snap-align:start}
  .g-pages .g-page>*{scroll-snap-align:none}
  .g-pages .g-page .g-item{border-width:6px}
  .g-pages .g-page .g-item:nth-child(odd){transform:rotate(-.8deg)}
  .g-pages .g-page .g-item:nth-child(even){transform:rotate(.8deg)}
}
.g-pages.g-single .g-arr{visibility:hidden}

/* Lightbox = carousel over all photos of the block (scope 2026-10-11 p16h, item 7; lightbox.js): arrows at the screen edges, counter under the photo. */
.lightbox{overflow:visible}
.lb-arr{position:fixed;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--gold);color:var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.lb-arr svg{width:24px;height:24px}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-count{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);margin:0;padding:6px 12px 5px;background:var(--ink);color:var(--gold);font:800 .95rem/1 var(--font-head);letter-spacing:.08em}
.lightbox.lb-one .lb-arr,.lightbox.lb-one .lb-count{display:none}
.lb-arr:focus-visible{outline:3px solid #fff;outline-offset:2px}