/* baptism-06 — Αρκουδάκι, Γαλάζιο (photographic hero, ίδια συνταγή με baptism-04) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Inter:wght@400;500;600;700&display=swap');

/* Miama Nueva — self-hosted, ίδιο αρχείο με τα wedding-18..25 (βλ. σχόλιο
   εκεί: καμία διαθέσιμη Google Font καλλιγραφικού στυλ αποδίδει σωστά
   ελληνικά, το Miama Nueva είναι η μόνη δοκιμασμένη εξαίρεση). */
@font-face{
	font-family:'Miama Nueva';
	src:url('../../assets/fonts/miamanueva.ttf') format('truetype');
	font-display:swap;
}

:root{
	--bg:#fbf8ee; --bg-alt:#eef5fa; --rose:#7fa0bc; --rose-deep:#4f7191;
	--ink:#4a3f33; --ink-soft:#8c8375; --card:#fffefb; --line:rgba(74,63,51,.13);
	--display:'Cormorant Garamond',serif; --sans:'Inter',sans-serif;
}
*{ box-sizing:border-box; }
body.single-event{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:400; line-height:1.7; overflow-x:hidden; margin:0; }
.single-event img, .single-event svg{ display:block; max-width:100%; }
.single-event a{ color:inherit; text-decoration:none; }
.single-event button{ font-family:inherit; cursor:pointer; }

.evi-progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--rose); z-index:100; transition:width .1s linear; }
.wrap{ max-width:1040px; margin:0 auto; padding:0 24px; }
.single-event section{ position:relative; padding:96px 0; }
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.eyebrow{ font-size:12px; letter-spacing:.2em; color:var(--rose-deep); font-weight:600; margin-bottom:16px; display:block; text-align:center; }
.section-title{ font-family:var(--display); font-weight:500; text-align:center; font-size:36px; color:var(--ink); }
.scallop-divider{ display:flex; align-items:center; justify-content:center; gap:6px; margin:22px auto 0; }
.scallop-divider span{ width:6px; height:6px; border-radius:50%; background:var(--rose); }
.scallop-divider span:nth-child(2){ background:var(--ink-soft); width:8px; height:8px; }

/* ============================================================
   HERO — bundled watercolor εικόνα (κολοκύθα με φιόγκο, φθινοπωρινά
   φύλλα, ζητήθηκε ρητά από πελάτη 15/9), full-bleed background. Όλο
   το κείμενο είναι δυναμική επικάλυψη πάνω στον άδειο πάνω χώρο της
   εικόνας — ΔΕΝ είναι baked-in, επεξεργάσιμο από wp-admin.
   ============================================================ */
.hero{
	position:relative; min-height:100vh; min-height:100dvh;
	overflow:hidden; background:#fbf6ee;
	display:flex; flex-direction:column; align-items:center;
	/* Το πλάτος (σε px) που πραγματικά αποδίδεται η εικόνα hero-bg μέσα
	   στο .hero, με background-size:contain — υπολογισμένο με το ΙΔΙΟ
	   μαθηματικό ως το πραγματικό contain (η εικόνα είναι 1024×1536,
	   λόγος 1024/1536 = 2/3): σε στενές/κατακόρυφες οθόνες η εικόνα
	   "δένεται" στο πλάτος (100vw), σε πλατιές/desktop οθόνες "δένεται"
	   στο ύψος (100vh × 2/3). Το κείμενο του hero χρησιμοποιεί ΑΥΤΗ τη
	   μεταβλητή (αντί για vw/clamp ασύνδετα με την εικόνα) ώστε τα
	   μεγέθη γραμματοσειράς να μένουν πάντα στην ΙΔΙΑ αναλογία με την
	   εικόνα που όρισε ο πελάτης (15/9, ζητήθηκε ρητά σε px πάνω στο
	   δικό του design canvas, 1600px πλάτος — ΟΧΙ το τελικό .webp που
	   έστειλε, 1024px, εξ ου και η διαίρεση με 1600 πιο κάτω): 80px/1600
	   για τον υπότιτλο πάνω από το όνομα, 260-290px/1600 (μεσαίο 275)
	   για το όνομα, 60-64px/1600 (μεσαίο 62) για τον υπότιτλο κάτω από
	   το όνομα.
	   Έτσι όσο μεγαλώνει/μικραίνει η εικόνα, το κείμενο κλιμακώνεται
	   μαζί της 1:1, σε ΟΠΟΙΑΔΗΠΟΤΕ αναλογία οθόνης. */
	--hero-img-w: min(100vw, calc(200vh / 3));
}
/* "contain" (όχι "cover") ζητήθηκε από την πρώτη δοκιμή: με "cover" σε
   πλατιές desktop οθόνες, η κατακόρυφη (2:3) εικόνα μεγέθυνε τόσο ώστε
   η κολοκύθα έβγαινε σχεδόν εντελώς έξω από το πρώτο viewport. Με
   "contain" + position "center top", η εικόνα χωράει πάντα ολόκληρη —
   στο desktop γεμίζει ακριβώς το ύψος (η κολοκύθα φτάνει ως κάτω), στο
   mobile γεμίζει το πλάτος και αφήνει λίγο κενό από κάτω πριν το επόμενο
   section· το κενό δεν φαίνεται γιατί το φόντο της εικόνας (κρεμ) ταιριάζει
   με το --bg του section. */
