/* ===== Gallery page — Sections 1–3 ===== */

/* Common: cap all gallery images at 350px wide */
.gal-hero img,
.mosaic img,
.strip img,
.ba-card img { max-width: 350px; width: 100%; height: auto; }

/* Section 1: Hero mosaic */
.gal-hero{
  background:
    radial-gradient(720px 300px at 6% -10%, rgba(127,255,212,.10), transparent 60%),
    radial-gradient(620px 260px at 100% 10%, rgba(75,211,255,.08), transparent 60%);
}
.gal-hero-grid{ display:grid; gap:22px; grid-template-columns: 1fr; align-items:start; }
.hero-copy .lead{ color: var(--text); }
.mosaic{
  display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0,1fr));
}
.mosaic-item{ margin:0; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding:10px; transition: transform .2s ease, border-color .2s ease, background-color .2s ease; }
.mosaic-item:hover,
.mosaic-item:focus{ transform: translateY(-2px); border-color: rgba(127,255,212,.35); background: rgba(255,255,255,.04); outline: none; }
.mosaic-item figcaption{ color: var(--muted); font-size: var(--step--1); margin-top:6px; }

@media (min-width: 860px){
  .gal-hero-grid{ grid-template-columns: 1.1fr .9fr; }
  .mosaic{ grid-template-columns: repeat(2, 1fr); }
}

/* Section 2: Filmstrip */
.filmstrip{
  background:
    radial-gradient(620px 280px at 50% 120%, rgba(127,255,212,.07), transparent 60%);
}
.filmstrip .intro{ color: var(--muted); margin: 8px 0 16px; }

.strip{
  display:grid; grid-auto-flow: column; grid-auto-columns: 75%;
  gap:12px; overflow-x:auto; scroll-snap-type: x mandatory;
  padding: 8px 24px 8px; scroll-padding-inline: 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.shot{ margin:0; scroll-snap-align: start; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding:10px; transition: transform .2s ease, border-color .2s ease, background-color .2s ease; }
.shot:hover,
.shot:focus{ transform: translateY(-2px); border-color: rgba(127,255,212,.35); background: rgba(255,255,255,.04); outline: none; }
.shot figcaption{ color: var(--muted); font-size: var(--step--1); margin-top:6px; }

@media (min-width: 900px){
  .strip{ grid-auto-columns: 40%; }
}

/* Section 3: Before / After */
.before-after{
  background:
    radial-gradient(640px 260px at 0% 0%, rgba(75,211,255,.07), transparent 60%);
}
.before-after .intro{ color: var(--muted); margin: 8px 0 16px; }

.ba-grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
.ba-card{
  position:relative; margin:0; border-radius: var(--radius); overflow:hidden;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); padding:10px;
}
.ba-card img{ display:block; border-radius: 10px; }
.ba-top{ position:relative; z-index:2; transition: opacity .25s ease; }
.ba-bottom{ position:absolute; left:10px; right:10px; top:10px; bottom:38px; object-fit: cover; z-index:1; }
.ba-card:hover .ba-top{ opacity:0; }
.ba-card figcaption{ color: var(--muted); font-size: var(--step--1); margin-top:6px; position:relative; z-index:3; }

@media (min-width: 860px){
  .ba-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Zoom overlay (toggle by JS) */
.zoomable{ cursor: zoom-in; }
.zooming-active .zoomable.is-zoomed{ position: relative; z-index: 50; }
.zoom-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.7); display:none;
}
.zoom-overlay.is-open{ display:block; }
.zoomable.is-zoomed img{ transform: scale(1.06); transition: transform .2s ease; }
/* ===== Section 4: Platforms & Details ===== */
.details{
  background:
    radial-gradient(620px 280px at 100% 0%, rgba(127,255,212,.07), transparent 60%);
}
.details .intro{ color: var(--muted); margin: 8px 0 16px; }

