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

/* ΤΙ ΕΙΝΑΙ. Το υποσέλιδο κλείνει τη σελίδα σαν μια τελευταία οθόνη: το σήμα του ναού ως μεγάλο μετάλλιο που γυρίζει, το όνομα σε μία σειρά, η ενορία
   και η μητρόπολη από κάτω, δύο μεγάλα κουμπιά, και στο τέλος τέλος το «Γραφείο του ναού» και η αχνή γραμμή.
   ΤΟ ΜΕΤΑΛΛΙΟ το στήνει το metallio.js μέσα στο «.podas-sima» (χωρίς αυτό μένει το σήμα, μεγάλο και ακίνητο). Το σήμα ΔΕΝ ξαναζωγραφίζεται: είναι το
   /ekklisia/eikones/naos-logo.svg, το ίδιο αρχείο που φορούσε ως τώρα το υποσέλιδο, ως μάσκα πάνω σε δύο στρώματα (το σκάψιμο και το φως στο χείλος του).
   Όλα τα μεγέθη του μεταλλίου είναι σε em: το «font-size» του «.metallio» είναι η διάμετρός του (200px στο κινητό, 260px στον υπολογιστή).
   Κινούνται μόνο transform και opacity ολόκληρων στρωμάτων· μέσα στο σχέδιο του σήματος δεν κινείται τίποτα. */