.hero-bg{
	position:absolute; inset:0; z-index:0;
	background-size:contain; background-repeat:no-repeat; background-position:center top;
}
.hero-content{
	position:relative; z-index:1; width:100%;
	display:flex; flex-direction:column; align-items:center; text-align:center;
	padding:9vh 24px 0;
}
.hero-kicker{
	font-family:var(--display); font-style:normal; font-weight:500;
	font-size:calc(var(--hero-img-w) * 78 / 1600);
	letter-spacing:calc(var(--hero-img-w) * 2 / 1600);
	color:var(--ink); margin-bottom:calc(var(--hero-img-w) * 16 / 1600);
}
/* 15/9, ζητήθηκε ρητά: το όνομα φαινόταν "τεράστιο" σε σχέση με τον
   τίτλο/υπότιτλο (275/1600 ήταν 3.4x/4.4x πιο μεγάλο) — μειώθηκε σε
   195/1600 (~2.4x/3.1x), πιο ισορροπημένο αλλά παραμένει το κυρίαρχο
   στοιχείο.
   15/9, δεύτερο πέρασμα: το πρώτο "μεγάλωμα" των κενών (σε μονάδες
   σχετικές με το --hero-img-w) δεν φαινόταν αρκετό στην πράξη — αιτία:
   το Miama Nueva είναι καλλιγραφικό, το κεφαλαίο "Μ" έχει έναν πολύ
   ψηλό διακοσμητικό βρόχο που "τρώει" προς τα πάνω σχεδόν όση απόσταση
   είχε προστεθεί, οπότε ένα σταθερό μικρό κενό δεν αρκεί — πρέπει να
   κλιμακώνεται με το ΙΔΙΟ το μέγεθος του ονόματος. Το margin-top/bottom
   εδώ είναι πλέον σε "em" (= ποσοστό του δικού του font-size, ΟΧΙ του
   hero-img-w), ώστε το κενό να μεγαλώνει αυτόματα ανάλογα όσο μεγαλώνει
   το όνομα — αρκετό να "καθαρίζει" τον βρόχο του Μ σε κάθε μέγεθος. */
.hero-name{
	font-family:'Miama Nueva',var(--display),cursive; font-weight:400;
	font-size:calc(var(--hero-img-w) * 185 / 1600); letter-spacing:0;
	line-height:1.05; color:var(--rose);
	margin:.32em 0 .38em;
}
.hero-subtitle{
	font-family:var(--display); font-style:italic; font-weight:500;
	font-size:calc(var(--hero-img-w) * 60 / 1600); letter-spacing:0;
	color:var(--ink); max-width:90%; margin:0 auto;
}
.scroll-cue{
	position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:1;
	display:flex; flex-direction:column; align-items:center; gap:8px;
	font-size:11px; letter-spacing:.18em; color:var(--ink-soft);
}
.scroll-cue .line{ width:1px; height:30px; background:var(--rose); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.2;} 50%{opacity:1;} }

.countdown{ background:var(--bg-alt); }
.date-line{ text-align:center; font-family:var(--display); font-size:16px; color:var(--ink-soft); margin-top:-4px; }
.countdown-grid{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:26px; }
.countdown-cell{ width:96px; height:96px; border-radius:50%; background:var(--card); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(82,45,27,.08); }
.countdown-num{ font-family:var(--display); font-size:28px; font-weight:600; color:var(--rose); font-variant-numeric:tabular-nums; }
.countdown-label{ font-size:9px; letter-spacing:.14em; color:var(--ink-soft); margin-top:2px; font-weight:600; }

