/* ═══════════════════════════════════════════════════════════════
   Tineret Maranata — stil
   MOBILE FIRST: stilurile de baza sunt pentru telefon.
   Ecranele mari primesc ajustari in @media (min-width: ...).
   ═══════════════════════════════════════════════════════════════ */

/* ─── Variabile ──────────────────────────────────────────────── */
:root {
  /* Culori luate din sigla de pe Instagram:
     violet aprins #571885, indigo adanc #1A123A, alb #FDFAFD. */

  --sand:      #F1ECF8;   /* fundalul deschis, alb cu tenta lila     */
  --bone:      #FBF8FE;   /* carduri si text pe fundal inchis        */
  --ink:       #150F2B;   /* sectiunile inchise                      */
  --ink-2:     #241645;
  --ink-soft:  #574A73;   /* text secundar pe fundal deschis         */

  --violet:      #A97AE0; /* accent pe fundal INCHIS (deschis)       */
  --violet-deep: #6B2B9E; /* accent pe fundal DESCHIS (inchis)       */
  --magenta:     #8E2FA8; /* accent secundar, doar in degradeuri     */

  --line:      rgba(21, 15, 43, .14);

  /* fonturi */
  --f-display: 'Archivo', system-ui, sans-serif;
  --f-serif:   'Instrument Serif', Georgia, serif;
  --f-body:    'Inter', system-ui, sans-serif;

  /* spatiu — marginile laterale pe telefon */
  --gutter: 20px;
  --radius: 14px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* niciodata scroll orizontal pe telefon */
}

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

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(169, 122, 224, .25);
}

h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ─── Textura de film ────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .30;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ─── Navigatie (mobil: compacta) ────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--gutter);
  padding-top: calc(12px + env(safe-area-inset-top));
  background: rgba(241, 236, 248, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav__logo {
  display: flex;
  flex-direction: column;
  line-height: .95;
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.02em;
}
.nav__logo-main { font-size: 15px; text-transform: uppercase; }
.nav__logo-sub {
  font-size: 15px;
  text-transform: uppercase;
  color: var(--violet-deep);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}
.nav__links a {
  padding: 10px 8px;            /* tinta de atins confortabila */
  border-radius: 8px;
}
/* pe telefon ascundem linkurile secundare, ramane Instagram */
.nav__links a[href="#evenimente"],
.nav__links a[href="#despre"] { display: none; }

.nav__cta {
  background: var(--ink);
  color: var(--bone) !important;
  padding: 10px 16px !important;
  border-radius: 100px;
  font-weight: 600;
  white-space: nowrap;
}

/* ─── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  /* min() in interiorul lui min-height: altfel 'max-height' ar fi
     ignorat, fiindca min-height are prioritate peste el.
     Inaltimea o da continutul (votul), minimul e doar o podea. */
  min-height: min(72svh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 92px var(--gutter) 44px;
  overflow: hidden;
  color: var(--bone);
  isolation: isolate;
}

/* fundal: lumini violet intr-o sala intunecata, in degradeul siglei.
   Ca sa pui o poza reala, adauga in .hero__bg:
     background-image: url('../img/hero.jpg');
     background-size: cover; background-position: center;
   si pastreaza .hero__bg::after pentru intunecare. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 18% 12%,  rgba(139, 63, 190, .62), transparent 60%),
    radial-gradient(95%  70% at 88% 28%,  rgba(169, 122, 224, .34), transparent 62%),
    radial-gradient(130% 95% at 50% 100%, rgba(18, 12, 38, .95),   transparent 70%),
    linear-gradient(168deg, #3B1668 0%, #1E1240 52%, #120C26 100%);
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16,11,33,.92) 0%, rgba(16,11,33,.35) 45%, rgba(16,11,33,.55) 100%);
}

.hero__eyebrow {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(251, 248, 254, .68);
  margin-bottom: 14px;
}

.hero__title {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .84;
  letter-spacing: -.045em;
  /* dimensionat dupa cel mai lung cuvant ("MARANATA"),
     ca sa nu depaseasca ecranul nici la 320px latime */
  font-size: clamp(2.3rem, 13.2vw, 9rem);
  margin-bottom: 18px;
}
.hero__line-1, .hero__line-2 { display: block; }
.hero__line-2 {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(251, 248, 254, .85);
  padding-left: .04em;
}

