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

   Ο Bill, 12/10/2026: «ο πατερ ζητησε να φαιονται ολα τα μυστηρια ενα ενα και αυτο ειναι σημαντικο … αλλα η εμφανιση τους δενειναι πολυ ομορφη και
   εντυπωσιακη αλλαξε το .»

   ΤΙ ΕΙΝΑΙ. Πέντε αψίδες στο κόκκινο του ναού, η μία δίπλα στην άλλη σαν στοά (στο κινητό η μία κάτω από την άλλη), και μέσα σε καθεμία ένα σχέδιο
   με χρυσή γραμμή: τα στέφανα, η κολυμβήθρα, τα κεριά στο μανουάλι, το καντήλι, ο σταυρός με τον βασιλικό πάνω από την κούπα του αγιασμού.
   Από κάτω το όνομα (GFS Didot), η μία πρόταση που υπάρχει ήδη, και ΕΝΑ πράγμα που πατιέται: το κουμπί της αίτησης όπου είναι ανοιχτή, αλλιώς το
   τηλέφωνο του γραφείου. Όλη η κάρτα είναι ο σύνδεσμός της.

   ΤΑ ΣΧΕΔΙΑ ΔΕΝ ΕΙΝΑΙ ΤΟΥ ΝΑΟΥ. Τα σχεδίασε η συνεδρία: πέντε μονόχρωμες μάσκες (eikones/mystirio-….svg), όπως η μάσκα του σήματος στο sima.css·
   το χρώμα τους το δίνει αυτό το φύλλο (--xryso-fos). Ο ναός δεν έχει δώσει φωτογραφίες μυστηρίων· αν δώσει, μπαίνουν στη θέση τους μέσα στην ίδια αψίδα.

   ΠΟΙΑ ΚΑΡΤΑ ΕΙΝΑΙ ΠΟΙΑ: το λέει το «data-eidos» που γράφει το app.js σε κάθε κάρτα· όπου λείπει, μετράει η σειρά τους (γάμος, βάπτιση, μνημόσυνο, ευχέλαιο, αγιασμός).
   ΚΙΝΗΣΗ: με τον δείκτη η κάρτα σηκώνεται λίγο και ανάβει το φως μέσα στην αψίδα· με το δάχτυλο ανάβει όσο πατιέται. Τίποτε άλλο δεν κινείται. */
@import url("xromata.css") screen;