.details-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px; }
.detail-card{ background:var(--card); padding:38px 30px; text-align:center; border-radius:20px; border:1px solid var(--line); }
.detail-card h3{ font-family:var(--display); font-size:23px; color:var(--ink); font-weight:500; margin-bottom:4px; }
.detail-card .addr{ font-size:13px; color:var(--ink-soft); margin-top:4px; }
.detail-card .time{ font-size:12px; color:var(--rose-deep); margin-top:10px; font-weight:700; letter-spacing:.04em; }
.detail-card .map{ margin-top:20px; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.btn-row{ display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.btn{ font-size:12px; font-weight:700; letter-spacing:.03em; padding:11px 20px; border-radius:999px; border:1.5px solid var(--rose); background:transparent; color:var(--rose-deep); transition:background .25s,color .25s; display:inline-block; }
.btn:hover{ background:var(--rose); color:#fff; }
.btn.solid{ background:var(--rose); color:#fff; border-color:var(--rose); }
.btn.solid:hover{ background:var(--ink); border-color:var(--ink); }

.schedule{ background:var(--bg); }
.timeline{ max-width:540px; margin:44px auto 0; position:relative; }
.timeline::before{ content:''; position:absolute; left:60px; top:6px; bottom:6px; width:2px; background:repeating-linear-gradient(to bottom, var(--rose) 0 5px, transparent 5px 10px); opacity:.5; }
.t-item{ display:flex; gap:24px; padding-bottom:34px; position:relative; }
.t-item:last-child{ padding-bottom:0; }
.t-time{ width:60px; flex-shrink:0; text-align:right; font-family:var(--display); font-size:18px; color:var(--rose-deep); }
.t-dot{ position:absolute; left:54px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--rose); border:2px solid var(--bg); }
.t-body{ padding-left:22px; }
.t-body h4{ font-family:var(--display); font-size:19px; font-weight:500; color:var(--ink); }
.t-body p{ font-size:13.5px; color:var(--ink-soft); margin-top:3px; }

.gallery{ background:var(--bg-alt); }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:44px; }
.gallery-grid .ph{ aspect-ratio:1/1.1; border-radius:16px; background:linear-gradient(135deg,#f3d9d5,#e8c3bd); transition:transform .4s ease; }
.gallery-grid .ph:hover{ transform:scale(1.03); }
.gallery-note{ text-align:center; margin-top:32px; font-size:13px; color:var(--ink-soft); }
.gallery-note a{ color:var(--rose-deep); font-weight:700; border-bottom:1px solid var(--rose-deep); }

.rsvp{ background:var(--bg); }
.rsvp-deadline{ text-align:center; font-size:14px; color:var(--ink-soft); max-width:400px; margin:14px auto 0; }
.rsvp-note{ text-align:center; font-size:13px; font-style:italic; color:var(--ink-soft); margin:0 0 16px; }
.rsvp-box{ max-width:540px; margin:44px auto 0; border:1px solid var(--line); padding:42px 36px; border-radius:22px; background:var(--card); }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:11px; letter-spacing:.08em; color:var(--rose-deep); margin-bottom:8px; font-weight:700; }
.field input, .field textarea{ width:100%; border:none; border-bottom:1px solid var(--line); background:transparent; font-family:var(--sans); font-size:15px; color:var(--ink); padding:8px 2px; }
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--rose); }
.field textarea{ resize:vertical; min-height:66px; }
.radio-row{ display:flex; gap:20px; }
.radio-row label{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; }
.radio-row input{ width:auto; accent-color:var(--rose); }
.rsvp-box .submit{ width:100%; margin-top:8px; padding:14px; }

.guestbook{ background:var(--bg-alt); }
.wishes{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px; }
.wish-card{ background:var(--card); padding:24px 22px; border-radius:18px; border:1px solid var(--line); }
.wish-card p{ font-family:var(--display); font-style:italic; font-size:17px; }
.wish-card .who{ margin-top:12px; font-size:12px; letter-spacing:.08em; color:var(--rose-deep); font-weight:700; }
.wish-form{ max-width:540px; margin:36px auto 0; }

.footer{ text-align:center; padding:76px 24px 56px; }
.footer .badge-circle{ width:92px; height:92px; border-radius:50%; background:var(--rose); display:flex; align-items:center; justify-content:center; margin:0 auto 26px; color:#fff; }
.footer .badge-circle svg{ width:38px; height:38px; }
.footer h3{ font-family:var(--display); font-size:27px; font-weight:500; margin-bottom:10px; color:var(--ink); }
.footer .name{ font-size:14px; color:var(--ink-soft); font-weight:600; }
.qr-block{ margin:26px auto 0; width:112px; height:112px; background:var(--card); border-radius:18px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.qr-caption{ margin-top:10px; font-size:11px; letter-spacing:.1em; color:var(--ink-soft); }
.upload-note{ margin-top:14px; font-size:12.5px; font-weight:600; }
.upload-note a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }

@media (max-width:720px){
  .single-event section{ padding:66px 0; }
  .details-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .wishes{ grid-template-columns:1fr; }
  .countdown-cell{ width:80px; height:80px; }
  .hero-content{ padding-top:7vh; }
}
@media (prefers-reduced-motion:reduce){ .single-event *{ animation:none!important; transition:none!important; } }