/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- Ετικέτα section (eyebrow) ---------- */

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--clay-deep);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.eyebrow::before {
  content: "";
  inline-size: var(--space-l);
  block-size: 2px;
  background: var(--clay);
  flex: none;
}
.sec--deep .eyebrow { color: var(--clay-lift); }

/* ---------- Lede: εισαγωγική παράγραφος ---------- */

.lede {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
  max-width: 46ch;
}
.muted { color: var(--ink-muted); }

/* ---------- Κουμπιά ---------- */

.btn {
  --btn-bg: var(--deep);
  --btn-fg: var(--ink-invert);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-m);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bg);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--step-0);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--accent { --btn-bg: var(--clay); --btn-fg: oklch(0.99 0.006 85); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-firm);   /* 3.2:1 — τα όρια ελέγχου το απαιτούν */
}
.btn--ghost:hover { border-color: var(--ink); }
.sec--deep .btn--ghost { --btn-fg: var(--ink-invert); border-color: var(--line-invert); }
.sec--deep .btn--ghost:hover { border-color: var(--ink-invert); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklch, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
.site-header[data-scrolled="true"] { border-block-end-color: var(--line); }

.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-block-size: var(--header-h);
}

.brand {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.1;
}
.brand span {
  display: block;
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- Πλοήγηση ---------- */

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}
.nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--step-0);
  padding-block: var(--space-3xs);
  border-block-end: 2px solid transparent;
}
.nav a:hover { border-block-end-color: var(--clay); }
.nav a[aria-current="page"] {
  border-block-end-color: var(--clay);
  font-weight: 600;
}

.lang-switch {
  display: flex;
  gap: var(--space-3xs);
  align-items: center;
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.lang-switch a { color: var(--ink-muted); }
.lang-switch a[aria-current="true"] { color: var(--ink); font-weight: 600; }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--line-firm);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 52rem) {
  .nav-toggle { display: inline-flex; align-items: center; gap: var(--space-2xs); }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    padding: var(--space-l) var(--gutter) var(--space-xl);
    background: var(--paper);
    border-block-end: 1px solid var(--line);
    transform: translate3d(0, -110%, 0);
    transition: transform var(--dur-base) var(--ease-inout);
  }
  .nav[data-open="true"] { transform: none; }
  .nav a { font-size: var(--step-2); font-family: var(--font-display); }
}

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

.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero h1 { font-size: var(--step-6); max-width: 16ch; }
.hero .lede { font-size: var(--step-2); max-width: 40ch; color: var(--ink-muted); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.hero-meta li { display: flex; align-items: center; gap: var(--space-2xs); }
.hero-meta li::before {
  content: "";
  inline-size: 5px; block-size: 5px;
  border-radius: 50%;
  background: var(--clay);
  flex: none;
}

/* ---------- Κάρτα υπηρεσίας ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  block-size: 100%;
  transition: border-color var(--dur-base) var(--ease-out);
}
.card:hover { border-color: var(--clay); }
.card h3 { font-size: var(--step-1); }
.card p { font-size: var(--step-0); color: var(--ink-muted); max-width: none; }
.card .card-num {
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--clay-deep);
  letter-spacing: var(--tracking-wide);
}
.sec--deep .card {
  background: var(--deep-lift);
  border-color: var(--line-invert);
}
.sec--deep .card p { color: var(--ink-invert-muted); }
.sec--deep .card .card-num { color: var(--clay-lift); }

/* ---------- Βήματα διαδικασίας ---------- */

.steps { counter-reset: step; }
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-s) var(--space-m);
  padding-block: var(--space-m);
  border-block-start: 1px solid var(--line);
  max-width: none;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--clay-deep);
  line-height: 1;
}
.steps h3 { font-size: var(--step-1); margin-block-end: var(--space-3xs); }
.steps p  { color: var(--ink-muted); }

/* ---------- Παράθεση ---------- */

.quote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  max-width: 24ch;
}
.quote-cite {
  font-family: var(--font-text);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-style: normal;
}

/* ---------- Πίνακας τιμών / πληροφοριών ---------- */

