/* =====================  Instagram «ΣΤΙΓΜΕΣ ΠΟΥ ΞΕΧΩΡΙΖΟΥΝ»  ===================== */
.insta { padding-block: clamp(48px, 5.5vw, 104px); }
.insta__head { margin-bottom: clamp(24px, 2.6vw, 44px); }
.insta__title { text-align: left; margin: .25em 0 0; }
.insta__handle {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 14px;
  font-family: var(--f-sans); font-size: 14px; letter-spacing: .12em;
  color: var(--c-white); transition: color var(--dur) var(--ease);
}
.insta__handle:hover { color: var(--c-gold); }
.insta__handle .icon { width: 18px; height: 18px; }

.insta__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(10px, 1.15vw, 22px);
  grid-template-columns: repeat(4, 1fr);
}
.insta__tile a { display: block; position: relative; aspect-ratio: 9 / 16; overflow: clip; background: #101010; }
.insta__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .9s var(--ease); }
[data-richness="2"] .insta__tile a:hover img { scale: 1.05; }
/* Το τριγωνάκι «reel» πάνω δεξιά, όπως στο design */
.insta__badge {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px;
  border-radius: 6px; background: rgb(0 0 0 / .55); border: 1px solid rgb(255 255 255 / .35);
}
.insta__badge::after {
  content: ""; position: absolute; inset: 50% auto auto 54%; translate: -50% -50%;
  border-left: 8px solid var(--c-white); border-block: 5px solid transparent;
}
@media (max-width: 899px) { .insta__grid { grid-template-columns: repeat(2, 1fr); } }

/* =====================  ΒΟΤΑΝΙΚΟΣ — τρίστηλο κείμενο  ===================== */
.vintro { padding-block: clamp(48px, 5.5vw, 104px); }
.vintro__grid {
  display: grid; gap: clamp(24px, 2.6vw, 52px);
  grid-template-columns: minmax(220px, 1fr) 1.35fr 1.35fr;
  align-items: start;
}
.vintro__title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(22px, 1.667vw, 32px); line-height: 1.3;
  letter-spacing: var(--ls-h1); text-transform: uppercase;
  color: var(--c-gold); margin: 0;
}
.vintro__col { color: var(--c-white); font-size: clamp(15px, .94vw, 18px); line-height: 1.75; }
.vintro__col p { margin: 0 0 1em; }
.vintro__col p:last-child { margin-bottom: 0; }
.vintro__col strong { font-weight: 600; }
@media (max-width: 999px) { .vintro__grid { grid-template-columns: 1fr; } }

/* =====================  ΒΟΤΑΝΙΚΟΣ — carousel  ===================== */
.vcar { position: relative; padding-block: clamp(20px, 2.2vw, 36px); }
.vcar__track {
  list-style: none; margin: 0; padding-inline: var(--page-margin);
  display: flex; gap: clamp(10px, 1.15vw, 22px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.vcar__track::-webkit-scrollbar { display: none; }
.vcar__item { flex: 0 0 clamp(240px, 21.2vw, 407px); scroll-snap-align: start; }
.vcar__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.vcar__nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: rgb(8 8 8 / .6); border: 1px solid rgb(255 255 255 / .3);
  color: var(--c-white); cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.vcar__nav:hover { background: var(--c-gold); color: var(--c-black); }
.vcar__nav--prev { left: 12px; }
.vcar__nav--prev .icon { rotate: 180deg; }
.vcar__nav--next { right: 12px; }
html:not(.has-js) .vcar__nav { display: none; }

.vwide { margin: 0; }
.vwide img { width: 100%; height: auto; display: block; }

/* =====================  ΣΧΗΜΑ — ονόματα + κάρτα  ===================== */
.slineup { position: relative; overflow: clip; padding-block: clamp(48px, 5.5vw, 104px); display: grid; }
.slineup__media { grid-area: 1 / 1; position: relative; }
.slineup__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slineup__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(8 8 8 / .94) 0%, rgb(8 8 8 / .82) 34%, rgb(8 8 8 / .45) 62%, rgb(8 8 8 / .15) 100%);
}
.slineup__inner { grid-area: 1 / 1; position: relative; z-index: 2; align-self: center; }
.slineup__names {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(24px, 2.3vw, 44px); line-height: 1.2;
  letter-spacing: var(--ls-h1); text-transform: uppercase;
  margin: 0 0 clamp(24px, 2.6vw, 44px);
  /* Ήταν κεντραρισμένος σε πλήρες πλάτος — στα 1306px έπιανε 1205px και το
     δεξί μισό του έπεφτε πάνω στο πρόσωπο, γιατί η σκίαση σβήνει προς τα
     δεξιά (.92 αριστερά, .25 δεξιά). Τον περιορίζω στη στήλη της κάρτας,
     ώστε κείμενο και τίτλος να κάθονται μαζί πάνω στο σκούρο. */
  max-width: 620px;
  text-wrap: balance;
}
.slineup__card {
  background: rgb(0 0 0 / .55); backdrop-filter: blur(4px);
  border: 1px solid rgb(255 255 255 / .08);
  padding: clamp(22px, 2.4vw, 44px);
  max-width: 620px;
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2vw, 32px);
}
.slineup__text p { margin: 0 0 1em; }
.slineup__text p:last-child { margin-bottom: 0; }