.hero__lede {
  font-size: 16px;
  line-height: 1.55;
  max-width: 34ch;
  color: rgba(251, 248, 254, .86);
  margin-bottom: 26px;
}
.hero__lede em {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.18em;
  color: var(--violet);
  font-weight: 400;
}

/* Intrebarea din hero: mai mica decat logotipul, ca sa incapa
   un text lung fara sa iasa din ecran. */
.hero__title--intrebare,
.hero__title--mic {
  font-size: clamp(1.9rem, 8.4vw, 3.6rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: none;
  text-wrap: balance;
  max-width: 16ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ─── Votul pe teme ──────────────────────────────────────────── */
.vot { display: block; }

.vot__group {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}

.vot__legenda {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251, 248, 254, .55);
  margin-bottom: 11px;
  padding: 0;
}

/* Temele: pastile care se aseaza pe cate randuri e nevoie */
.vot__teme {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.tema {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 46px;             /* confortabil de atins cu degetul */
  padding: 11px 16px;
  border: 1px solid rgba(251, 248, 254, .26);
  border-radius: 100px;
  background: rgba(251, 248, 254, .06);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.tema:active { transform: scale(.98); }

.tema__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.tema__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

/* bifat — varianta compatibila cu orice browser */
.tema__input:checked ~ .tema__text { font-weight: 600; }
.tema:has(.tema__input:checked) {
  background: var(--violet);
  border-color: var(--violet);
  color: #1B1038;
}
/* fara :has() (browsere vechi): macar un contur clar */
.tema__input:checked ~ .tema__text::after {
  content: ' ✓';
  font-weight: 700;
}
.tema:has(.tema__input:checked) .tema__text::after { content: ' ✓'; }

.tema:has(.tema__input:focus-visible),
.tema__input:focus-visible ~ .tema__text {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 100px;
}

/* tema pe care nu o mai poti bifa, fiindca ai atins limita */
.tema--stins {
  opacity: .4;
  cursor: default;
}

.vot__alta { margin-bottom: 18px; }

.vot__input {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  font-family: var(--f-body);
  font-size: 16px;              /* 16px: iPhone nu face zoom la focus */
  color: var(--bone);
  background: rgba(251, 248, 254, .07);
  border: 1px solid rgba(251, 248, 254, .24);
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
}
.vot__input::placeholder { color: rgba(251, 248, 254, .4); }
.vot__input:focus {
  outline: none;
  border-color: var(--violet);
  background: rgba(169, 122, 224, .14);
}

.btn--vot {
  width: 100%;
  min-height: 54px;
  border: 0;
  cursor: pointer;
  font-family: var(--f-body);
  font-size: 15px;
  background: var(--bone);
  color: var(--ink);
}

.vot__eroare {
  font-size: 13.5px;
  color: #F0B5A6;
  margin: 0 0 12px;
}

.vot__nota {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(251, 248, 254, .5);
  margin-top: 13px;
  max-width: 44ch;
}

/* ─── Rezultatele votului ────────────────────────────────────── */
.rez { margin: 4px 0 22px; }

.rez__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251, 248, 254, .55);
  margin-bottom: 12px;
}
.rez__total { color: var(--violet); }

.rez__list { display: flex; flex-direction: column; gap: 7px; }

.rez__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(251, 248, 254, .07);
  font-size: 14px;
}
/* bara proportionala, in spatele textului */
.rez__bara {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  background: rgba(169, 122, 224, .34);
  border-radius: 10px;
}
.rez__nume { position: relative; flex: 1; }
.rez__nr {
  position: relative;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--violet);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;              /* tinta de atins pe telefon */
  padding: 0 22px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--bone); color: var(--ink); }
.btn--ghost {
  border: 1px solid rgba(251, 248, 254, .45);
  color: var(--bone);
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 40px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(251, 248, 254, .5);
  writing-mode: vertical-rl;
}

