/* baptism-18 — Αλεπουδάκι & Κολοκύθες ("κάρτα" hero, ίδια συνταγή με τα wedding-33..48· sections ίδια με το baptism-17) */
/* Οι γραμματοσειρές φορτώνονται με <link> στην κεφαλίδα (includes/template-assets.php) — όχι @import, για ταχύτητα. */

/* 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:#fbf7f0; --bg-alt:#f5ede1; --rose:#c07a3e; --rose-deep:#7a4a22;
	--ink:#4a3020; --ink-soft:#8a735f; --card:#fffcf7; --line:rgba(74,48,32,.12);
	--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 — "κάρτα" πρόσκλησης (baptism-18). Το hero.webp περιέχει το χαρτί,
   τις εικονογραφήσεις ΚΑΙ τα διακοσμητικά (κλαράκια, καρδούλες, πλαίσιο
   κουμπιού)· ΟΛΟ το κείμενο είναι δυναμικό από wp-admin, τοποθετημένο με
   μονάδα --u = 1/1049 του πλάτους της εικόνας. Θέσεις/μεγέθη μετρημένα στο
   mockup του πελάτη (docs/uploads/b18-filled.webp) με render των γραμματοσειρών.
   ============================================================ */
.single-event section.hero{ padding:0; }
.hero{
	--hero-img-w: min(100vw, calc(100vh * 1049 / 1500));
	--u: calc(var(--hero-img-w) / 1049);
	--hfont:'EB Garamond','Cormorant Garamond',Georgia,serif;
	position:relative; min-height:100vh; min-height:100dvh;
	background-color:#e6e2df; /* δείγμα από τις άκρες του hero.webp */
	display:flex; align-items:center; justify-content:center;
}
.hero-stage{
	position:relative; flex:none; width:var(--hero-img-w); aspect-ratio:1049/1500;
	background:url('../../assets/img/baptism-18/hero.webp?v=1') center/100% 100% no-repeat;
	--c-kicker:#5e3a1c; --c-kicker2:#5b3414; --c-name:#5b3414;
	--c-sub:#4f3018; --c-date:#4a2c10; --c-link:#4a2e14;
	font-family:var(--hfont);
}
@media (max-width:899px){
	.hero{ --hero-img-w:100vw; min-height:0; display:block; }
}
.hero-kicker, .hero-kicker2, .hero-name, .hero-date{
	position:absolute; left:0; width:100%; margin:0; text-align:center; line-height:1; white-space:nowrap; font-weight:400;
}
.hero-kicker{
	top:calc(var(--u) * 342); left:calc(var(--u) * 17); font-style:normal;
	font-size:calc(var(--u) * 50.27); letter-spacing:0em; text-indent:0em; color:var(--c-kicker);
}
.hero-kicker2{
	top:calc(var(--u) * 402); left:calc(var(--u) * 4); font-style:italic;
	font-size:calc(var(--u) * 113.87); color:var(--c-kicker2);
}
.hero-name{
	top:calc(var(--u) * 572); left:calc(var(--u) * 2.5); /* 29/10: στο κέντρο ανάμεσα στις δύο καρδιές (σώμα γραμμάτων), ο τόνος να μην ακουμπά την πάνω */
	font-family:'Miama Nueva',var(--hfont); font-style:normal;
	font-size:calc(var(--u) * 148); color:var(--c-name);
	-webkit-text-stroke:calc(var(--u) * 1.6) var(--c-name); /* η Miama Nueva στα ελληνικά είναι πολύ λεπτή — λίγο πιο "γεμάτη", όπως στο σχέδιο */
}
.hero-subtitle{
	position:absolute; left:50%; transform:translateX(calc(-50% + var(--u) * 2)); width:max-content; margin:0; text-align:center;
	top:calc(var(--u) * 803); font-style:normal; font-weight:400;
	font-size:calc(var(--u) * 34.74); line-height:calc(var(--u) * 43); letter-spacing:0.103em; text-indent:0.103em; color:var(--c-sub);
}
.hero-subtitle .sl{ display:block; white-space:nowrap; }
.hero-date{
	top:calc(var(--u) * 981.5); left:calc(var(--u) * 3); font-style:normal; font-variant-numeric:lining-nums;
	font-size:calc(var(--u) * 95.91); letter-spacing:0em; text-indent:0em; color:var(--c-date);
}
.single-event .scroll-cue{
	position:absolute; left:50%; transform:translateX(calc(-50% + var(--u) * -0.5)); width:max-content;
	top:calc(var(--u) * 1125); font-family:var(--hfont); font-weight:400;
	font-size:calc(var(--u) * 24.35); line-height:1; letter-spacing:0.06em; text-indent:0.06em;
	color:var(--c-link); text-decoration:none; transition:opacity .25s ease;
}
.single-event .scroll-cue:hover{ opacity:.7; }
/* Στο κινητό ο υπότιτλος και το "Δείτε την πρόσκληση" ανεβαίνουν σε ελάχιστο μέγεθος για να διαβάζονται. */
@media (max-width:899px){
	.hero-subtitle{ font-size:max(11px, calc(var(--u) * 34.74)); }
	.single-event .scroll-cue{ font-size:max(9px, calc(var(--u) * 24.35)); }
}

.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,#f1e2cc,#e4cba8); 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; }
}
@media (prefers-reduced-motion:reduce){ .single-event *{ animation:none!important; transition:none!important; } }

/* 4.21.0: ελαφρύτερη εικόνα κάρτας στο κινητό (ίδια εικόνα, 800px) — ταχύτητα/LCP */
@media (max-width:600px){
	.hero-stage{ background-image:url('../../assets/img/baptism-18/hero-m.webp?v=1'); }
}