/* =====================  ΣΧΗΜΑ — προφίλ καλλιτεχνών  =====================
   Μετρημένο στο Figma, Frame 96 (node 175-936) στα 1920:
     ενότητα   padding 102 / 32 / 107 / 32 · gap 103 από τον μικρό τίτλο
     λωρίδα    1856 × 783 — η εξαγωγή της γραφίστριας έχει ήδη ψημένα τα
               gradients, γι' αυτό δεν τα ξαναγράφουμε εδώ
     αριθμοί   left 0 · top 208 · gap 23
     κείμενο   left 968 · top 165 · πλάτος 672 · gap 52 · όνομα Literata 700/54
   Τα ποσοστά μετρώνται πάνω στο ΠΛΑΤΟΣ της λωρίδας — επειδή και η εικόνα
   κλιμακώνεται με το πλάτος, η στοίχιση κρατάει σε κάθε viewport. */
.artists { position: relative; padding-block: clamp(40px, 5.31vw, 102px) clamp(40px, 5.57vw, 107px); }
.artists__eyebrow { text-align: center; }
.artists__stage { position: relative; margin-top: clamp(24px, 5.36vw, 103px); }

/* Κινητό & tablet: οι αριθμοί σε σειρά πάνω από την εικόνα. Το desktop τους
   γυρίζει σε στήλη στην αριστερή άκρη, όπως το Figma. */
.artists__switch {
  position: static; z-index: 3;
  display: flex; flex-direction: row; justify-content: center; gap: 22px;
  margin-bottom: 16px;
}
.artists__num {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--f-sans); font-size: 14px; font-weight: 500; line-height: 20px;
  letter-spacing: .1em; color: var(--c-secondary); position: relative;
  text-shadow: 0 1px 6px rgb(0 0 0 / .65);
  transition: color var(--dur) var(--ease);
}
.artists__num::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; scale: 0 1; transform-origin: left;
  transition: scale var(--dur) var(--ease);
}
.artists__num:hover, .artists__num.is-active { color: var(--c-white); }
.artists__num.is-active::after { scale: 1 1; }

.artist { display: none; }
.artist.is-active { display: block; }
html:not(.has-js) .artist { display: block; margin-bottom: clamp(32px, 4vw, 72px); }
html:not(.has-js) .artists__switch { display: none; }

.artist__media { position: relative; overflow: clip; }
.artist__media img { width: 100%; height: auto; display: block; }
/* Μόνο στη στοιβαγμένη διάταξη: σβήνει την κάτω ακμή για να «κάτσει» το κείμενο. */
.artist__media::after {
  content: ""; position: absolute; inset: auto 0 0; height: 45%;
  background: linear-gradient(180deg, rgb(8 8 8 / 0) 0%, #080808 100%);
}

.artist__body {
  position: relative; z-index: 2;
  padding-inline: var(--page-margin);
  margin-top: clamp(-40px, -2vw, -18px);
}
.artist__season { font-size: clamp(12px, .833vw, 16px); margin: 0 0 .4em; }
.artist__name {
  font: var(--t-h1); letter-spacing: var(--ls-h1); text-transform: uppercase;
  color: var(--c-gold); margin: 0;
}
.artist__text {
  color: var(--c-white); font-size: clamp(15px, .94vw, 18px); line-height: 1.78;
  margin-top: clamp(16px, 2.71vw, 52px);
}
.artist__text p { margin: 0 0 clamp(16px, 1.61vw, 31px); }
.artist__text p:last-child { margin-bottom: 0; }

/* ---- Desktop: η διάταξη του Figma — κείμενο ΔΙΠΛΑ στη φωτογραφία ----
   Εικόνα και κείμενο μοιράζονται το ίδιο κελί grid: το κείμενο πατάει πάνω
   στο σβησμένο δεξί μέρος της φωτογραφίας, όπως στη μακέτα. Με grid (και όχι
   absolute) η ενότητα ψηλώνει μόνη της αν κάποιο βιογραφικό είναι μεγαλύτερο. */
@media (min-width: 1100px) {
  .artists { padding-inline: 32px; }
  .artists__switch {
    position: absolute; left: 0; top: 0;
    margin: 11.207% 0 0;                       /* 208 / 1856 του πλάτους */
    flex-direction: column; justify-content: flex-start; gap: 23px;
  }
  .artist.is-active,
  html:not(.has-js) .artist { display: grid; align-items: start; margin-bottom: 0; }
  .artist__media, .artist__body { grid-area: 1 / 1; }
  .artist__media::after { content: none; }
  .artist__body {
    width: 36.207%;                            /* 672 / 1856 */
    margin: 8.890% 0 0 52.155%;                /* top 165 · left 968 */
    padding-inline: 0;
  }
}

@media (max-width: 899px) {
  .slineup__names { font-size: clamp(20px, 6vw, 30px); max-width: none; text-align: center; }
  .slineup__card { max-width: none; }
}
}