/* ─── Titluri de sectiune ────────────────────────────────────── */
.section__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: clamp(1.75rem, 8vw, 3rem);
  line-height: 1;
  margin-bottom: 26px;
}
.section__num {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--violet-deep);
  -webkit-text-stroke: 0;
}
.section__title--light { color: var(--bone); }
.section__title--light .section__num { color: var(--violet); }

/* ─── Intalnirea saptamanala ─────────────────────────────────── */
.meet {
  padding: 46px var(--gutter);
}

.meet__card {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 24px;
}

.meet__kicker {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--violet-deep);
  margin-bottom: 12px;
}

.meet__headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .88;
  margin-bottom: 16px;
}
.meet__day  { font-size: clamp(2.1rem, 11.5vw, 5rem); }
.meet__time {
  font-size: clamp(1.4rem, 7vw, 2.4rem);
  color: var(--violet-deep);
}

.meet__next {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.meet__next strong { color: var(--ink); font-weight: 600; }

/* Linia despartitoare apartine blocului cu detalii: daca acesta
   lipseste (loc si detaliu goale in data.php), nu ramane nicio
   linie suspendata pe card. */
.meet__meta {
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.meet__detail {
  font-family: var(--f-serif);
  font-size: 19px;
  line-height: 1.35;
  margin-bottom: 4px;
}
.meet__place { font-size: 14px; color: var(--ink-soft); }

.meet__invite {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--bone);
}

/* ─── Anunturi ───────────────────────────────────────────────── */
.news { padding: 20px var(--gutter) 46px; }

.news__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.news__item {
  position: relative;
  background: var(--bone);
  border: 1px solid var(--line);
  border-left: 3px solid var(--violet-deep);
  border-radius: var(--radius);
  padding: 20px 18px;
}

.news__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.news__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--violet-deep);
  padding: 5px 10px;
  border-radius: 100px;
}
.news__date {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: .04em;
}

.news__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 7px;
}

.news__text {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.news__gol {
  font-family: var(--f-serif);
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 40ch;
}

.news__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--violet-deep);
}

/* ─── Evenimente ─────────────────────────────────────────────── */
.events { padding: 20px var(--gutter) 52px; }

.events__empty {
  font-family: var(--f-serif);
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* pe telefon: o coloana, carduri portret ca in feed */
.events__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* latimea o da coloana, nu inaltimea. Fara 'width' explicit,
     'min-height' + 'aspect-ratio' ar latii cardul peste ecran. */
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 5;
  min-height: 330px;
  padding: 20px 18px;
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--bone);
  isolation: isolate;
}

.card__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--card-img, none);
  background-size: cover;
  background-position: center;
  transition: transform .5s ease;
}
/* intunecare ca textul sa fie mereu lizibil peste poza */
.card__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,9,26,.88) 0%, rgba(13,9,26,.30) 55%, rgba(13,9,26,.55) 100%);
}

/* Fundaluri generate cand evenimentul nu are poza.
   Cele trei variante se aleg din 'accent' in inc/data.php. */