.deflist { display: grid; gap: 0; }
.deflist > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-m);
  align-items: baseline;
  padding-block: var(--space-s);
  border-block-start: 1px solid var(--line);
}
.deflist dt { font-weight: 600; }
.deflist dd { margin: 0; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- Φόρμα ---------- */

.field { display: grid; gap: var(--space-3xs); }
.field label { font-weight: 600; font-size: var(--step--1); }
.field .hint { font-size: var(--step--1); color: var(--ink-muted); }

.field input,
.field textarea,
.field select {
  inline-size: 100%;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--surface);
  border: 2px solid var(--line-firm);   /* 3.2:1 — απαίτηση WCAG για όρια ελέγχου */
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input:hover,
.field textarea:hover { border-color: var(--ink-muted); }
.field textarea { min-block-size: 8rem; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-muted); }  /* 5.3:1 — όχι ξεθωριασμένο */

.field-error {
  font-size: var(--step--1);
  color: var(--clay-deep);
  font-weight: 600;
}
.field :is(input, textarea)[aria-invalid="true"] { border-color: var(--clay-deep); }

/* ---------- Πλαίσιο επικοινωνίας ---------- */

.contact-block {
  display: grid;
  gap: var(--space-s);
  font-size: var(--step-1);
}
.contact-block a {
  color: inherit;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 2px;
}
.sec--deep .contact-block a { color: var(--ink-invert); }
.sec--deep .contact-block a:hover { color: var(--clay-lift); }

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

.site-footer {
  background: var(--deep);
  color: var(--ink-invert);
  padding-block: var(--space-2xl) var(--space-l);
}
.site-footer h2, .site-footer h3 { color: var(--ink-invert); }
.site-footer a { color: var(--ink-invert-muted); text-decoration: none; }
.site-footer a:hover { color: var(--clay-lift); text-decoration: underline; }
.site-footer .fine {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--line-invert);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  justify-content: space-between;
  font-size: var(--step--1);
  color: var(--ink-invert-muted);
}

/* ---------- Εικόνα με λεζάντα ---------- */

figure { margin: 0; }
figure img { inline-size: 100%; border-radius: var(--radius); }
figcaption {
  margin-block-start: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* ---------- Hero με φωτογραφία και κείμενο από πάνω ----------
   Το κείμενο κάθεται χαμηλά, εκεί που η σκίαση είναι πιο πυκνή, ώστε η
   αναγνωσιμότητα να μην εξαρτάται από το τι τυχαίνει να δείχνει η φωτογραφία. */

.img-hero {
  position: relative;
  display: grid;
  align-content: end;
  isolation: isolate;
  overflow: clip;
  min-block-size: clamp(24rem, 64svh, 40rem);
  padding-block: var(--space-3xl) var(--space-xl);
  background: var(--deep);   /* ό,τι φαίνεται πριν φορτώσει η εικόνα */
}

/* Το εξωτερικό στρώμα δέχεται το parallax από το JS.
   Είναι ψηλότερο από το hero ώστε να μετακινείται χωρίς να ξεμυτίζουν άκρες. */
.img-hero__media {
  position: absolute;
  inset: -18% 0;   /* περιθώριο για το parallax, ώστε να μη φανούν άκρες */
  z-index: -3;
  will-change: transform;
}

/* Το εσωτερικό <img> κρατάει το δικό του zoom — δύο ξεχωριστά στρώματα,
   ώστε το parallax και το zoom να μη διεκδικούν το ίδιο transform. */
.img-hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Το αρχείο είναι ήδη κομμένο στο θέμα, οπότε το κέντρο είναι σωστό. */
  object-position: 50% 46%;
  animation: img-hero-drift 18s var(--ease-inout) infinite alternate;
  will-change: transform;
}

/* Η μετατόπιση πάει προς τα κάτω-αριστερά, δηλαδή προς το θέμα.
   Αν πήγαινε προς τα πάνω θα κατέληγε στο θολό φόντο. */
@keyframes img-hero-drift {
  /* Χαμηλό scale επίτηδες: κάθε μεγέθυνση κοστίζει ευκρίνεια. */
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-2.5%, 2%, 0); }
}

