/* ==========================================================================
   home.css: hero slider, € 5 badge, teasers
   ========================================================================== */

/* --- Hero slider --- */
.hero{position:relative;height:min(86vh,720px);min-height:520px;background:var(--dark);color:#fff;overflow:hidden;padding:0;}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 1s;display:flex;align-items:center;}
.slide.active{opacity:1;visibility:visible;z-index:2;}
.slide-bg{position:absolute;inset:0;}
.slide-bg img{width:100%;height:100%;object-fit:cover;object-position:center;}
.slide-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,22,24,.78) 0%,rgba(22,22,24,.45) 48%,rgba(22,22,24,.05) 100%);}
.slide-content{position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:0 2rem;width:100%;}
.slide-content .eyebrow{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--m-300);}
.slide-title{font-size:clamp(2.2rem,5vw,3.9rem);font-weight:640;max-width:15ch;margin:.2rem 0 1rem;color:#fff;line-height:1.12;letter-spacing:-.02em;}
.slide-content p.sub{max-width:44ch;color:rgba(238,238,238,.85);margin-bottom:1.8rem;font-size:1.05rem;}
.hero-nav{position:absolute;z-index:5;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;gap:.7rem;}
.hero-nav button{width:36px;height:5px;border-radius:99px;border:none;background:rgba(238,238,238,.28);transition:background .3s;padding:0;}
.hero-nav button::before{content:"";display:block;height:24px;margin-top:-10px;}
.hero-nav button[aria-current="true"]{background:var(--accent);}
/* Without JS: only the first slide */
.no-js .hero-nav{display:none;}

/* --- € 5 badge --- */
.fee-badge{position:absolute;z-index:6;right:4%;bottom:13%;width:178px;height:178px;border-radius:50%;background:var(--accent);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(7deg);box-shadow:0 18px 44px rgba(216,46,140,.5),0 0 0 7px rgba(216,46,140,.22);border:3px solid #fff;text-decoration:none;}
.fee-badge::before{content:"";position:absolute;inset:-15px;border-radius:50%;border:2px dashed rgba(255,255,255,.55);animation:feeRing 26s linear infinite;pointer-events:none;}
.fee-badge:hover::before,.fee-badge:focus-visible::before{animation-duration:5s;border-color:rgba(255,255,255,.9);}
.fee-badge:hover .fee-in,.fee-badge:focus-visible .fee-in,.fee-badge.spin .fee-in{animation:feeFlip .9s cubic-bezier(.3,.9,.3,1);}
.fee-in{display:flex;flex-direction:column;align-items:center;gap:.25rem;}
.fee-badge b{font-size:2.6rem;font-weight:780;line-height:1;letter-spacing:-.02em;}
.fee-badge .l1{font-size:.74rem;letter-spacing:.06em;line-height:1.3;font-weight:560;text-transform:uppercase;}
.fee-badge .l2{font-size:.7rem;letter-spacing:.03em;line-height:1.3;font-weight:420;opacity:.92;}
@keyframes feeRing{to{transform:rotate(360deg);}}
@keyframes feeFlip{0%{transform:rotateY(0);}55%{transform:rotateY(200deg) scale(1.06);}100%{transform:rotateY(360deg);}}
@media (max-width:640px){.hero{min-height:600px;}.slide{align-items:flex-start;padding-top:3.2rem;}.fee-badge{width:122px;height:122px;right:6%;bottom:4.6rem;}.fee-badge::before{inset:-10px;}.fee-badge b{font-size:1.75rem;}.fee-badge .l1{font-size:.56rem;}.fee-badge .l2{font-size:.52rem;}}

/* --- Teasers --- */
.teaser{display:grid;grid-template-columns:1fr 1.05fr;gap:4rem;align-items:center;}
.teaser.rev{grid-template-columns:1.05fr 1fr;}
.teaser .media{aspect-ratio:560/430;}
.kids-teaser-card{border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow);padding:3rem;display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center;position:relative;overflow:hidden;border:1.5px solid rgba(34,34,34,.06);}
.kids-teaser-card::before{content:"";position:absolute;inset:0 0 auto 0;height:7px;background:linear-gradient(90deg,var(--kids-1),var(--kids-3),var(--accent),var(--kids-2),var(--kids-4));}
.kids-teaser-card .media{aspect-ratio:520/400;}
.kids-teaser-card .lead{margin:.8rem 0 1.6rem;}
@media (max-width:900px){
  .teaser,.teaser.rev,.kids-teaser-card{grid-template-columns:1fr;gap:2.2rem;}
  .kids-teaser-card{padding:2rem 1.4rem;}
}