.card--violet .card__bg {
  background-color: #5A1E8C;
  background-image:
    var(--card-img,
      radial-gradient(105% 78% at 22% 14%, rgba(190, 134, 238, .82), transparent 62%)),
    radial-gradient(120% 90% at 78% 96%, rgba(24, 14, 48, .95), transparent 70%),
    linear-gradient(160deg, #6B2BA6 0%, #2A1350 100%);
}
.card--indigo .card__bg {
  background-color: #2E1C5C;
  background-image:
    var(--card-img,
      radial-gradient(105% 78% at 26% 16%, rgba(146, 122, 220, .74), transparent 62%)),
    radial-gradient(120% 90% at 80% 96%, rgba(14, 10, 30, .95), transparent 70%),
    linear-gradient(160deg, #3C2472 0%, #150E30 100%);
}
.card--inchis .card__bg {
  background-color: #1B1338;
  background-image:
    var(--card-img,
      radial-gradient(100% 72% at 24% 12%, rgba(169, 122, 224, .44), transparent 60%)),
    radial-gradient(120% 90% at 82% 98%, rgba(8, 6, 18, .96), transparent 70%),
    linear-gradient(160deg, #2A1B52 0%, #100A22 100%);
}

.card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .9;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(251, 248, 254, .14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(251, 248, 254, .22);
}
.card__day {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.03em;
}
.card__month {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 4px;
  color: rgba(251, 248, 254, .8);
}

.card__soon {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 100px;
  background: var(--bone);
  color: var(--ink);
}

.card__body { margin-top: auto; padding-top: 20px; }

.card__title {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .92;
  font-size: clamp(2rem, 10vw, 2.9rem);
}

.card__sub {
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.3;
  margin-top: 8px;
  color: rgba(251, 248, 254, .84);
}

.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(251, 248, 254, .2);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(251, 248, 254, .78);
}
.card__where::before { content: '·'; margin-right: 8px; }

/* ─── Despre ─────────────────────────────────────────────────── */
.about {
  background: var(--ink);
  color: var(--bone);
  padding: 52px var(--gutter);
  border-radius: 26px 26px 0 0;
}

.about__inner { margin-bottom: 34px; }

.about__text {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(251, 248, 254, .8);
  max-width: 58ch;
  margin-bottom: 22px;
}

.about__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.about__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(251, 248, 254, .14);
  font-size: 15px;
}
.about__list li::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--violet);
}

.about__quote {
  display: flex;
  flex-direction: column;
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: .95;
  font-size: clamp(1.9rem, 9.5vw, 3.4rem);
}
.about__quote-em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--violet);
  font-size: 1.04em;
}

/* ─── Formular de cereri ─────────────────────────────────────── */
.form {
  background: var(--ink);
  color: var(--bone);
  padding: 52px var(--gutter) 56px;
}
.form .section__title { color: var(--bone); }
.form .section__num { color: var(--violet); }

.form__intro {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(251, 248, 254, .78);
  max-width: 52ch;
  margin-bottom: 26px;
}

.form__box { display: block; }

/* Capcana invizibila pentru roboti.
   Ascunsa prin decupare, nu prin 'left: -9999px': un element mutat
   atat de departe largeste zona de derulare si strica alinierea. */
.form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__group {
  border: 0;
  padding: 0;
  margin: 0 0 26px;
}

.form__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(251, 248, 254, .62);
  margin-bottom: 12px;
  padding: 0;
}
.form__req { color: var(--violet); }

/* Optiunile: carduri mari, usor de atins cu degetul */
.form__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-height: 56px;
  padding: 15px 16px;
  border: 1px solid rgba(251, 248, 254, .2);
  border-radius: 12px;
  background: rgba(251, 248, 254, .04);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.opt:active { background: rgba(251, 248, 254, .09); }

