/* Shared sections: packages, timetable, gallery, notes, newsletter, lightbox */

/* ---- Packages ---- */
.packages{background:linear-gradient(180deg,var(--mist),#f3f9f8 60%,var(--paper));overflow:hidden}
.packages__bg{position:absolute;inset:0;opacity:.5;pointer-events:none}
.packages__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch;position:relative}
.plan{position:relative;display:flex;flex-direction:column;padding:42px 36px 38px;border-radius:30px;background:rgba(255,255,255,.9);border:1px solid rgba(1,35,65,.08);box-shadow:var(--shadow);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s}
.plan::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(44,167,170,.16),transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none}
.plan:hover::before{opacity:1}
.plan__tag{align-self:flex-start;padding:6px 14px;border-radius:999px;background:var(--mist);color:var(--teal-d);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.plan__name{margin:20px 0 6px;font-size:2rem}
.plan__price{display:flex;align-items:baseline;gap:10px;margin:0 0 14px}
.plan__price span{font-family:var(--serif);font-size:4rem;line-height:1;color:var(--navy);font-weight:500}
.plan__price small{font-size:.9rem;color:var(--muted)}
.plan__text{color:var(--muted);font-size:1rem}
.plan__list{list-style:none;margin:6px 0 30px!important;display:grid;gap:12px;flex:1}
.plan__list li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.plan__list .icon{width:20px;height:20px;flex:none;margin-top:3px;padding:3px;border-radius:50%;background:var(--teal);color:#fff;stroke-width:2.4}
.plan .btn{align-self:stretch;justify-content:space-between}
.plan--featured{background:radial-gradient(520px 320px at 100% 0,rgba(44,167,170,.45),transparent 62%),linear-gradient(160deg,#06304f,#012341);border-color:rgba(241,199,110,.5);top:-18px;box-shadow:0 50px 90px -34px rgba(1,35,65,.85)}
.plan--featured .plan__name,.plan--featured .plan__price span{color:#fff}
.plan--featured .plan__text,.plan--featured .plan__price small,.plan--featured .plan__list li{color:rgba(255,255,255,.82)}
.plan--featured .plan__tag{background:linear-gradient(135deg,var(--gold-l),var(--gold));color:#012341}
.plan--featured .plan__list .icon{background:var(--gold)}
.plan--featured::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,var(--gold-l),transparent 40%,var(--gold) 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.plan:not(.plan--featured):hover{transform:translateY(-8px)}
.packages__note{text-align:center;font-size:.85rem;color:var(--muted);margin:72px auto 0;max-width:640px}

/* ---- Timetable ---- */
.timetable{background:var(--paper)}
.tt{background:#fff;border-radius:30px;box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden}
.tt__tabs{display:flex;gap:6px;padding:14px;background:linear-gradient(135deg,#031a30,#012341);overflow-x:auto;scrollbar-width:none}
.tt__tabs::-webkit-scrollbar{display:none}
.tt__tab{flex:1 0 auto;min-width:78px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 18px;border:0;border-radius:18px;background:transparent;color:rgba(255,255,255,.7);cursor:pointer;font:600 .9rem var(--sans);letter-spacing:.12em;text-transform:uppercase;transition:background .35s,color .35s,transform .35s var(--ease)}
.tt__tab small{font-size:.7rem;font-weight:500;letter-spacing:.05em;opacity:.7}
.tt__tab:hover{color:#fff;background:rgba(255,255,255,.08)}
.tt__tab.is-active{background:linear-gradient(135deg,var(--gold-l),var(--gold));color:#012341;transform:translateY(-2px)}
.tt__tab:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.tt__panel{padding:clamp(22px,4vw,44px)}
.tt__panel[hidden]{display:none}
.tt__panel.is-active{animation:ttIn .6s var(--ease)}
@keyframes ttIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tt__day{font:italic 500 2rem var(--serif);color:var(--teal);margin:0 0 14px}
.tt__list{list-style:none;display:grid;gap:12px}
.tt__row{display:grid;grid-template-columns:96px 1fr auto 48px;gap:20px;align-items:center;padding:20px 22px;border-radius:20px;background:var(--paper);border:1px solid transparent;transition:transform .4s var(--ease),border-color .3s,background .3s,box-shadow .3s}
.tt__row:hover{transform:translateX(6px);background:#fff;border-color:rgba(216,156,63,.6);box-shadow:0 18px 36px -24px rgba(1,35,65,.5)}
.tt__time{font:500 1.9rem var(--serif);color:var(--gold-d)}
.tt__main strong{display:block;font:500 1.55rem/1.15 var(--serif);color:var(--navy)}
.tt__main small{font-size:.88rem;color:var(--muted)}
.tt__teacher{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);font-weight:600;padding:7px 14px;border-radius:999px;background:var(--mist)}
.tt .tt__go{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;transition:background .3s,transform .4s var(--ease)}
.tt .tt__go:hover{background:var(--gold);color:#012341;transform:rotate(-45deg)}
.tt__go .icon{width:20px;height:20px}

/* ---- Gallery ---- */
.gallery{background:linear-gradient(180deg,var(--paper),var(--sand))}
.mosaic{columns:3 260px;column-gap:16px}
.mosaic__item{position:relative;display:block;break-inside:avoid;margin:0 0 16px;overflow:hidden;border-radius:26px;cursor:zoom-in;background:var(--navy)}
.mosaic__item img{width:100%;height:auto;transition:transform 1.1s var(--ease),filter .6s}
.mosaic__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(1,35,65,.55));opacity:0;transition:opacity .5s}
.mosaic__item:hover img{transform:scale(1.08)}
.mosaic__item:hover::after{opacity:1}
.mosaic__zoom{position:absolute;right:16px;bottom:16px;z-index:2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#012341;transform:scale(0) rotate(-90deg);transition:transform .5s var(--ease)}
.mosaic__item:hover .mosaic__zoom{transform:none}
.mosaic__zoom .icon{width:20px;height:20px;transform:rotate(-45deg)}
.lightbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(1,20,36,.92);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.lightbox.is-on{opacity:1;visibility:visible;transition:opacity .4s}
.lightbox img{max-width:min(92vw,1200px);max-height:86vh;width:auto;border-radius:18px;box-shadow:0 40px 100px -20px #000;transform:scale(.94);transition:transform .6s var(--ease)}
.lightbox.is-on img{transform:none}
.lightbox button{position:absolute;border:0;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:26px;cursor:pointer;transition:background .3s}
.lightbox button:hover{background:var(--gold);color:#012341}
.lightbox__x{top:22px;right:22px}.lightbox__p{left:22px;top:50%}.lightbox__n{right:22px;top:50%}

/* ---- Practice notes ---- */
.notes{background:var(--sand)}
.notes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.note{position:relative;padding:40px 34px 38px;border-radius:28px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s}
.note::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--teal),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.note:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.note:hover::before{transform:none}
.note__n{position:absolute;right:26px;top:10px;font:italic 500 6rem/1 var(--serif);color:transparent;-webkit-text-stroke:1px rgba(216,156,63,.45)}
.note__tag{display:inline-block;margin-bottom:18px;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--gold-text)}
.note h3{font-size:2rem;margin-bottom:.4em;position:relative}
.note p{color:var(--muted);margin:0;position:relative}

/* ---- Newsletter ---- */
.newsletter{position:relative;padding-block:clamp(56px,7vw,96px);background:radial-gradient(700px 360px at 90% 0,rgba(44,167,170,.4),transparent 65%),linear-gradient(135deg,#031a30,#012341 55%,#06304f);color:#fff;overflow:hidden}
.newsletter::before{content:"";position:absolute;width:520px;height:520px;right:-120px;bottom:-260px;border-radius:50%;border:1px solid rgba(241,199,110,.35);box-shadow:0 0 0 60px rgba(241,199,110,.04),0 0 0 120px rgba(241,199,110,.03)}
.newsletter__inner{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.rr-site .newsletter__title{color:#fff;font-size:clamp(2.4rem,4.6vw,3.8rem)}
.rr-site .newsletter__title em{color:var(--gold-l)}
.newsletter__copy p{color:rgba(255,255,255,.8);font-size:1.1rem;margin:0;max-width:480px}
.newsletter__row{display:flex;gap:10px;padding:8px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.newsletter__row input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font:400 1rem var(--sans);padding:0 20px;outline:none}
.newsletter__row input::placeholder{color:rgba(255,255,255,.6)}
.newsletter__row:focus-within{border-color:var(--gold-l);box-shadow:0 0 0 4px rgba(241,199,110,.2)}
.newsletter__consent{display:flex;gap:10px;margin-top:14px;font-size:.85rem;color:rgba(255,255,255,.7);line-height:1.5}
.newsletter__consent input{accent-color:var(--gold);margin-top:3px}
.newsletter .form__trap{position:absolute;left:-9999px}
.form-done--news{display:flex;gap:14px;align-items:center;padding:22px 26px;border-radius:22px;background:rgba(255,255,255,.1);border:1px solid rgba(241,199,110,.5)}
.form-done--news .icon{width:34px;height:34px;color:var(--gold-l)}
.form-done--news p{margin:0;font:500 1.6rem var(--serif);color:#fff}
.newsletter .form-msg{color:#ffd0d0;margin-top:10px;font-size:.9rem}

@media (max-width:980px){
  .packages__grid,.notes__grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .plan--featured{transform:none}
  .newsletter__inner{grid-template-columns:1fr}
  .tt__row{grid-template-columns:76px 1fr 44px}
  .tt__teacher{display:none}
  .mosaic{columns:2 150px;column-gap:12px}
  .mosaic__item{margin-bottom:12px;border-radius:18px}
}
@media (max-width:560px){
  .newsletter__row{flex-direction:column;border-radius:26px;padding:12px}
  .newsletter__row input{padding:14px 12px}
  .tt__time{font-size:1.5rem}
  .tt__row{padding:16px;gap:12px}
  .tt__main strong{font-size:1.3rem}
}

/* ---------- Shared small components ---------- */
.notice-card{text-align:center;padding:clamp(30px,5vw,70px) 20px}
.notice-card>.icon{width:54px;height:54px;color:var(--gold);margin:0 auto 14px;stroke-width:1.2}
.notice-card h2{font-size:clamp(2rem,3.4vw,2.8rem)}
.admin-note{margin-top:1.5rem;padding:12px 16px;border-radius:12px;background:#fff6e0;border:1px dashed var(--gold);font-size:.88rem;color:#6a4a10}

.tick-list{list-style:none;display:grid;gap:12px;margin:0 0 1.6rem!important}
.tick-list li{display:flex;gap:12px;align-items:flex-start}
.tick-list .icon{width:22px;height:22px;flex:none;margin-top:3px;padding:4px;border-radius:50%;background:var(--teal);color:#fff}
.tick-list--cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px}
.pricing-strip{padding-block:clamp(56px,7vw,96px);background:linear-gradient(170deg,var(--navy-3),var(--navy) 55%,var(--navy-2));color:#fff}
.pricing-strip__inner{display:grid;grid-template-columns:1fr auto;gap:30px 50px;align-items:center}
.pricing-strip__copy{grid-column:1/-1}
.rr-site .pricing-strip .section__title{color:#fff;margin:0}
.rr-site .pricing-strip .eyebrow{color:var(--gold-l)}
.pricing-strip__list{list-style:none;display:flex;flex-wrap:wrap;gap:16px}
.pricing-strip__list li{display:flex;flex-direction:column;gap:2px;min-width:200px;padding:20px 26px;border:1px solid var(--line-l);border-radius:20px;background:rgba(255,255,255,.06)}
.pricing-strip__label{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-l)}
.pricing-strip__list strong{font-family:var(--serif);font-size:2.4rem;font-weight:500;line-height:1.1}
.pricing-strip__list small{color:rgba(255,255,255,.7)}
@media (max-width:820px){.pricing-strip__inner{grid-template-columns:1fr}.tick-list--cols{grid-template-columns:1fr}}
.rr-site .pricing-strip .section__title em{color:var(--gold-l)}
.plan .btn{text-align:left;gap:12px}