/* Ι.Ν. ΚΟΙΜΗΣΕΩΣ ΤΗΣ ΘΕΟΤΟΚΟΥ, 40 ΕΚΚΛΗΣΙΕΣ — ΣΤΑΔΙΟ Β, ΚΟΜΜΑΤΙ B6 (13/10/2026): ο απλός χάρτης της «Επικοινωνίας».
   Φορτώνεται ΜΟΝΟ στη δημόσια σελίδα, μετά το selida.css. Χρώματα μόνο από το xromata.css (η γραμμή από κάτω μένει πρώτη).

   ΤΙ ΕΙΝΑΙ. Μία ακίνητη εικόνα του δικού μας χάρτη γύρω από τον ναό (eikones/xartis-naou.webp· από 16/10/2026 η ίδια η ζωγραφιά του zografia.js,
   με τον ναό σε 3D και τα ονόματα, ΧΩΡΙΣ πινέζα και χωρίς όριο ενορίας). ΟΛΗ η εικόνα είναι ΕΝΑΣ σύνδεσμος: ο ίδιος ο σύνδεσμος «Άνοιγμα στον χάρτη» που είχε ως τώρα η σελίδα,
   με άλλη όψη. Τον ντύνει το selida.js και τον βάζει σε δικό του <dd class="xartis-naou-dd">, αμέσως μετά τη διεύθυνση. Αν η εικόνα δεν φορτώσει, το
   selida.js βγάζει το <dd> και ο σύνδεσμος γυρίζει στα λόγια του, κάτω από τη διεύθυνση, με τους κανόνες του selida.css: τίποτα από εδώ δεν μένει πίσω.
   Δεν ρωτά κανέναν διακόπτη: δεν δείχνει όριο και δεν απαντά σε καμία ερώτηση.

   ΤΟ ΚΑΔΡΟ. Η εικόνα είναι 16:9 και η πινέζα με τον ναό στέκονται στη μέση του ύψους της. Στο κινητό φαίνεται ολόκληρη. Από 901px γίνεται χαμηλή
   λωρίδα που κλείνει το κουτί της «Επικοινωνίας» (1160:250) και κόβεται ίσα πάνω και κάτω: η πινέζα μένει ΟΛΟΚΛΗΡΗ, με αέρα πάνω από το κεφάλι της.
   Η γραμμή «© OpenStreetMap contributors» είναι γράμματα της σελίδας, 11px, όχι μέσα στην εικόνα (τη ζητά η άδεια). */
@import url("xromata.css") screen;

