/* Christmas in Athens: /christmaseve page styles.
   Lives at /Content/ChristmasEve/christmas-eve.css and loads from the page's Header Content.
   Everything is scoped under .cia so it can't leak into the AthensChurch theme. */

@font-face{font-family:'Heartbreak Eighties';src:url('fonts/HeartbreakEighties-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Heartbreak Eighties';src:url('fonts/HeartbreakEighties-Oblique.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

.cia{
  --cia-green-700:#1a5a33;
  --cia-green-600:#22703f;
  --cia-red-600:#b3262a;
  --cia-cream-50:#fcf4e6;
  --cia-cream-100:#f4ecda;
  --cia-paper-200:#eee5ca;
  --cia-ink-900:#14201a;
  --cia-ink-700:#3b4a40;
  --cia-font-display:'Heartbreak Eighties','DM Serif Display',Georgia,serif;
  --cia-font-body:'DM Sans',system-ui,sans-serif;
  --cia-radius:10px;
  --cia-shadow-print:0 1px 0 rgba(20,32,26,.08),0 8px 24px -12px rgba(20,32,26,.35);
  --cia-ease:cubic-bezier(.33,0,.2,1);
  --cia-tracking-label:.14em;
  display:block;
  font-family:var(--cia-font-body);
  color:var(--cia-ink-900);
  -webkit-font-smoothing:antialiased;
}
.cia *,.cia *::before,.cia *::after{box-sizing:border-box}
.cia img{max-width:100%}

/* Shared pieces */
.cia .cia-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.cia .cia-disp{font-family:var(--cia-font-display);font-weight:400;line-height:.92;letter-spacing:normal;text-transform:none;margin:0;text-wrap:balance;color:inherit}
.cia .cia-eyebrow{font-family:var(--cia-font-body);font-weight:700;font-size:13px;letter-spacing:var(--cia-tracking-label);text-transform:uppercase;margin:0}
.cia .cia-body,.cia .cia-body p{font-size:clamp(17px,1.4vw,19px);line-height:1.6;margin:0;text-wrap:pretty}
.cia .cia-body p+p{margin-top:1em}
/* Eyebrows above a section title are larger than the 13px labels inside cards. */
.cia .cia-welcome-head .cia-eyebrow,.cia .cia-sundays-head .cia-eyebrow,.cia .cia-series-head .cia-eyebrow,.cia .cia-eve-head .cia-eyebrow{font-size:clamp(17px,1.4vw,19px);line-height:1.6}
.cia-tex-green{background:var(--cia-green-600) url('images/Green_16x9.webp') center/cover;color:var(--cia-cream-50)}
.cia-tex-green a{color:var(--cia-cream-50)}
.cia-tex-red{background:var(--cia-red-600) url('images/Red_Stories.webp') center/cover;color:var(--cia-cream-50)}
.cia-tex-paper{background:var(--cia-paper-200) url('images/Paper_16x9.webp') center/cover;color:var(--cia-green-600)}
.cia .cia-card{background:var(--cia-cream-50);border-radius:var(--cia-radius);padding:28px;box-shadow:var(--cia-shadow-print);color:var(--cia-ink-900);transition:transform .4s var(--cia-ease),box-shadow .4s,opacity .9s var(--cia-ease) var(--d,0s)}
.cia .cia-card.in:hover{transform:translateY(-4px)}

/* ---------- Hero ----------
   One HTML block: <header class="cia cia-hero cia-tex-red"> around the logo.
   christmas-eve.js adds the twinkling stars ([data-cia-twinkle]) and the scroll parallax. */
.cia-hero{position:relative;overflow:hidden;min-height:min(86vh,820px);display:flex;align-items:center;justify-content:center;padding:80px 20px}
.cia-hero .cia-hero-logo{position:relative;width:min(640px,86vw);aspect-ratio:1400/764;animation:cia-logo-in 1.6s cubic-bezier(.2,.7,.2,1) both}
.cia-hero .cia-hero-logo img{width:100%;height:auto;display:block}
.cia-hero .cia-twk{position:absolute;display:block;background:url('images/ChristmasInAthens_Logo-Cream.webp') no-repeat;animation:cia-twinkle 3s ease-in-out infinite;transform-origin:center}
@keyframes cia-logo-in{from{opacity:0;transform:scale(.92) translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes cia-twinkle{0%,100%{opacity:1;transform:scale(1) rotate(0)}45%{opacity:.25;transform:scale(.55) rotate(-12deg)}60%{opacity:1;transform:scale(1.12) rotate(0)}}

.cia[id]{scroll-margin-top:24px}

/* The Homepage layout's empty zones (Sub Feature, Section A) keep Bootstrap's 1px column
   min-height, which shows a thin strip of white body between the last section and the footer. */
main > .row > [class*="col-"]:not(:has(.block-instance)){min-height:0}

/* Buttons */
.cia .cia-btns{display:flex;gap:12px;flex-wrap:wrap;padding-top:8px}
.cia .cia-btn{display:inline-flex;align-items:center;font-family:var(--cia-font-display);font-size:20px;line-height:1;padding:14px 28px;border-radius:999px;text-decoration:none;border:1.5px solid transparent;transition:background .15s var(--cia-ease),transform .15s}
.cia .cia-btn:active{transform:scale(.97)}
.cia .cia-btn-green{background:var(--cia-green-600);color:var(--cia-cream-50)}
.cia .cia-btn-green:hover,.cia .cia-btn-green:focus{background:var(--cia-green-700);color:var(--cia-cream-50);text-decoration:none}
.cia .cia-btn-outline-green{background:transparent;color:var(--cia-green-600);border-color:var(--cia-green-600)}
.cia .cia-btn-outline-green:hover,.cia .cia-btn-outline-green:focus{background:rgba(34,112,63,.08);color:var(--cia-green-700);text-decoration:none}

/* Scroll reveal (christmas-eve.js adds .cia-rv / .cia-rv-clip, then .in once on screen) */
.cia .cia-rv{opacity:0;transform:translateY(32px);transition:opacity .9s var(--cia-ease) var(--d,0s),transform .9s var(--cia-ease) var(--d,0s)}
.cia .cia-rv.in{opacity:1;transform:none}
.cia .cia-rv-clip{clip-path:inset(0 0 100% 0 round 10px);transition:clip-path 1.1s cubic-bezier(.65,0,.2,1) var(--d,0s)}
.cia .cia-rv-clip.in{clip-path:inset(0 0 0 0 round 10px)}

/* ---------- Welcome ----------
   One HTML block: <section class="cia cia-welcome">. Plain paper background. */
.cia-welcome{background:var(--cia-paper-200);padding:clamp(64px,9vw,120px) 0}
.cia-welcome .cia-wrap{max-width:1080px;display:flex;flex-direction:column;gap:clamp(36px,5vw,64px)}
.cia-welcome .cia-welcome-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.cia-welcome .cia-eyebrow{color:var(--cia-red-600)}
.cia-welcome .cia-welcome-title{display:flex;align-items:center;gap:clamp(12px,2vw,28px);color:var(--cia-green-600)}
.cia-welcome .cia-welcome-title span{font-family:serif;font-size:clamp(18px,2vw,28px);line-height:1}
.cia-welcome .cia-welcome-title h1{font-size:clamp(44px,6vw,80px);color:inherit}
.cia-welcome-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,80px);align-items:center}
.cia-welcome-photo{aspect-ratio:2/3;width:100%;max-width:340px;justify-self:center;border-radius:var(--cia-radius);overflow:hidden;box-shadow:var(--cia-shadow-print);position:relative}
.cia-welcome-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.cia-welcome-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;color:var(--cia-ink-900)}
.cia-welcome .cia-welcome-lead{font-size:clamp(28px,3vw,40px);line-height:1.1;color:var(--cia-green-600)}
@media(max-width:860px){.cia-welcome-grid{grid-template-columns:1fr}.cia-welcome-photo{max-width:420px}}

/* ---------- Special Sundays ----------
   Two blocks share this section: the header HTML block's Pre-HTML opens
   <section class="cia cia-sundays cia-tex-green"> and the Content Component's Post-HTML closes it. */
.cia-sundays{padding:clamp(64px,9vw,120px) 0}
.cia-sundays>.block-instance{margin:0;padding:0}
.cia-sundays .cia-sundays-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:clamp(40px,6vw,72px)}
.cia-sundays .cia-sundays-head h2{font-family:var(--cia-font-display);font-weight:400;font-size:clamp(44px,6vw,80px);line-height:.92;margin:0;color:inherit;text-transform:none;letter-spacing:normal}
.cia-sundays .cia-sundays-head p{font-size:clamp(17px,1.4vw,19px);line-height:1.6;margin:0;max-width:640px}
.cia-sundays .cia-sundays-head .cia-eyebrow{color:inherit}

.cia-sun-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px)}
@media(max-width:900px){.cia-sun-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.cia-sun-col{display:flex;flex-direction:column;gap:14px}
.cia-sun-col .cia-graphic{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--cia-radius);box-shadow:var(--cia-shadow-print);transition:transform .4s var(--cia-ease),box-shadow .4s}
.cia-sun-col:hover .cia-graphic{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 18px 40px -16px rgba(0,0,0,.45)}
.cia-sun-col .cia-sun-title{font-size:clamp(34px,3vw,44px);line-height:1;white-space:nowrap}
.cia-sun-col .cia-body,.cia-sun-col .cia-body p{font-size:17px}
.cia-sun-col .cia-sun-photo{aspect-ratio:4/3;width:100%;margin-top:auto;position:relative;overflow:hidden;border-radius:var(--cia-radius)}
.cia-sun-col .cia-sun-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}