/* ── Κόκκος φιλμ ──
   Το στοιχείο που κάνει τη διαφορά ανάμεσα σε «φωτογραφία» και «πλάνο».
   Τρέχει σε steps ώστε να τρεμοπαίζει όπως το φιλμ, όχι να γλιστράει. */
.img-hero__grain {
  position: absolute;
  /* Όσο μικρότερη η επιφάνεια με mix-blend-mode, τόσο φθηνότερο το κάθε καρέ.
     Το -25% καλύπτει ακριβώς τη μέγιστη μετατόπιση του jitter (15%). */
  inset: -25%;
  z-index: -2;
  background-image: url("/assets/img/grain.png");
  background-repeat: repeat;
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: grain-jitter 0.7s steps(1) infinite;
  will-change: transform;
}

@keyframes grain-jitter {
  0%   { transform: translate3d(0, 0, 0); }
  10%  { transform: translate3d(-4%, -8%, 0); }
  20%  { transform: translate3d(-12%, 4%, 0); }
  30%  { transform: translate3d(6%, -13%, 0); }
  40%  { transform: translate3d(-4%, 13%, 0); }
  50%  { transform: translate3d(-13%, 8%, 0); }
  60%  { transform: translate3d(12%, -2%, 0); }
  70%  { transform: translate3d(-2%, 12%, 0); }
  80%  { transform: translate3d(3%, 15%, 0); }
  90%  { transform: translate3d(-9%, 7%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Σκίαση: εγγυάται την αντίθεση ανεξάρτητα από τη φωτογραφία */
.img-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    oklch(0.15 0.018 160 / 0.94) 0%,
    oklch(0.15 0.018 160 / 0.78) 40%,
    oklch(0.15 0.018 160 / 0.42) 75%,
    oklch(0.15 0.018 160 / 0.30) 100%
  );
}

.img-hero h1,
.img-hero .img-hero__body { color: var(--ink-invert); }
.img-hero .lede { color: oklch(0.90 0.012 160); }   /* 13.9:1 πάνω στη σκίαση */
.img-hero .eyebrow { color: var(--clay-lift); }
.img-hero .eyebrow::before { background: var(--clay-lift); }
.img-hero a { color: var(--ink-invert); }
.img-hero a:hover { color: var(--clay-lift); }

/* ── Παραλλαγή αρχικής ──
   Ίδια λογική, διαφορετική αίσθηση: πιο ψηλό, κοντινότερο κάδρο, και σκίαση
   που έρχεται από τα αριστερά αντί για ίσια από κάτω — ώστε να μη μοιάζει
   με το banner των Υπηρεσιών. */

.img-hero--home {
  min-block-size: clamp(30rem, 84svh, 46rem);
  padding-block: var(--space-3xl) var(--space-2xl);
}

.img-hero--home::after {
  background:
    linear-gradient(to top,
      oklch(0.15 0.018 160 / 0.90) 0%,
      oklch(0.15 0.018 160 / 0.55) 55%,
      oklch(0.15 0.018 160 / 0.28) 100%),
    linear-gradient(to right,
      oklch(0.15 0.018 160 / 0.80) 0%,
      oklch(0.15 0.018 160 / 0.30) 55%,
      oklch(0.15 0.018 160 / 0.05) 100%);
}

.img-hero--home .img-hero__media img {
  object-position: 58% 42%;
  animation-duration: 24s;   /* πιο αργό από των Υπηρεσιών */
}

/* Στοιχεία που υπάρχουν μόνο στο hero της αρχικής */
.img-hero .hero-meta { color: oklch(0.86 0.012 160); }
.img-hero .hero-meta li::before { background: var(--clay-lift); }
.img-hero .btn--ghost { --btn-fg: var(--ink-invert); border-color: oklch(0.72 0.012 160); }
.img-hero .btn--ghost:hover { border-color: var(--ink-invert); }
.img-hero .btn { text-decoration: none; }

@media (max-width: 48rem) {
  .img-hero { min-block-size: clamp(20rem, 58svh, 28rem); }
  .img-hero__media img { object-position: 56% 46%; }   /* κρατά τα χέρια στο κάδρο */
  /* Στο κινητό το κείμενο είναι ψηλό και σπρώχνει τη φωτογραφία σε λωρίδα.
     Λιγότερο padding πάνω και μικρότερος τίτλος, ώστε να μείνει εικόνα να φανεί. */
  .img-hero--home {
    min-block-size: clamp(28rem, 78svh, 36rem);
    padding-block: var(--space-2xl) var(--space-l);
  }
  .img-hero--home h1 { font-size: var(--step-4); }
  .img-hero--home .lede { font-size: var(--step-0); }
  .img-hero--home .img-hero__media img { object-position: 62% 40%; }
  /* Πιο διάφανη σκίαση ψηλά, ώστε να διαβάζεται η φωτογραφία και όχι μόνο το σκούρο */
  .img-hero--home::after {
    background:
      linear-gradient(to top,
        oklch(0.15 0.018 160 / 0.90) 0%,
        oklch(0.15 0.018 160 / 0.80) 45%,
        oklch(0.15 0.018 160 / 0.45) 78%,
        oklch(0.15 0.018 160 / 0.12) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .img-hero__media img { animation: none; transform: scale(1.05); }
  .img-hero__grain { animation: none; opacity: 0.12; }
}

/* ---------- Τυπογραφικό banner ----------
   Χωρίς φωτογραφία. Υπάρχει μία μόνο διαθέσιμη εικόνα και χρησιμοποιείται ήδη
   στην αρχική — μια δεύτερη περικοπή της θα διαβαζόταν ως επανάληψη.
   Το βάθος έρχεται από δύο απαλές λάμψεις χρώματος και τον ίδιο κόκκο φιλμ. */

.type-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--deep);
  color: var(--ink-invert);
  padding-block: var(--space-3xl) var(--space-2xl);
}

/* Στρώμα 1 — δύο λάμψεις. Αναπνέουν πολύ αργά, δίνουν βάθος χωρίς φωτογραφία. */
.type-hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -4;
  background:
    radial-gradient(58% 54% at 74% 26%, oklch(0.63 0.155 42 / 0.36), transparent 70%),
    radial-gradient(66% 62% at 6% 98%, oklch(0.50 0.085 165 / 0.32), transparent 70%);
  animation: glow-breathe 26s var(--ease-inout) infinite alternate;
  will-change: transform;
}