@media screen {
  /* ── το πλέγμα: κινητό μία στήλη · από 700px δύο · από 1040px και οι πέντε στη σειρά ── */
  #mystiria .plegma { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  /* ── η κάρτα στο κινητό: η αψίδα αριστερά, όνομα και πρόταση δεξιά, και από κάτω, σε όλο το πλάτος, αυτό που πατιέται ── */
  #mystiria .karta {
    position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 16px; row-gap: 6px;
    min-height: 0; padding: 12px 14px 12px 12px; background: var(--fyllo); border: 1px solid var(--grammi); border-radius: 72px 8px 8px 8px;
    transition: transform 420ms cubic-bezier(.22, .61, .36, 1), box-shadow 420ms cubic-bezier(.22, .61, .36, 1), border-color 420ms cubic-bezier(.22, .61, .36, 1);
  }

  /* ── η αψίδα ── */
  #mystiria .karta .eikonidio {
    position: relative; grid-column: 1; grid-row: 1 / span 2; align-self: start; width: auto; height: 160px; overflow: hidden;
    border: 0; border-radius: 999px 999px 3px 3px; color: var(--xryso-fos);
    background:
      radial-gradient(ellipse 70% 52% at 50% 56%, color-mix(in srgb, var(--xryso-fos) 26%, transparent), transparent 100%),
      linear-gradient(180deg, var(--kokkino-vathy) 40%, var(--kokkino-nyxta) 100%);
    box-shadow: inset 0 0 0 4px var(--kokkino-vathy), inset 0 0 0 5px color-mix(in srgb, var(--xryso-fos) 62%, transparent), inset 0 0 0 0 color-mix(in srgb, var(--xryso-fos) 0%, transparent);
    transition: box-shadow 420ms cubic-bezier(.22, .61, .36, 1);
  }
  /* (όπου ο browser δεν έχει μάσκες μένει το μικρό σχέδιο του app.js, μεγαλύτερο) */
  #mystiria .karta .eikonidio .eik-svg { width: 44px; height: 44px; }
  #mystiria .karta .eikonidio::before {
    content: none; position: absolute; inset: 11% 9% 7%; background: var(--xryso-fos);
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
    transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
  }
  @supports (-webkit-mask-image: none) {
    #mystiria .karta .eikonidio .eik-svg { display: none; }
    #mystiria .karta .eikonidio::before { content: ""; }
  }
  #mystiria .karta:is([data-eidos="gamos"], :nth-child(1):not([data-eidos])) .eikonidio::before { -webkit-mask-image: url("eikones/mystirio-gamos.svg"); }
  #mystiria .karta:is([data-eidos="vaptisi"], :nth-child(2):not([data-eidos])) .eikonidio::before { -webkit-mask-image: url("eikones/mystirio-vaptisi.svg"); }
  #mystiria .karta:is([data-eidos="mnimosyno"], :nth-child(3):not([data-eidos])) .eikonidio::before { -webkit-mask-image: url("eikones/mystirio-mnimosyno.svg"); }
  #mystiria .karta:is([data-eidos="efchelaio"], :nth-child(4):not([data-eidos])) .eikonidio::before { -webkit-mask-image: url("eikones/mystirio-efchelaio.svg"); }
  #mystiria .karta:is([data-eidos="agiasmos"], :nth-child(5):not([data-eidos])) .eikonidio::before { -webkit-mask-image: url("eikones/mystirio-agiasmos.svg"); }

  /* ── το όνομα και η πρόταση ── */
  #mystiria .karta h3 { grid-column: 2; grid-row: 1; margin: 0; padding-top: 8px; font: 400 25px/1.16 var(--titlos); color: var(--melani); text-wrap: balance; }
  #mystiria .karta > p:not(.karta-til) { grid-column: 2; grid-row: 2; margin: 0; font: 400 16px/1.5 var(--keimeno); color: var(--melani-2); }

  /* ── αυτό που πατιέται: ΕΝΑ σε κάθε κάρτα. Ο σύνδεσμός του απλώνεται σε όλη την κάρτα ── */
  #mystiria .karta :is(.koumpi, .karta-til) { grid-column: 1 / -1; grid-row: 3; margin: 8px 0 0; }
  #mystiria .karta .koumpi { align-self: end; justify-content: center; min-height: 50px; padding: 12px 16px; font-size: 16px; white-space: normal; text-align: center; }
  #mystiria .karta .koumpi:hover { filter: none; }
  /* (15/10/2026) «Καλέστε τον ναό»: το ίδιο κουμπί με το «Αίτηση →», στην ίδια θέση, με το σύμβολο του τηλεφώνου μπροστά */
  #mystiria .karta .karta-klisi { gap: 10px; }
  #mystiria .karta .karta-klisi svg { flex: none; }
  #mystiria .karta .karta-til {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; align-self: end; padding-top: 6px;
    border-top: 1px solid var(--grammi); font: 400 15px/1.35 var(--etiketa); letter-spacing: .02em; color: var(--melani-2); text-wrap: balance;
  }
  #mystiria .karta .karta-til a { flex: none; min-height: 44px; font: 600 19px/1 var(--keimeno); letter-spacing: 0; color: var(--kokkino-vathy); text-decoration: none; white-space: nowrap; }
  #mystiria .karta :is(.koumpi, .karta-til a)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  #mystiria .karta :is(.koumpi, .karta-til a):focus-visible { outline: none; }
  #mystiria .karta:has(a:focus-visible) { outline: 3px solid var(--kokkino-vathy); outline-offset: 3px; }

  /* ── το φως: όσο πατιέται, και κάτω από τον δείκτη ── */
  #mystiria .karta:active .eikonidio { box-shadow: inset 0 0 0 4px var(--kokkino-vathy), inset 0 0 0 5px var(--xryso-fos), inset 0 0 44px 0 color-mix(in srgb, var(--xryso-fos) 34%, transparent); }
  @media (hover: hover) {
    #mystiria .karta:hover { transform: translateY(-6px); }
    #mystiria .karta:hover .eikonidio { box-shadow: inset 0 0 0 4px var(--kokkino-vathy), inset 0 0 0 5px var(--xryso-fos), inset 0 0 44px 0 color-mix(in srgb, var(--xryso-fos) 34%, transparent); }
    #mystiria .karta:hover .eikonidio::before { transform: translateY(-3px); }
    #mystiria .karta:hover .karta-til a { text-decoration: underline; text-underline-offset: 4px; }
  }
  /* ── ΣΤΟΝ ΥΠΟΛΟΓΙΣΤΗ (από 901px) Η ΚΛΕΙΣΤΗ ΚΑΡΤΑ ΔΕΝ ΕΙΝΑΙ ΠΟΡΤΑ. Σηκώνεται, ανάβει και πατιέται ολόκληρη μόνο η κάρτα που έχει κουμπί αίτησης
     (.karta:has(a.koumpi))· σε κάρτα με τηλέφωνο πατιέται μόνο ο αριθμός, και τίποτα δεν κινείται. Στο κινητό μένει ολόκληρη η κάρτα σύνδεσμος. ── */
  @media (min-width: 901px) {
    #mystiria .karta .karta-til a::after { content: none; }
    #mystiria .karta:not(:has(a.koumpi)):hover { transform: none; }
    #mystiria .karta:not(:has(a.koumpi)):hover .eikonidio::before { transform: none; }
    #mystiria .karta:not(:has(a.koumpi)):is(:hover, :active) .eikonidio { box-shadow: inset 0 0 0 4px var(--kokkino-vathy), inset 0 0 0 5px color-mix(in srgb, var(--xryso-fos) 62%, transparent), inset 0 0 0 0 color-mix(in srgb, var(--xryso-fos) 0%, transparent); }
    #mystiria .karta:not(:has(a.koumpi)):hover .karta-til a { text-decoration: none; }
    #mystiria .karta .karta-til a:hover { text-decoration: underline; text-underline-offset: 4px; }
    #mystiria .karta:not(:has(a.koumpi)):has(a:focus-visible) { outline: none; }
    #mystiria .karta .karta-til a:focus-visible { outline: 3px solid var(--kokkino-vathy); outline-offset: 3px; }
  }

  /* ── από 700px: δύο στήλες, η πέμπτη σε όλο το πλάτος ── */
  @media (min-width: 700px) {
    #mystiria .plegma { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    #mystiria .karta:nth-child(5) { grid-column: 1 / -1; }
  }

  /* ── από 1040px: η στοά. Πέντε αψίδες στη σειρά, χωρίς κουτί· το όνομα, η πρόταση και το πάτημα κάτω από καθεμία ── */
  @media (min-width: 1040px) {
    #mystiria .plegma { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
    #mystiria .karta, #mystiria .karta:nth-child(5) { grid-column: auto; }
    #mystiria .karta { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; row-gap: 0; padding: 0 0 4px; background: none; border: 0; border-radius: 0; }
    #mystiria .karta .eikonidio { grid-column: 1; grid-row: 1; align-self: stretch; height: auto; aspect-ratio: 4 / 5; border-radius: 999px 999px 4px 4px;
      box-shadow: inset 0 0 0 6px var(--kokkino-vathy), inset 0 0 0 7px color-mix(in srgb, var(--xryso-fos) 62%, transparent), inset 0 0 0 0 color-mix(in srgb, var(--xryso-fos) 0%, transparent); }
    #mystiria .karta:has(a.koumpi):is(:hover, :active) .eikonidio { box-shadow: inset 0 0 0 6px var(--kokkino-vathy), inset 0 0 0 7px var(--xryso-fos), inset 0 0 70px 0 color-mix(in srgb, var(--xryso-fos) 34%, transparent); }
    #mystiria .karta:not(:has(a.koumpi)):is(:hover, :active) .eikonidio { box-shadow: inset 0 0 0 6px var(--kokkino-vathy), inset 0 0 0 7px color-mix(in srgb, var(--xryso-fos) 62%, transparent), inset 0 0 0 0 color-mix(in srgb, var(--xryso-fos) 0%, transparent); }
    #mystiria .karta .eikonidio::before { inset: 13% 11% 8%; }
    #mystiria .karta h3 { grid-column: 1; grid-row: 2; padding: 20px 2px 0; font-size: 25px; }
    #mystiria .karta > p:not(.karta-til) { grid-column: 1; grid-row: 3; padding: 8px 2px 0; font-size: 15.5px; }
    #mystiria .karta :is(.koumpi, .karta-til) { grid-column: 1; grid-row: 4; margin-top: 16px; }
    #mystiria .karta .karta-til { display: block; padding: 10px 2px 0; }
    #mystiria .karta .karta-til a { display: flex; width: -moz-fit-content; width: fit-content; align-items: center; min-height: 44px; font-size: 20px; }
  }
}