/* Η φωτογραφία δίπλα στο κείμενο έμενε μικρή και κεντραρισμένη, με κενό πάνω και
   κάτω. Τώρα φτάνει το ύψος του κειμένου. Χρειάζεται !important επειδή οι κανόνες
   του προτύπου είναι scoped με data-astro-cid και υπερισχύουν σε ειδικότητα.
   Το max-height υπάρχει γιατί στη σελίδα της Ζήρειας το κείμενο είναι 1.072px
   και η φωτογραφία γινόταν στενή λωρίδα, κομμένη κατά 35% στο πλάτος. */
/* Οι σελίδες των συνοικιών φτιάχνονται από εμάς και δεν έχουν data-astro-cid,
   οπότε οι κανόνες του προτύπου δεν τις πιάνουν: η εικόνα έπεφτε κάτω από το
   κείμενο σε πλήρες πλάτος. Εδώ οι ίδιοι κανόνες, χωρίς cid. */
/* Το «δεν υπάρχουν εκδηλώσεις» δανειζόταν την κλάση της φόρτωσης, που είχε
   ψυχρό γαλάζιο φόντο (hue 200) μέσα σε κρεμ/πράσινη παλέτα. */
.ev-loading{background:oklch(97% .012 80)!important}
.split{grid-template-columns:5fr 6fr;gap:clamp(28px,5vw,64px);display:grid}
@media (width<=860px){.split{grid-template-columns:1fr}}
.split figure{margin:0;position:relative}
.split figure img{object-fit:cover;border-radius:6px;width:100%}
.split figcaption{color:var(--foam);background:oklch(20% .03 225/.92);border-radius:4px;
  padding:7px 12px;font-size:12.5px;position:absolute;bottom:14px;left:14px}
.split{align-items:stretch!important}
.split figure{height:100%;max-height:760px}
.split figure img{height:100%!important;aspect-ratio:auto!important}

/* Παλέτα βουνού για τα Τρίκαλα Κορινθίας — αντικαθιστά τα θαλασσινά tokens.
   Φορτώνεται τελευταία, ώστε να μη χρειαστεί να πειραχτεί το αρχικό CSS. */
:root{
  --sand:      oklch(96.5% .014 78);
  --sand-deep: oklch(92%   .022 76);
  --line:      oklch(87%   .020 80);
  --ink:       oklch(24%   .028 150);
  --ink-soft:  oklch(42%   .028 150);
  /* 57% έδινε 3.5:1 πάνω στο --sand-deep και 4.0:1 στο --sand — κάτω από το
     4.5:1 του WCAG AA. Στα 51% περνά και στα τρία φόντα (4.51/5.19/5.26)
     με ίδια απόχρωση και κορεσμό: αλλάζει μόνο η αναγνωσιμότητα. */
  --ink-faint: oklch(51%   .020 150);
  --sea:       oklch(41%   .075 152);
  --sea-deep:  oklch(30%   .060 154);
  --sea-night: oklch(20%   .045 156);
  --coral-ink: oklch(50%   .140 50);
}
/* Οι φωτογραφίες των μνημείων: το αρχικό CSS δίνει max-width αλλά όχι height:auto,
   οπότε το ύψος έμενε κολλημένο στην τιμή του attribute και τέντωνε την εικόνα. */
.att-photo img{width:100%;height:auto;display:block;border-radius:3px}
.att-photo{overflow:hidden;width:100%;margin:0}

/* Στοιχεία των χειρόγραφων σελίδων. Οι κλάσεις είτε δεν ορίζονταν πουθενά
   (.tel-group, .grp-sec) είτε ορίζονται μόνο scoped σε άλλο component
   (.next-link, με data-astro-cid), οπότε το markup μου έμενε γυμνό: η λίστα
   τηλεφώνων έβγαινε σαν άστυλο <dl> και οι σύνδεσμοι κολλητά μεταξύ τους. */