@media screen {
  .podas { display: flex; flex-direction: column; box-sizing: border-box; min-height: min(100vh, 780px); padding: 72px 0 28px; }
  @supports (height: 100svh) { .podas { min-height: min(100svh, 780px); } }
  .podas .wrap { flex: 1 0 auto; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 0; text-align: center; }

  /* το σήμα και οι σειρές */
  .podas .podas-sima { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; font-size: 16px; }
  .podas .podas-sima .logo-naou { width: 132px; height: 132px; margin-bottom: 28px; background: var(--xryso-vathy); }
  .podas.me-metallio .podas-sima .logo-naou { display: none; }
  .podas .podas-sima > span:last-child { display: block; width: 100%; font-size: 0; }
  .podas .podas-sima b[data-onoma] { display: block; margin: 0; font: 400 clamp(18px, 5.55vw, 38px)/1.2 var(--titlos); letter-spacing: 0; white-space: nowrap; color: var(--melani); }
  .podas .podas-sima [data-perioxi] { display: block; margin: 12px auto 0; max-width: 30em; font: 400 17px/1.55 var(--keimeno); color: var(--melani-2); text-wrap: balance; }
  .podas .podas-seira { display: block; }
  .podas .podas-teleia { display: none; }

  /* τα κουμπιά: μεγάλα, το ένα κάτω από το άλλο, σε όλο το πλάτος· το «Γραφείο του ναού» πέφτει στο τέλος */
  .podas .wrap > span:nth-child(2) { flex: 1 0 auto; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; width: 100%; max-width: 420px; margin: 36px auto 0; font-size: 0; }
  .podas .wrap > span:nth-child(2) > .aitiseis-mou-syndesmos { display: contents; }
  .enoria-riza:not([data-aitiseis-mou="nai"]) .podas .wrap > span:nth-child(2) > .aitiseis-mou-syndesmos { display: none; }
  .podas .tsip { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 56px; margin: 0; padding: 12px 24px; border: 1px solid var(--grammi); border-radius: var(--koumpi-aktina); background: var(--fyllo); font: 400 18px/1.2 var(--etiketa); letter-spacing: .04em; color: var(--melani); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 420ms cubic-bezier(.22, .61, .36, 1), background-color 420ms cubic-bezier(.22, .61, .36, 1); }
  .podas a.tsip { display: flex; min-height: 56px; color: var(--melani); }
  .podas .tsip:hover { border-color: var(--xryso); }
  .podas .tsip:active { background: var(--xarti-2); }
  .podas .tsip:focus-visible { outline: 2px solid var(--kokkino-vathy); outline-offset: 3px; }
  .podas a.tsip[href="/grafeio"] { align-self: center; min-height: 44px; margin-top: auto; padding: 0 12px; border: 0; border-radius: 0; background: none; font-size: 16px; color: var(--melani-2); text-decoration: underline; text-decoration-color: var(--grammi); text-underline-offset: 5px; }
  .podas a.tsip[href="/grafeio"]:hover { color: var(--kokkino-vathy); text-decoration-color: var(--kokkino-vathy); }
  .podas button.tsip { margin-bottom: 40px; }
  .podas .ypografi { width: 100%; margin-top: 6px; text-align: center; }

  @media (min-width: 700px) {
    .podas { padding-top: 88px; }
    .podas .podas-seira { display: inline; }
    .podas .podas-teleia { display: inline; }
    .podas .wrap > span:nth-child(2) { flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: space-between; max-width: none; margin-top: 40px; gap: 48px 16px; }
    .podas button.tsip { margin-bottom: 0; }
    .podas .tsip { min-width: 250px; }
    .podas a.tsip[href="/grafeio"] { flex: 0 0 100%; min-width: 0; justify-content: center; align-self: flex-end; margin-top: 0; }
  }

  /* ΤΟ ΜΕΤΑΛΛΙΟ */
  .metallio { position: relative; flex: none; width: 1em; height: 1.17em; margin: 0 auto 26px; font-size: 200px; line-height: 1; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
  .metallio.piasmeno { cursor: grabbing; }
  /* Ζωγραφίζεται 2,5 φορές μεγαλύτερο και μικραίνει ολόκληρο: ένα στρώμα που γυρίζει το ζωγραφίζει ο browser στο μέγεθος της διάταξής του, και στο
     κανονικό μέγεθος το σκάλισμα έβγαινε σε ψηφίδες στις πυκνές οθόνες των κινητών (μετρήθηκε 12/10/2026). Μέσα του το 1em είναι πάλι η διάμετρος. */
  .metallio-skini { position: absolute; left: 0; top: 0; width: 1em; height: 1em; font-size: 2.5em; transform: scale(.4); transform-origin: 0 0; perspective: 4.2em; -webkit-perspective: 4.2em; }
  .metallio-klisi { position: absolute; inset: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform 420ms cubic-bezier(.22, .61, .36, 1); }
  .metallio.piasmeno .metallio-klisi { transition: none; }
  .metallio-soma { position: absolute; inset: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; will-change: transform; }

  /* οι δύο όψεις: το πεδίο σαν τορνευμένο χρυσό, το χείλος σηκωμένο */
  .metallio-opsi { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(.034em);
    background-color: var(--xryso);
    background-image:
      radial-gradient(closest-side, transparent 86.4%, color-mix(in srgb, var(--xryso-vathy) 55%, var(--melani)) 87.2%, var(--xryso-vathy) 88.4%, color-mix(in srgb, var(--xryso-fos) 45%, var(--lampsi)) 91%, var(--xryso-fos) 94%, color-mix(in srgb, var(--xryso) 50%, var(--xryso-vathy)) 98%, color-mix(in srgb, var(--xryso-vathy) 60%, var(--melani)) 100%),
      repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent .006em, color-mix(in srgb, var(--lampsi) 16%, transparent) .008em, transparent .011em),
      conic-gradient(from 28deg, var(--xryso-fos), color-mix(in srgb, var(--xryso-fos) 50%, var(--lampsi)) 7%, var(--xryso-fos) 14%, var(--xryso) 24%, color-mix(in srgb, var(--xryso) 62%, var(--xryso-vathy)) 31%, var(--xryso) 39%, var(--xryso-fos) 48%, color-mix(in srgb, var(--xryso-fos) 55%, var(--lampsi)) 55%, var(--xryso-fos) 62%, var(--xryso) 73%, color-mix(in srgb, var(--xryso) 62%, var(--xryso-vathy)) 81%, var(--xryso) 90%, var(--xryso-fos)); }
  .metallio-opsi.piso { transform: rotateY(180deg) translateZ(.034em); }
  /* το σήμα σκαμμένο: πρώτα το φως που πιάνει το κάτω δεξιά χείλος της χαρακιάς, και από πάνω η ίδια η χαρακιά, σκούρα */
  .metallio-xaragma, .metallio-xeilos { position: absolute; left: 11%; top: 11%; width: 78%; height: 78%; -webkit-mask: url("/ekklisia/eikones/naos-logo.svg") center / contain no-repeat; mask: url("/ekklisia/eikones/naos-logo.svg") center / contain no-repeat; }
  .metallio-xeilos { background: var(--lampsi); opacity: .85; transform: translate(.0055em, .0065em); }
  .metallio-xaragma { background: var(--xryso-vathy); background: linear-gradient(140deg, color-mix(in srgb, var(--xryso-vathy) 38%, var(--melani)) 0%, color-mix(in srgb, var(--xryso-vathy) 72%, var(--melani)) 55%, var(--xryso-vathy) 100%); }
  /* το φως που ταξιδεύει και η σκιά όταν η όψη γέρνει μακριά: τα κινεί το metallio.js μαζί με το γύρισμα */
  /* (μικρά στρώματα που μεγαλώνουν με transform: είναι σκέτα ντεγκραντέ και δεν χρειάζονται μεγάλη επιφάνεια στη μνήμη) */
  .metallio-lampsi { position: absolute; left: 38%; top: 38%; width: 24%; height: 24%; opacity: 0; transform: scale(5); will-change: transform, opacity; background: linear-gradient(104deg, transparent 30%, color-mix(in srgb, var(--lampsi) 32%, transparent) 42%, color-mix(in srgb, var(--lampsi) 78%, transparent) 50%, color-mix(in srgb, var(--lampsi) 32%, transparent) 58%, transparent 70%); }
  .metallio-skoteino { position: absolute; left: 45%; top: 45%; width: 10%; height: 10%; transform: scale(10.4); opacity: 0; will-change: opacity; background: color-mix(in srgb, var(--xryso-vathy) 30%, var(--melani)); }
  /* η ακμή: μικρά κομμάτια γύρω γύρω, ραβδωτά */
  .metallio-akri { position: absolute; left: 50%; top: 50%; width: .07em; height: .0275em; margin: -.01375em 0 0 -.035em; background: linear-gradient(180deg, var(--xryso-vathy), var(--xryso-fos) 48%, color-mix(in srgb, var(--xryso) 50%, var(--xryso-vathy)) 100%); }
  .metallio-akri:nth-child(4n) { background: linear-gradient(180deg, color-mix(in srgb, var(--xryso-vathy) 70%, var(--melani)), var(--xryso) 50%, var(--xryso-vathy)); }
  /* η σκιά του στο χαρτί */
  .metallio-skia { position: absolute; left: .12em; top: 1.075em; width: .76em; height: .075em; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--melani) 34%, transparent), color-mix(in srgb, var(--melani) 12%, transparent) 55%, transparent); will-change: transform; }

  @media (min-width: 900px) { .metallio { font-size: 260px; margin-bottom: 30px; } }
}