/* ---------- Anticipating Christmas series ----------
   One HTML block: <section id="series" class="cia cia-series cia-tex-paper">. */
.cia-series{padding:clamp(64px,9vw,120px) 0}
.cia-series .cia-wrap{display:flex;flex-direction:column;gap:48px}
.cia-series .cia-series-head{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.cia-series .cia-eyebrow{color:var(--cia-red-600)}
.cia-series .cia-series-logo{width:min(560px,80vw);height:auto;display:block}
.cia-series .cia-series-head .cia-body{max-width:680px;color:var(--cia-ink-900)}
.cia-speaker{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:28px;align-items:center;max-width:960px;margin:0 auto;width:100%}
.cia-speaker-photo{aspect-ratio:1;width:100%;border-radius:50%;overflow:hidden;position:relative}
.cia-speaker-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transform:scale(1.3) translate(6%,7%);display:block}
.cia-speaker-copy{display:flex;flex-direction:column;gap:10px}
.cia .cia-speaker-copy h3{font-size:clamp(34px,3.6vw,46px);line-height:1.05;color:var(--cia-green-600)}
.cia .cia-speaker-copy .cia-body{color:var(--cia-ink-700)}
@media(max-width:600px){.cia-speaker{grid-template-columns:1fr;justify-items:center;text-align:center}.cia-speaker-photo{max-width:180px}}