.opt__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.opt__mark {
  flex: none;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border: 2px solid rgba(251, 248, 254, .45);
  border-radius: 50%;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.opt__body { display: flex; flex-direction: column; gap: 3px; }

.opt__text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
.opt__hint {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(251, 248, 254, .55);
}

/* starea selectata — varianta compatibila cu orice browser */
.opt__input:checked ~ .opt__mark {
  border-color: var(--violet);
  box-shadow: inset 0 0 0 4px var(--violet);
}
.opt__input:focus-visible ~ .opt__mark {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

/* starea selectata — evidentiaza si cardul, pe browsere moderne */
.opt:has(.opt__input:checked) {
  border-color: var(--violet);
  background: rgba(169, 122, 224, .14);
}
.opt:has(.opt__input:checked) .opt__mark {
  border-color: var(--violet);
  box-shadow: inset 0 0 0 4px var(--violet);
}
/* focus vizibil la navigarea cu tastatura */
.opt:has(.opt__input:focus-visible) {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.form__row {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 18px;
}

.form__field { display: block; margin-bottom: 18px; }
.form__row .form__field { margin-bottom: 0; }

.form__input {
  width: 100%;
  min-height: 52px;              /* confortabil pe telefon */
  padding: 14px 16px;
  font-family: var(--f-body);
  font-size: 16px;               /* 16px: iPhone nu mai face zoom la focus */
  line-height: 1.45;
  color: var(--bone);
  background: rgba(251, 248, 254, .06);
  border: 1px solid rgba(251, 248, 254, .2);
  border-radius: 12px;
  transition: border-color .18s ease, background-color .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.form__input::placeholder { color: rgba(251, 248, 254, .38); }
.form__input:focus {
  outline: none;
  border-color: var(--violet);
  background: rgba(169, 122, 224, .1);
}
.form__input.is-bad { border-color: #D98A7A; }

.form__textarea {
  resize: vertical;
  min-height: 130px;
}

.form__error {
  font-size: 13.5px;
  color: #E9A797;
  margin-top: 7px;
}
.form__error--top {
  margin: 0 0 18px;
  padding: 13px 15px;
  border: 1px solid rgba(233, 167, 151, .4);
  border-radius: 10px;
  background: rgba(233, 167, 151, .1);
}

.btn--send {
  width: 100%;
  min-height: 54px;
  background: var(--bone);
  color: var(--ink);
  font-size: 15px;
  margin-top: 6px;
  border: 0;
  font-family: var(--f-body);
  cursor: pointer;
}
.btn--send:active { transform: scale(.985); }

.form__note {
  font-size: 13px;
  color: rgba(251, 248, 254, .5);
  margin-top: 14px;
  line-height: 1.5;
}

/* confirmarea dupa trimitere */
.form__ok {
  padding: 30px 22px;
  border: 1px solid rgba(169, 122, 224, .45);
  border-radius: var(--radius);
  background: rgba(169, 122, 224, .1);
}
.form__ok-title {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.03em;
  font-size: clamp(1.9rem, 9vw, 3rem);
  line-height: 1;
  margin-bottom: 12px;
}
.form__ok-text {
  font-family: var(--f-serif);
  font-size: 19px;
  line-height: 1.4;
  color: rgba(251, 248, 254, .88);
  max-width: 40ch;
}
.form__ok-again {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--violet);
  border-bottom: 1px solid currentColor;
}

/* ─── Footer ─────────────────────────────────────────────────── */
.foot {
  background: var(--ink);
  color: rgba(251, 248, 254, .72);
  padding: 30px var(--gutter);
  padding-bottom: calc(30px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(251, 248, 254, .14);
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 14px;
}

.foot__brand {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: 17px;
  color: var(--bone);
  margin-bottom: 3px;
}

.foot__side {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.foot__ig, .foot__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--violet);
  font-weight: 500;
}

.foot__copy {
  font-size: 12px;
  color: rgba(251, 248, 254, .45);
  padding-top: 16px;
  border-top: 1px solid rgba(251, 248, 254, .12);
}

/* ─── Dezvaluire la scroll ───────────────────────────────────── *
 * Facuta DOAR din CSS, legata de pozitia de scroll a browserului.
 * Fara JavaScript: continutul nu poate ramane blocat invizibil.
 * Browserele care nu sustin 'animation-timeline' (Safari, Firefox)
 * sar peste bloc si afiseaza continutul normal.                    */
@keyframes apare {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card,
    .news__item,
    .meet__card,
    .about__inner {
      animation: apare linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card__bg { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ECRANE MAI MARI — ajustari peste baza de telefon
   ═══════════════════════════════════════════════════════════════ */

/* ─── Telefon mare / tableta mica ────────────────────────────── */
@media (min-width: 560px) {
  :root { --gutter: 32px; }

  .nav__links a[href="#evenimente"],
  .nav__links a[href="#despre"] { display: inline-flex; }

  .nav__links { gap: 8px; font-size: 14px; }

  .hero { padding-bottom: 56px; }
  .hero__lede { font-size: 17px; }

  .events__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .card { aspect-ratio: 3 / 4; min-height: 360px; }

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

  .form__row { flex-direction: row; }
  .form__row .form__field { flex: 1; }
  .btn--send { width: auto; padding: 0 40px; }

  /* Votul: pe ecrane mai mari campul si butonul nu se mai intind
     pe toata latimea, ar arata ciudat. */
  .vot        { max-width: 680px; }
  .vot__input { max-width: 420px; }
  .btn--vot   { width: auto; padding: 0 42px; }

  .foot {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
  }
  .foot__side { align-items: flex-end; }
  .foot__copy { width: 100%; }
}

/* ─── Tableta / laptop ───────────────────────────────────────── */
@media (min-width: 900px) {
  :root { --gutter: 56px; }

  body { font-size: 17px; }

  .nav { padding: 16px var(--gutter); }
  .nav__logo-main, .nav__logo-sub { font-size: 17px; }

  .hero {
    min-height: min(92svh, 980px);
    padding-bottom: 72px;
  }
  .hero__title { font-size: clamp(6rem, 13vw, 11rem); }
  .hero__line-2 { -webkit-text-stroke-width: 2px; }
  .hero__lede { font-size: 19px; max-width: 42ch; }

  .meet, .news, .events { padding-left: var(--gutter); padding-right: var(--gutter); }
  .meet { padding-top: 78px; padding-bottom: 60px; }

  .meet__card {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    grid-template-areas:
      "kick  meta"
      "head  meta"
      "next  invite";
    gap: 10px 40px;
    align-items: start;
    padding: 40px 38px;
  }
  .meet__kicker { grid-area: kick; }
  .meet__headline { grid-area: head; margin-bottom: 8px; }
  .meet__next { grid-area: next; margin-bottom: 0; }
  .meet__meta { grid-area: meta; margin-bottom: 0; padding-top: 0; border-top: 0; }
  .meet__invite { grid-area: invite; justify-self: start; align-self: end; }
  .meet__detail { font-size: 22px; }

  .events { padding-bottom: 80px; }
  .events__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .card { min-height: 400px; padding: 24px 22px; }
  .card__title { font-size: clamp(2rem, 2.4vw, 2.6rem); }

  /* pe mouse: usoara marire a fundalului la hover */
  .card:hover .card__bg { transform: scale(1.045); }

  .news { padding-bottom: 60px; }
  .news__list { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .news__item { padding: 26px 24px; }
  .news__title { font-size: 23px; }

  .about {
    padding: 86px var(--gutter);
    border-radius: 40px 40px 0 0;
  }
  .about__inner {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 56px;
  }
  .about__text { margin-bottom: 0; font-size: 18px; }
  .about__quote { flex-direction: row; gap: 16px; align-items: baseline; }

  .form { padding: 82px var(--gutter) 84px; }
  .form__intro { font-size: 18px; margin-bottom: 34px; }

  /* doua coloane: optiunile in stanga, datele tale in dreapta */
  .form__box {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 0 56px;
    align-items: start;
    max-width: 1100px;
  }
  .form__group { grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0; }
  .form__row   { grid-column: 2; }
  .form__box > .form__field { grid-column: 2; }
  .btn--send   { grid-column: 2; justify-self: start; }
  .form__note  { grid-column: 2; }
  .form__error--top { grid-column: 1 / -1; }

  .opt { padding: 17px 18px; }
  .opt__text { font-size: 16px; }

  .form__ok { padding: 44px 40px; max-width: 760px; }

  .foot { padding: 40px var(--gutter); }

  .section__title { margin-bottom: 34px; }
}

/* ─── Ecran lat: continut centrat ────────────────────────────── */
/* ─── Ecran lat: o singura coloana, comuna tuturor sectiunilor ──
 *
 * Toate sectiunile primesc acelasi jgheab, calculat astfel incat
 * continutul sa stea intr-o coloana centrata de 1240px. Asa, hero-ul,
 * intalnirea si "Scrie-ne" incep exact pe aceeasi verticala.
 *
 * Nu centram elementele unul cate unul: asa s-ar fi centrat titlul,
 * dar nu si textul de sub el, si ar iesi tocmai nepotrivirea pe care
 * o rezolvam aici. Fundalurile raman pe toata latimea, fiindca
 * folosim padding, nu margin.
 */
@media (min-width: 1360px) {
  .nav,
  .hero,
  .meet,
  .news,
  .events,
  .about,
  .form,
  .foot {
    padding-left:  max(var(--gutter), calc((100% - 1240px) / 2));
    padding-right: max(var(--gutter), calc((100% - 1240px) / 2));
  }

  .hero__inner { width: 100%; }
}