.next-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.next-link{border:1.5px solid var(--line);border-radius:999px;padding:11px 22px;
  font-size:14.5px;font-weight:600;text-decoration:none;color:var(--sea);
  transition:border-color .25s,background .25s}
.next-link:hover,.next-link:focus-visible{border-color:var(--sea);background:var(--sand-deep);outline:none}
.next-link.ghost{color:var(--ink-soft)}

.tel-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:6px}
.tel-group{background:var(--foam);border:1px solid var(--line);border-radius:8px;padding:20px 22px 16px}
.tel-group h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:21px;margin:0 0 6px}
.tel-group dl{margin:0}
.tel-group .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 0;border-top:1px solid var(--line)}
.tel-group .row:first-child{border-top:0}
.tel-group dt{color:var(--ink-soft);font-size:14.5px}
.tel-group dd{margin:0;font-weight:600;white-space:nowrap}

.grp-sec{margin-top:36px}
.grp{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;margin:0 0 16px}

/* ── Ευχρηστία (από την αξιολόγηση) — καμία αλλαγή σε τυπογραφία/παλέτα ── */

/* Στόχοι αφής. Το κουμπί μενού ήταν 36x16 px στο κινητό και είναι η ΜΟΝΗ
   πλοήγηση εκεί· το πρότυπο θέλει 24x24, το iOS 44x44. Μεγαλώνει η περιοχή
   αφής με padding, όχι το εικονίδιο — η όψη μένει ίδια. */
.menu-btn{min-height:44px;padding-inline:10px}
.menu-close{min-width:44px;min-height:44px}
.season button{min-height:44px}

/* Το τηλέφωνο ήταν 21 px ύψος — ο μικρότερος στόχος της σελίδας, ενώ το
   κείμενο ζητά να καλέσεις. Γίνεται κανονικό κουμπί. */
.card .meta a.tel{display:inline-flex;align-items:center;min-height:44px;
  padding:9px 16px;border:1px solid var(--line);border-radius:999px;
  text-decoration:none;font-weight:600}
.card .meta a.tel:hover{border-color:var(--sea);background:var(--sand-deep)}

/* Οι κάρτες χωρίς φωτογραφία τεντώνονταν στο ύψος της διπλανής και έμεναν
   μισές κενές — διαβαζόταν σαν σφάλμα. */
.listing-grid{align-items:start}

/* Ο δείκτης εστίασης ήταν απενεργοποιημένος σε 5 σημεία: ο χρήστης
   πληκτρολογίου τον έχανε ακριβώς πάνω στα τηλέφωνα και στο υποσέλιδο. */
.menu-close:focus-visible,.site-footer a:focus-visible,.card .meta a.tel:focus-visible,
.overlay-primary a:focus-visible,.ov-group a:focus-visible,.next-link:focus-visible{
  outline:2px solid var(--sea);outline-offset:3px}

/* Το hero έμενε με opacity:0 όταν δεν προλάβαινε το reveal — δηλαδή χωρίς
   τίτλο. Και ο λευκός τίτλος πάνω σε ηλιόλουστο ελατόδασος δεν διαβαζόταν. */
.hero .reveal{opacity:1}
.hero .hero-title,.hero .hero-kicker,.hero .hero-body p{
  text-shadow:0 1px 2px oklch(15% .02 155/.55),0 2px 16px oklch(15% .02 155/.45)}

/* Φίλτρα συνοικίας στη Διαμονή */
.area-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.area-chip{min-height:44px;padding:9px 18px;border:1.5px solid var(--line);border-radius:999px;
  background:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.area-chip span{margin-inline-start:7px;font-weight:400;color:var(--ink-faint)}
.area-chip:hover{border-color:var(--sea)}
.area-chip.on{border-color:var(--sea);color:var(--sea);background:var(--sand-deep)}
.area-chip.on span{color:var(--sea)}
.area-chip:focus-visible{outline:2px solid var(--sea);outline-offset:3px}
.card[hidden]{display:none}
.card .area-badge{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 6px}