@keyframes glow-breathe {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-2%, 1%, 0); }
}

/* Στρώμα 2 — ομόκεντροι δακτύλιοι από το ίδιο σημείο με τη λάμψη.
   Διαβάζονται ως κύμα πίεσης που απλώνεται. Μένουν ΑΚΙΝΗΤΟΙ επίτηδες:
   λεπτές γραμμές που κλιμακώνονται δημιουργούν μουαρέ. */
.type-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: repeating-radial-gradient(
    circle at 74% 26%,
    oklch(0.86 0.07 42 / 0.14) 0 1.5px,
    transparent 1.5px 52px
  );
  -webkit-mask-image: radial-gradient(75% 70% at 74% 26%, oklch(0 0 0) 20%, transparent 78%);
  mask-image: radial-gradient(75% 70% at 74% 26%, oklch(0 0 0) 20%, transparent 78%);
}

@media (prefers-reduced-motion: reduce) {
  .type-hero::before { animation: none; }
}

.type-hero h1 { color: var(--ink-invert); }
.type-hero .lede { color: oklch(0.90 0.012 160); }
.type-hero .eyebrow { color: var(--clay-lift); }
.type-hero .eyebrow::before { background: var(--clay-lift); }
.type-hero a { color: var(--ink-invert); }
.type-hero a:hover { color: var(--clay-lift); }

/* Μεγάλες τιμές — μεταφέρουν την πληροφορία που θα έδινε μια εικόνα */
.big-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  gap: var(--space-m);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--line-invert);
}
.big-prices > div { display: grid; gap: var(--space-3xs); }
.big-prices dt {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-invert-muted);
}
.big-prices dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--clay-lift);
  font-variant-numeric: tabular-nums;
}

