/* Αμυγδαλοτσακίσματα: one stylesheet for every page, Greek and English.
   Colours come from the logo and the timetable posters: black, red, pink. */

/* ---------- Fonts (self-hosted, SIL OFL, see assets/fonts) ---------- */

@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/commissioner-normal-greek.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/commissioner-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/literata-normal-greek.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/literata-normal-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/literata-italic-greek.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/literata-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  --ink: #0d0b0b;          /* night black */
  --ink-soft: #2a2525;
  --lime: #f5f1ea;         /* whitewash */
  --lime-deep: #e9e2d6;
  --red: #e3141c;          /* logo red: large text and fills only */
  --red-text: #c0101a;     /* red that passes contrast as small text on light */
  --pink: #f8a0f0;         /* logo pink */
  --pink-soft: #fbd0f6;
  --muted: #5b5250;

  --display: "Commissioner", "Arial Black", system-ui, sans-serif;
  --body: "Literata", Georgia, "Times New Roman", serif;

  --gutter: clamp(16px, 5vw, 56px);
  --max: 1180px;
  --focus: var(--ink);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
  line-height: 1.6;
  font-optical-sizing: auto;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.02;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--pink);
  color: var(--ink);
  padding: 0.6rem 1rem;
  font-family: var(--display);
  font-weight: 700;
}
.skip:focus { top: 1rem; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The round logo, recoloured with currentColor through a mask. */
.emblem {
  display: block;
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: url(../img/logo.webp) center / contain no-repeat;
          mask: url(../img/logo.webp) center / contain no-repeat;
}

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.section-title {
  font-weight: 900;
  font-size: clamp(2.4rem, 1.4rem + 5vw, 5rem);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 11, 11, 0.92);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
  --focus: var(--pink);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
  min-height: 3.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(0.8rem, 0.35rem + 2.6vw, 1.05rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-right: auto;
  padding: 0.5rem 0;
}
.brand .emblem { width: 2.5rem; color: #fff; }

.nav {
  order: 3;
  width: 100%;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.nav::-webkit-scrollbar { display: none; }
.nav ul {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.nav a {
  display: block;
  padding: 0.7rem 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
}
.nav a:hover { color: var(--pink); }

.lang {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 2px solid var(--pink);
  color: var(--pink);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}
.lang:hover { background: var(--pink); color: var(--ink); }

@media (min-width: 900px) {
  .nav {
    order: 0;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
  }
  .nav ul { gap: 1.6rem; }
}

/* ---------- Hero ---------- */

/* The photo fills the first screen below the sticky header (two rows tall
   on phones, one row from 900px). The height is fixed rather than grown to
   fit, because the crop below measures it (container units need a set size). */
.hero {
  position: relative;
  isolation: isolate;
  container-type: size;
  height: max(34rem, calc(100svh - 6.5rem));
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--ink);
  overflow: hidden;
  --focus: var(--pink);
}
@media (min-width: 900px) {
  .hero { height: max(34rem, calc(100svh - 3.75rem)); }
}

/* The frame crops the photo like object-fit: cover (centred across, 40% down,
   as before), but by hand, so the title can be pinned to a spot on the photo
   itself: the empty stage above the ring of dancers. The photo is 3:2. */
.hero-frame {
  position: absolute;
  width: max(100cqw, 150cqh);
  aspect-ratio: 3 / 2;
  left: calc((100cqw - max(100cqw, 150cqh)) * 0.5);
  top: calc((100cqh - max(66.667cqw, 100cqh)) * 0.4);
}
.hero-photo,
.hero-photo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-frame::before {
  /* a soft shadow behind the title only */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 34% 15% at 48.5% 38.5%, rgba(13, 11, 11, 0.55), transparent);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(13, 11, 11, 0.94) 0%, rgba(13, 11, 11, 0.55) 45%, rgba(13, 11, 11, 0.15) 100%);
}

/* 48.5% across and 38.5% down the photo is the empty stage. */
.hero-title {
  position: absolute;
  z-index: 1;
  left: 48.5%;
  top: 38.5%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  font-weight: 900;
  /* scales with the photo, but never wider than a phone screen allows */
  font-size: clamp(1.9rem, min(calc(max(100cqw, 150cqh) * 0.044), 11.5cqw), 6rem);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(13, 11, 11, 0.6);
}
.hero-title span { display: block; }
.hero-title span + span { color: var(--pink); }

/* Above the photo frame: the frame is positioned and larger than the hero,
   so without this it sits on top of the button and swallows clicks. */
.hero .wrap {
  position: relative;
  z-index: 2;
  padding-top: 2rem;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.hero .lede {
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  max-width: 34ch;
  margin-bottom: 2rem;
}
.hero .lede strong { font-weight: 600; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 2px solid transparent;
  min-height: 3rem;
}
.btn-pink { background: var(--pink); color: var(--ink); }
.btn-pink:hover { background: #fff; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--red); }


/* ---------- The group ---------- */

.about { padding: clamp(4rem, 10vw, 8rem) 0; }
.about .wrap {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
.about-text { max-width: 38rem; }
.about-text .big {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  line-height: 1.4;
}
.about-text .eyebrow { color: var(--red-text); }

.places {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.places li {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}

.about-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: end;
}
.about-photos figure { margin: 0; }
.about-photos img { width: 100%; object-fit: cover; }
.about-photos .tall img { aspect-ratio: 4 / 5; }
.about-photos .wide img { aspect-ratio: 4 / 5; }

@media (min-width: 900px) {
  .about .wrap { grid-template-columns: 1fr 1fr; align-items: center; }
  .about .section-title { font-size: clamp(2.4rem, 1rem + 3.4vw, 4rem); }
  .about-photos .wide { transform: translateY(3rem); }
}

/* ---------- Timetable ---------- */

.classes {
  position: relative;
  overflow: hidden;
  background: var(--pink);
  padding: clamp(4rem, 10vw, 8rem) 0;
}
.classes::after {
  /* the logo, huge and faint, as on the posters */
  content: "";
  position: absolute;
  width: min(80vw, 760px);
  aspect-ratio: 1;
  right: -18%;
  top: -10%;
  background: var(--red);
  opacity: 0.1;
  -webkit-mask: url(../img/logo.webp) center / contain no-repeat;
          mask: url(../img/logo.webp) center / contain no-repeat;
  pointer-events: none;
}
.classes .wrap { position: relative; z-index: 1; }
.classes .section-title { color: var(--ink); }
.classes .intro { max-width: 36rem; }

.week {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 640px) { .week { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .week { grid-template-columns: repeat(4, 1fr); } }

.day {
  background: var(--lime);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1rem;
}
.day h3 {
  font-size: 1.6rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.slots { list-style: none; padding: 0; margin: 0; }
.slots li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(13, 11, 11, 0.15);
}
.slots time {
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
}

.level {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  border: 2px solid var(--ink);
  white-space: nowrap;
}
.level-new { background: var(--red-text); border-color: var(--red-text); color: #fff; }
.level-old { background: var(--ink); color: var(--pink); }
.level-adv { background: transparent; color: var(--ink); }

.legend {
  display: grid;
  gap: 1rem;
  margin: 0 0 2.5rem;
  padding: 0;
}
@media (min-width: 800px) { .legend { grid-template-columns: repeat(3, 1fr); } }
.legend div { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.legend dt { margin: 0; }
.legend dd { margin: 0; font-size: 0.98rem; }

/* Map on the left, the practical details stacked beside it. */
.visit {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 860px) { .visit { grid-template-columns: 1.25fr 1fr; } }

.visit-map {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 14px;
  background: var(--lime-deep);
}
@media (min-width: 860px) {
  .visit-map { aspect-ratio: auto; height: 100%; min-height: 24rem; }
}

.practical {
  display: grid;
  gap: 0.75rem;
}
.practical > div {
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  padding: 1.5rem;
  --focus: var(--pink);
}
.practical h3 {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 0.75rem;
}
.practical p { margin-bottom: 0.5rem; }
.practical .big-line {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.2;
}
.practical a { color: var(--pink); }

/* ---------- Teacher ---------- */

.teacher {
  background: var(--ink);
  color: #fff;
  padding: clamp(4rem, 10vw, 8rem) 0;
  --focus: var(--pink);
}
.teacher .wrap { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 860px) { .teacher .wrap { grid-template-columns: 0.9fr 1.1fr; } }

.teacher-photo {
  position: relative;
  width: min(100% - 24px, 30rem);
  margin: 12px auto;
}
.teacher-photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 45% 30%;
  border-radius: 50%;
}
.teacher-photo::after {
  /* a ring round the portrait: the circle of the dance */
  content: "";
  position: absolute;
  inset: -12px;
  border: 2px solid var(--red);
  border-radius: 50%;
}
.teacher .eyebrow { color: var(--pink); }
.teacher .section-title { font-size: clamp(2.2rem, 1.3rem + 4.4vw, 4.4rem); }
.teacher .section-title span { display: block; color: var(--pink); }
.teacher p { max-width: 36rem; color: rgba(255, 255, 255, 0.88); }
.teacher a { color: var(--pink); }

/* ---------- Gallery ---------- */

.gallery {
  background: var(--ink);
  color: #fff;
  padding: 0 0 clamp(4rem, 10vw, 8rem);
  --focus: var(--pink);
}
.gallery .section-title { color: #fff; }
.gallery .eyebrow { color: var(--pink); }

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  gap: 6px;
}
@media (min-width: 800px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } }

.grid li { margin: 0; }
.grid a { display: block; height: 100%; overflow: hidden; }
.grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.grid a:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .grid img { transition: none; }
  .grid a:hover img { transform: none; }
}
.grid .wide { grid-column: span 2; }
.grid .tall { grid-row: span 2; }
.grid .tall img { aspect-ratio: auto; }

/* YouTube videos: embedded players, the files stay on YouTube. */
.videos-title {
  font-weight: 900;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  text-transform: uppercase;
  margin: clamp(2.5rem, 6vw, 4rem) 0 1.25rem;
}
.videos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
@media (min-width: 800px) {
  /* one video fills the width; two or more sit side by side */
  .videos:has(li + li) { grid-template-columns: repeat(2, 1fr); }
}
.videos iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--ink-soft);
}

/* Photo viewer (assets/js/gallery.js) */
html:has(.lightbox[open]) { overflow: hidden; }

.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(13, 11, 11, 0.97);
  color: #fff;
  --focus: var(--pink);
}
.lightbox::backdrop { background: rgba(13, 11, 11, 0.97); }
.lightbox[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  animation: lb-in 0.2s ease-out;
}
@keyframes lb-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } }

.lb-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 4rem 1rem 0.5rem;
}
.lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lb-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.75rem var(--gutter) max(1rem, env(safe-area-inset-bottom));
}
.lb-count {
  margin: 0 auto 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  white-space: nowrap;
}

.lb-btn {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border: 2px solid var(--pink);
  border-radius: 50%;
  background: transparent;
  color: var(--pink);
  cursor: pointer;
}
.lb-btn:hover { background: var(--pink); color: var(--ink); }
.lb-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
}

/* ---------- Contact ---------- */

.contact {
  background: var(--red);
  color: #fff;
  padding: clamp(4rem, 10vw, 8rem) 0;
  --focus: #fff;
}
.contact .section-title { color: #fff; }
.contact .intro { max-width: 34rem; font-size: 1.15rem; }

.contact-list {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Cards size to their content and wrap to a new row rather than
   breaking an address or a handle in the middle. */
@media (min-width: 640px) {
  .contact-list { flex-direction: row; flex-wrap: wrap; }
  .contact-list li { flex: 1 1 auto; }
  .contact-list .value { white-space: nowrap; }
}
.contact-list a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  text-decoration: none;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  overflow-wrap: break-word;
}
.contact-list a:hover { background: #fff; color: var(--ink); }
.contact-list .label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink);
}
.contact-list a:hover .label { color: var(--red-text); }
.contact-list .value {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  line-height: 1.2;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.75);
  padding: 3rem 0;
  font-size: 0.92rem;
  --focus: var(--pink);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
}
.site-footer .emblem { width: 4.5rem; color: var(--pink); }
.site-footer p { margin: 0; }
.site-footer .foot-lang { margin-left: auto; }
.site-footer a { color: #fff; }