@media screen {
  /* ── κινητό πρώτα: κάτω από τη διεύθυνση, εκεί που στεκόταν το κουμπί «Άνοιγμα στον χάρτη» ── */
  #epikoinonia dd.xartis-naou-dd { margin-top: 12px; }
  #epikoinonia .xartis-naou { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--grammi); border-radius: 6px; background: var(--xarti-2); -webkit-tap-highlight-color: transparent; }
  #epikoinonia .xartis-naou img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 650ms cubic-bezier(.22, .61, .36, 1); }
  #epikoinonia .xartis-naou:active img { transform: scale(1.04); }

  /* το στρογγυλό βέλος στη γωνία: «ανοίγει αλλού», χωρίς λέξη. Ζωγραφισμένο με δύο γραμμές, όχι με γράμμα. */
  #epikoinonia .xartis-naou-exo { position: absolute; right: 10px; top: 10px; display: block; width: 44px; height: 44px; border-radius: 50%; background: var(--kokkino-vathy); color: var(--fyllo); }
  #epikoinonia .xartis-naou-exo::before { content: ""; position: absolute; left: 17px; top: 15px; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
  #epikoinonia .xartis-naou-exo::after { content: ""; position: absolute; left: 14px; top: 21px; width: 16px; height: 2px; background: currentColor; transform: rotate(-45deg); }

  /* η γραμμή της άδειας */
  #epikoinonia .xartis-naou-pigi { position: absolute; right: 0; bottom: 0; padding: 2px 7px; border-radius: 4px 0 0 0; background: color-mix(in srgb, var(--fyllo) 82%, transparent); font: 400 11px/1.4 var(--etiketa); letter-spacing: .02em; color: var(--melani-2); }

  @media (hover: hover) {
    #epikoinonia .xartis-naou:hover img { transform: scale(1.04); }
  }

  /* ── ο ζωγραφιστός χάρτης που κινείται (14/10/2026, xartis-naou/zografia.js). Ο καμβάς μπαίνει ΜΕΣΑ στον ίδιο σύνδεσμο, πίσω από το βέλος και τη
     γραμμή της άδειας· η εικόνα από κάτω κρύβεται μόνο αφού ζωγραφιστεί ο χάρτης («zografistike»). Το δάχτυλο τον σέρνει (touch-action: none), ένα
     σκέτο άγγιγμα ανοίγει τις οδηγίες. ── */
  #epikoinonia .xartis-naou canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  #epikoinonia .xartis-naou.syretai canvas { cursor: grabbing; }
  #epikoinonia .xartis-naou.zografistike img { visibility: hidden; }
  #epikoinonia .xartis-naou:is(.zografistike, .syretai) img { transform: none; }

  /* ── χωρίς σενάρια: η ακίνητη εικόνα με τον ίδιο σύνδεσμο προς τις οδηγίες, πάνω από το κουτί «Χάρτης · Πλατεία Σ. Πετρίδου» (enoria.html, <noscript>) ── */
  #epikoinonia .xartis:has(.xartis-xoris-senario) { position: relative; overflow: hidden; }
  #epikoinonia .xartis-xoris-senario { position: absolute; inset: 0; display: block; padding: 0; }
  #epikoinonia .xartis-xoris-senario img { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* ── από 901px: μια χαμηλή λωρίδα σε όλο το πλάτος, που κλείνει το κουτί ── */
  @media (min-width: 901px) {
    #epikoinonia dl:has(> .xartis-naou-dd) { grid-template-rows: auto 1fr auto; padding-bottom: 0; overflow: hidden; }
    #epikoinonia dd.xartis-naou-dd { grid-column: 1 / -1; grid-row: 3; margin: 30px 0 0; padding: 0; border-left: 0; }
    #epikoinonia .xartis-naou-dd .xartis-naou { aspect-ratio: 1160 / 360; border: 0; border-top: 1px solid var(--grammi); border-radius: 0; }
    #epikoinonia .xartis-naou-dd .xartis-naou:focus-visible { outline-offset: -5px; }
    #epikoinonia .xartis-naou-exo { right: 16px; top: 16px; }
    /* όταν ο ναός έχει δώσει ώρες (τη μία γραμμή ή και τις δύο), το κουτί είναι τρεις στήλες των τεσσάρων σειρών (selida.css): η λωρίδα είναι η πέμπτη σειρά.
       (Ως τον πρώτο έλεγχο του σταδίου, 13/10/2026, με ΜΟΝΟ το ωράριο του γραφείου το κουτί είχε πέντε στήλες και η λωρίδα έπιανε πέντε· τώρα και εκεί τρεις.) */
    #epikoinonia dl:has(> dd:is([data-orario-naou], [data-orario-grafeiou]):not([hidden])):has(> .xartis-naou-dd) { grid-template-rows: auto auto auto auto auto; }
    /* (14/10/2026: η γραμμή «Εφημέριοι» έφυγε· με ΜΙΑ γραμμή ωρών τα στοιχεία είναι τέσσερα, δηλαδή δύο στήλες, και η λωρίδα πιάνει δύο· με δύο είναι πέντε, τρεις στήλες.) */
    #epikoinonia dl:has(> dd:is([data-orario-naou], [data-orario-grafeiou]):not([hidden])) > dd.xartis-naou-dd { grid-column: 1 / span 2; grid-row: 5; }
    #epikoinonia dl:has(> dd[data-orario-naou]:not([hidden])):has(> dd[data-orario-grafeiou]:not([hidden])) > dd.xartis-naou-dd { grid-column: 1 / span 3; }
  }
}

/* στο χαρτί η εικόνα δεν τυπώνεται· η διεύθυνση είναι γραμμένη από πάνω της */
@media print {
  #epikoinonia dd.xartis-naou-dd { display: none; }
}