/* ---------- Κάρτα πακέτου ---------- */

.pack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-m);
  border: 1px solid var(--line-invert);
  border-radius: var(--radius);
  background: var(--deep-lift);
}
.pack__label {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--clay-lift);
}
.pack__price {
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1;
  color: var(--ink-invert);
  font-variant-numeric: tabular-nums;
}
.pack__was {
  font-size: var(--step-0);
  color: var(--ink-invert-muted);
}
.pack__was s { text-decoration-thickness: 1px; }
.pack__save {
  align-self: flex-start;
  margin-block-start: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--clay);
  color: oklch(0.99 0.006 85);
  font-size: var(--step--1);
  font-weight: 600;
}
.pack__each {
  margin-block-start: auto;
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--line-invert);
  font-size: var(--step--1);
  color: var(--ink-invert-muted);
}

/* ---------- Βίντεο σε στήλη ----------
   Το αρχείο είναι 720px πλατύ. Μπαίνει σε στήλη ~430px, δηλαδή παίζει
   σμικρυμένο και μένει ευκρινές — σε full-bleed banner θα θόλωνε. */

.work-video {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius);
  background: var(--paper-sunk);
}

/* ---------- Θέση εικόνας ----------
   Προσωρινό. Αντικατάστησέ το με <picture> AVIF/WebP + ρητά width/height.
   Κρατάει τον χώρο ώστε να μην υπάρχει CLS όταν μπει η πραγματική φωτογραφία. */

.ph {
  aspect-ratio: var(--ph-ratio, 4 / 5);
  background: var(--paper-sunk);
  border: 1px dashed var(--line-firm);
  border-radius: var(--radius);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3xs);
  padding: var(--space-m);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}
.ph strong { color: var(--ink); font-weight: 600; }
.sec--deep .ph { background: var(--deep-lift); border-color: var(--line-invert); color: var(--ink-invert-muted); }
.sec--deep .ph strong { color: var(--ink-invert); }

/* Παραλλαγή χωρίς κείμενο και χωρίς πλαίσιο: καθαρό λευκό, ίδιο με τη σελίδα.
   Ο χώρος μένει κρατημένος στο τετράγωνο 1:1 ώστε να μη μετακινηθεί τίποτα
   όταν μπει η πραγματική φωτογραφία, αλλά δεν φαίνεται τίποτα μέχρι τότε. */
.ph--solid {
  background: var(--paper);
  border: 0;
  padding: 0;
}

/* ---------- Λίστα παθήσεων ---------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  padding: 0;
  margin: 0;
  list-style: none;
}
.tags li {
  border: 1px solid var(--line-firm);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--step--1);
  max-width: none;
}
.sec--deep .tags li { border-color: var(--line-invert); }

/* ---------- Αξιολόγηση ---------- */

.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
  border-inline-start: 2px solid var(--clay);
  block-size: 100%;
}
.review blockquote { font-size: var(--step-1); line-height: var(--leading-snug); }
.review footer {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-block-start: auto;
  font-size: var(--step--1);
  color: var(--ink-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Αρχικό γράμμα, όχι φωτογραφία. Είναι σαφώς γραφιστικό στοιχείο και δεν
   προσποιείται πρόσωπο — μια επινοημένη φωτογραφία προφίλ θα ήταν ψέμα. */
.review__initial {
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-firm);
  background: var(--paper-sunk);
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0;
  text-transform: none;
  color: var(--clay-deep);
}

/* ---------- Στατιστικό ---------- */

.stat { display: grid; gap: var(--space-3xs); }
.stat dt {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--clay-deep);
}
.stat dd { margin: 0; font-size: var(--step--1); color: var(--ink-muted); max-width: 22ch; }
.sec--deep .stat dt { color: var(--clay-lift); }

/* ---------- Σημείωση / disclaimer ---------- */

.note {
  border-inline-start: 3px solid var(--clay);
  padding-inline-start: var(--space-s);
  font-size: var(--step--1);
  color: var(--ink-muted);
}