.detail-grid{
  display:grid; gap:14px; grid-template-columns: 1fr;
}
.detail-card{
  margin:0; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding:10px; position:relative; overflow:hidden;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.detail-card:hover{ transform: translateY(-2px); border-color: rgba(127,255,212,.35); background: rgba(255,255,255,.04); box-shadow: var(--shadow); }
.detail-card figcaption{ color: var(--muted); font-size: var(--step--1); margin-top:6px; }

/* subtle “shine” sweep */
.shine::after{
  content:""; position:absolute; inset:-40% -80% auto auto; width:60%; height:200%;
  background: linear-gradient(120deg, rgba(255,255,255,.0) 35%, rgba(255,255,255,.15) 50%, rgba(255,255,255,0) 65%);
  transform: translateX(-120%) rotate(12deg);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.shine:hover::after{ transform: translateX(80%) rotate(12deg); }

@media (min-width: 860px){
  .detail-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ===== Section 5: Engine Sequences ===== */
.sequence{
  background:
    radial-gradient(520px 260px at 0% 100%, rgba(75,211,255,.07), transparent 60%);
}
.sequence .intro{ color: var(--muted); margin: 8px 0 16px; }

.sequence-grid{
  position:relative;
  display:grid; gap:12px; grid-template-columns: 1fr;
  counter-reset: seq;
}
.seq-card{
  counter-increment: seq;
  margin:0; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding:10px; position:relative;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.seq-card:hover{ transform: translateY(-2px); border-color: rgba(127,255,212,.35); background: rgba(255,255,255,.04); }
.seq-card::before{
  content: counter(seq);
  position:absolute; left:10px; top:10px; width:24px; height:24px; border-radius:999px;
  display:grid; place-items:center; font-weight:700; font-size: var(--step--1);
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#001018;
}
.seq-card figcaption{ color: var(--muted); font-size: var(--step--1); margin-top:6px; }

/* connecting line on wide screens */
@media (min-width: 940px){
  .sequence-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); align-items:start; }
  .sequence-grid::before{
    content:""; position:absolute; left:0; right:0; top:22px; height:2px; 
    background: linear-gradient(90deg, #2a323a, transparent 70%);
  }
  .seq-card::before{ left:50%; translate:-50% 0; }
}

/* ===== Section 6: Community Wall (polaroids) ===== */
.community-wall{
  background:
    radial-gradient(640px 260px at 50% -10%, rgba(127,255,212,.06), transparent 60%);
}
.community-wall .intro{ color: var(--muted); margin: 8px 0 16px; }

.polaroids{
  display:grid; gap:14px; grid-template-columns: 1fr;
}
.polaroid{
  margin:0; background:#0f141a; border:1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding:10px; width:min(100%, 350px);
  position:relative; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.polaroid::before{
  content:""; position:absolute; left:50%; top:-8px; translate:-50% 0;
  width:68px; height:14px; background:rgba(255,255,255,.08); border-radius:4px;
}
.polaroid figcaption{ color: var(--muted); font-size: var(--step--1); margin-top:6px; }
.polaroid:hover{ transform: translateY(-4px) rotate(0); border-color: rgba(127,255,212,.35); box-shadow: 0 16px 40px rgba(0,0,0,.45); }

.polaroid.p1{ transform: rotate(-2.5deg); }
.polaroid.p2{ transform: rotate(2.5deg); }
.polaroid.p3{ transform: rotate(-1.5deg); }
.polaroid.p4{ transform: rotate(1.5deg); }

@media (min-width: 880px){
  .polaroids{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Cap sizes for new sections too */
.detail-card img,
.seq-card img,
.polaroid img { max-width:350px; width:100%; height:auto; }
/* --- FIX: badges outside the cards, no overlap --- */
.seq-card{
  overflow: visible;                /* чтобы псевдоэлемент мог выходить за рамки */
  padding-top: 10px;                /* небольшой зазор сверху */
  position: relative;
}

/* базовое положение бейджа: над левым верхним углом карточки */
.seq-card::before{
  top: -14px;                       /* ВНЕ коробки */
  left: 14px;
  width: 24px; height: 24px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--step--1);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #001018;
  position: absolute;
  content: counter(seq);
  z-index: 2;
}

/* на широких экранах — центрируем бейдж над карточкой и поднимаем линию */
@media (min-width: 940px){
  .sequence-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); align-items: start; }
  .sequence-grid::before{
    top: -6px;                      /* линия тоже выше, чтобы не задевать контент */
    height: 2px;
    left: 0; right: 0; position: absolute;
    content: ""; 
    background: linear-gradient(90deg, #2a323a, transparent 70%);
  }
  .seq-card::before{
    left: 50%;
    transform: translateX(-50%);    /* бейдж точно по центру над карточкой */
  }
}
/* ===== Section 7: Lift Moments ===== */
.lift-moments{
  background:
    radial-gradient(620px 280px at 0% 0%, rgba(75,211,255,.07), transparent 60%);
}
.lift-moments .intro{ color: var(--muted); margin: 8px 0 16px; }

.live-grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
.live-card{
  margin:0; position:relative; overflow:hidden;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding:10px;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.live-card:hover, .live-card:focus{ transform: translateY(-2px); border-color: rgba(127,255,212,.35); background: rgba(255,255,255,.04); outline:none; box-shadow: var(--shadow); }
.live-card figcaption{ color: var(--muted); font-size: var(--step--1); margin-top:6px; }
.live-badge{
  position:absolute; right:10px; top:10px; padding:4px 8px; border-radius:999px; font-weight:700; font-size:var(--step--1);
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#001018;
}

@media (min-width: 880px){
  .live-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ===== Section 8: Hands & Grip (monochrome → color on hover) ===== */
.hands{
  background:
    radial-gradient(520px 260px at 100% 100%, rgba(127,255,212,.06), transparent 60%);
}
.hands .intro{ color: var(--muted); margin: 8px 0 16px; }

.mono-grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
.mono-card{
  margin:0; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding:10px; transition: transform .2s ease, border-color .2s ease, background-color .2s ease, filter .2s ease;
  filter: grayscale(1) contrast(1.05);
}
.mono-card:hover, .mono-card:focus{ transform: translateY(-2px); border-color: rgba(127,255,212,.35); background: rgba(255,255,255,.04); filter: none; outline:none; }
.mono-card figcaption{ color: var(--muted); font-size: var(--step--1); margin-top:6px; }

@media (min-width: 860px){
  .mono-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ===== Section 9: Lines & Angles (skewed frames) ===== */
.angles{
  background:
    radial-gradient(640px 260px at 50% -10%, rgba(127,255,212,.06), transparent 60%);
}
.angles .intro{ color: var(--muted); margin: 8px 0 16px; }

.angle-grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
.angle-card{
  margin:0; position:relative; overflow:hidden;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding:12px; transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.angle-card:hover, .angle-card:focus{ transform: translateY(-2px); border-color: rgba(127,255,212,.35); background: rgba(255,255,255,.04); outline:none; }
.angle-card img{ transform: skewY(-2deg); transition: transform .25s ease, filter .25s ease; }
.angle-card:hover img{ transform: skewY(0deg) scale(1.03); filter: saturate(1.06); }
.angle-card figcaption{ color: var(--muted); font-size: var(--step--1); margin-top:6px; }

@media (min-width: 880px){
  .angle-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Ensure ≤350px width for new section images */
.live-card img,
.mono-card img,
.angle-card img { max-width:350px; width:100%; height:auto; }
/* ===== Section 10: Etiquette ===== */
.etiquette{
  background:
    radial-gradient(620px 280px at 50% -10%, rgba(127,255,212,.08), transparent 60%);
}
.etiquette .intro{ color: var(--muted); margin: 8px 0 16px; }

.etiq-grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
.rule-card{
  margin:0; position:relative; overflow:hidden;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding:10px;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.rule-card:hover, .rule-card:focus{ transform: translateY(-2px); border-color: rgba(127,255,212,.35); background: rgba(255,255,255,.04); outline:none; box-shadow: var(--shadow); }
.rule-card figcaption{ color: var(--muted); font-size: var(--step--1); margin-top:6px; }
.rule-overlay{
  position:absolute; inset:auto 10px 10px 10px; padding:8px 10px; border-radius:10px;
  background: rgba(0,0,0,.55); color:#fff; font-size: var(--step--1); opacity:0; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.rule-card:hover .rule-overlay, .rule-card:focus .rule-overlay{ opacity:1; transform:none; }

@media (min-width: 880px){
  .etiq-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ===== Section 11: Daylight filmstrip ===== */
.daylight{
  background:
    radial-gradient(520px 260px at 100% 100%, rgba(75,211,255,.07), transparent 60%);
}
.daylight .intro{ color: var(--muted); margin: 8px 0 16px; }

.day-strip{
  display:grid; grid-auto-flow: column; grid-auto-columns: 75%;
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding: 8px 24px; scroll-padding-inline:24px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.day-shot{
  margin:0; scroll-snap-align:start; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding:10px; transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.day-shot:hover, .day-shot:focus{ transform: translateY(-2px); border-color: rgba(127,255,212,.35); background: rgba(255,255,255,.04); outline:none; }
.day-shot figcaption{ color: var(--muted); font-size: var(--step--1); margin-top:6px; }

@media (min-width: 900px){
  .day-strip{ grid-auto-columns: 40%; }
}

/* ===== Section 12: Annotated Stills ===== */
.annotated{
  background:
    radial-gradient(640px 260px at 0% 0%, rgba(127,255,212,.06), transparent 60%);
}
.annotated .intro{ color: var(--muted); margin: 8px 0 16px; }

.anno-grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
.anno-card{
  margin:0; position:relative; overflow:hidden;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding:10px;
}
.anno-card figcaption{ color: var(--muted); font-size: var(--step--1); margin-top:6px; }
.dot{
  position:absolute; width:12px; height:12px; border-radius:999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 0 0 rgba(127,255,212,.6);
  animation: ping 1.8s infinite;
}

/* positions per card */
.a1 .d1{ left: 58%; top: 26%; }  /* rib stack */
.a1 .d2{ left: 44%; top: 72%; }  /* knee track */
.a2 .d1{ left: 24%; top: 60%; }  /* shin angle */
.a2 .d2{ left: 12%; top: 54%; }  /* bar path close */
.a3 .d1{ left: 62%; top: 18%; }  /* elbow/wrist */
.a3 .d2{ left: 48%; top: 34%; }  /* ribs */
.a4 .d1{ left: 44%; top: 22%; }  /* torso tall */
.a4 .d2{ left: 52%; top: 64%; }  /* shins quiet */

@keyframes ping{
  0%{ box-shadow: 0 0 0 0 rgba(127,255,212,.45); }
  70%{ box-shadow: 0 0 0 16px rgba(127,255,212,0); }
  100%{ box-shadow: 0 0 0 0 rgba(127,255,212,0); }
}

@media (min-width: 880px){
  .anno-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* cap widths for new images */
.rule-card img,
.day-shot img,
.anno-card img { max-width:350px; width:100%; height:auto; }
/* ===== Section 13: Glossary (no images) ===== */
.glossary{
  background:
    radial-gradient(620px 280px at 100% 0%, rgba(127,255,212,.07), transparent 60%);
}
.glossary .intro{ color: var(--muted); margin: 8px 0 16px; }

.cue-list{
  display:grid; gap:12px;
  grid-template-columns: 1fr;
}
.cue{
  position:relative;
  padding:12px 12px 12px 56px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.cue:hover{ transform: translateY(-2px); background: rgba(255,255,255,.04); border-color: rgba(127,255,212,.35); }
.cue dt{
  margin:0 0 6px; font-weight:700;
  letter-spacing:.2px;
  position:relative;
}
.cue dd{ margin:0; color: var(--muted); }

/* big initial letter as a floating badge */
.cue::before{
  content: attr(data-letter);
  content: counter(item, upper-alpha);
}
.cue{
  counter-increment: item;
}
.cue::before{
  position:absolute; left:12px; top:12px; width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center; font-weight:700; font-size: var(--step--1);
  color:#001018; background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

/* ===== Section 14: Principles (no images) ===== */
.principles{
  background:
    radial-gradient(640px 260px at 0% 100%, rgba(75,211,255,.07), transparent 60%);
}
.principles .intro{ color: var(--muted); margin: 8px 0 16px; }

.principle-grid{
  display:grid; gap:14px; grid-template-columns: 1fr;
  counter-reset: pc;
}
.principle-card{
  counter-increment: pc;
  position:relative; padding:14px 12px 12px 56px;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.principle-card::before{
  content: counter(pc);
  position:absolute; left:12px; top:12px; width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center; font-weight:700; font-size: var(--step--1);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#001018;
}
.principle-card:hover{
  transform: translateY(-2px);
  border-color: rgba(127,255,212,.35);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
.principle-card h3{ margin:0 0 6px; }
.principle-card p{ margin:0; color: var(--muted); }

@media (min-width: 900px){
  .cue-list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .principle-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* Principles: hide default OL numbers, keep only blue badges */
.principle-grid{
  list-style: none;     /* убираем маркеры у ol */
  padding-left: 0;      /* сбрасываем отступ браузера */
  margin-left: 0;
}
.principle-grid > li::marker{ content: ""; } /* на всякий случай для браузеров с ::marker */