/* ---------- Christmas Eve ----------
   One HTML block: <section id="eve" class="cia cia-eve cia-tex-red">. The welcome's
   "Christmas Eve Times" button links to #eve. */
.cia-eve{position:relative;overflow:hidden;padding:clamp(64px,9vw,120px) 0}
.cia-eve .cia-wrap{display:flex;flex-direction:column;gap:48px;position:relative;z-index:1}
.cia-eve .cia-eve-head{text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center}
.cia-eve .cia-eve-head h2{font-size:clamp(56px,8vw,120px)}
.cia .cia-eve-verse{font-size:clamp(28px,3.4vw,44px);line-height:1.1;font-style:italic}
.cia-eve-verse span{display:block;font-family:var(--cia-font-body);font-style:normal;font-size:14px;font-weight:700;letter-spacing:var(--cia-tracking-label);text-transform:uppercase;margin-top:10px}
.cia-eve .cia-eve-head .cia-body{max-width:680px}
.cia-eve .cia-sp{position:absolute;font-family:serif;line-height:1;transform:translate(-50%,-50%);pointer-events:none;animation:cia-spk 3.2s ease-in-out infinite}
.cia-eve .cia-sp:nth-child(2){animation-delay:-1.1s}.cia-eve .cia-sp:nth-child(3){animation-delay:-2s}.cia-eve .cia-sp:nth-child(4){animation-delay:-.6s}
@keyframes cia-spk{0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}50%{opacity:.3;transform:translate(-50%,-50%) scale(.6) rotate(-15deg)}}
.cia .cia-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.cia .cia-loc{border:1.5px solid rgba(252,244,230,.4);border-radius:var(--cia-radius);padding:28px;display:flex;flex-direction:column;gap:10px;transition:transform .4s var(--cia-ease),box-shadow .4s,opacity .9s var(--cia-ease) var(--d,0s)}
.cia .cia-loc.in:hover{transform:translateY(-4px)}
.cia .cia-loc a{color:var(--cia-cream-50);text-decoration:underline;text-underline-offset:3px;font-size:16px}
.cia .cia-time{font-family:var(--cia-font-display);font-size:clamp(34px,4vw,48px);line-height:1;margin:0}
.cia-eve-card .cia-eve-photo{aspect-ratio:3/2;width:100%;margin-bottom:16px;border-radius:var(--cia-radius);overflow:hidden;position:relative}
.cia-eve-card .cia-eve-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cia .cia-eve-card .cia-eyebrow{color:var(--cia-red-600);margin-bottom:10px}
.cia .cia-eve-card h3{font-size:34px;line-height:1.05;color:var(--cia-green-600);margin-bottom:10px}
.cia .cia-eve-card .cia-body{color:var(--cia-ink-700);font-size:17px}

@media(prefers-reduced-motion:reduce){
  .cia-eve .cia-sp{animation:none}
  .cia .cia-rv,.cia .cia-rv-clip{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .cia-sun-col .cia-graphic{transition:none}
  .cia-hero .cia-hero-logo,.cia-hero .cia-twk{animation:none}
}