.elements { position: relative; gap: 1rem; overflow: visible; border-radius: 0; }
.schedule-class { display: flex; align-items: center; gap: .8rem; }
.schedule-icon { display: block; flex: 0 0 2.75rem; width: 2.75rem; height: 3rem; object-fit: contain; }
.schedule-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding: 1.25rem 1.5rem; border: 1px solid #d8ddcf; border-radius: 1.2rem; background: rgb(255 255 255 / 62%); }
.schedule-preview p { margin: 0; font-size: .9rem; line-height: 1.6; }
.schedule-preview strong { display: block; color: #52695d; }
.schedule-preview button, .schedule-dialog-close { border: 1px solid #52695d; border-radius: 2rem; padding: .75rem 1.1rem; font: inherit; font-size: .85rem; cursor: pointer; }
.schedule-preview button { margin-left: auto; background: #52695d; color: #fff; }
.schedule-dialog { width: min(70rem, calc(100% - 2rem)); max-height: 88dvh; padding: clamp(1rem, 3vw, 2.5rem); border: 1px solid #d8ddcf; border-radius: 1.5rem; background: #f4f3e9; color: #27352d; overflow-y: auto; }
.schedule-dialog::backdrop { background: rgb(20 32 26 / 65%); backdrop-filter: blur(5px); }
.schedule-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.schedule-dialog-header h3 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.schedule-dialog-close { flex-shrink: 0; background: #fffdf7; color: #27352d; }
.schedule-dialog button:focus-visible, .schedule-preview button:focus-visible { outline: 2px solid #52695d; outline-offset: 4px; }
.friday-schedule { margin-top: 1.5rem; }
.friday-schedule h3 { margin: 0 0 .5rem; font-size: 1.7rem; }
.friday-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.friday-groups article { padding: 1.25rem; border: 1px solid #d8ddcf; border-radius: 1rem; background: rgb(255 255 255 / 62%); }
.friday-groups h4 { margin: .4rem 0; font: 1.6rem var(--serif); }
.friday-groups p { font-size: .9rem; line-height: 1.6; }
@media (max-width: 600px) { .friday-groups { grid-template-columns: 1fr; } }
.element:nth-child(1) { --skill-image: url("skill-silks.svg"); }
.element:nth-child(2) { --skill-image: url("skill-sling.svg"); }
.element:nth-child(3) { --skill-image: url("skill-hoop.svg"); }
.element:nth-child(4) { --skill-image: url("skill-pole.svg"); }
.element:nth-child(5) { --skill-image: url("skill-flexibility.svg"); }
.element:nth-child(6) { --skill-image: url("skill-kids.svg"); }
.element { min-height: 23rem; border-radius: .6rem; transition: border-radius .4s ease, box-shadow .4s ease; isolation: isolate; }
.element:first-child { border-top-left-radius: 3rem; }
.element:nth-child(3) { border-top-right-radius: 3rem; }
.element:nth-child(4) { border-bottom-left-radius: 3rem; }
.element:last-child { border-bottom-right-radius: 3rem; }
.element::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(180deg, transparent, rgb(20 32 26 / 94%)), var(--skill-image); background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity .4s ease, transform .6s ease; }
.elements.is-expanded .element { border-radius: 1.5rem; }
.element.is-open::after { opacity: 1; transform: scale(1); }
.element.is-open { box-shadow: 0 12px 32px rgb(36 54 44 / 18%); }
.element .skill-details { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .4s ease, margin .4s ease; }
.element.is-open .skill-details { max-height: 12rem; opacity: 1; margin-top: .8rem; }
.element .skill-details p { font-size: .82rem; }
.skill-toggle { margin-top: 1rem; align-self: flex-start; border: 1px solid rgb(255 255 255 / 55%); border-radius: 2rem; padding: .45rem .8rem; background: rgb(20 32 26 / 25%); color: white; font: inherit; font-size: .75rem; cursor: pointer; }
.skill-toggle:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.activity.elements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.activity .element { align-items: stretch; }
.activity .element:nth-child(n) { border-radius: 1.3rem; }
.activity .element:nth-child(1) { --skill-image: url("outdoor-sailing.svg"); }
.activity .element:nth-child(2) { --skill-image: url("outdoor-nestos.svg"); }
.activity .element:nth-child(3) { --skill-image: url("outdoor-kalymnos.svg"); }
.activity .element:nth-child(4) { --skill-image: url("outdoor-bridges.svg"); }
.activity .element h3 { margin-bottom: .6rem; }
.activity.elements.is-expanded .element.is-open { border-radius: 3rem; }
.elements:not(.is-expanded) .element:has(.skill-toggle:focus-visible)::after { opacity: 1; transform: scale(1); }
.elements:not(.is-expanded) .element:has(.skill-toggle:focus-visible) .skill-details { max-height: 12rem; opacity: 1; margin-top: .8rem; }
@media (hover: hover) and (pointer: fine) {
  .elements:not(.is-expanded) .element:hover::after { opacity: 1; transform: scale(1); }
  .elements:not(.is-expanded) .element:hover { box-shadow: 0 12px 32px rgb(36 54 44 / 18%); }
  .elements:not(.is-expanded) .element:hover .skill-details { max-height: 12rem; opacity: 1; margin-top: .8rem; }
}
@media (max-width: 900px) {
  .element { border-radius: .6rem; }
  .element:nth-child(3), .element:nth-child(4) { border-radius: .6rem; }
  .element:nth-child(2) { border-top-right-radius: 3rem; }
  .element:nth-child(5) { border-bottom-left-radius: 3rem; }
}
@media (max-width: 600px) {
  .activity.elements { grid-template-columns: 1fr; }
  .element, .element:nth-child(n) { border-radius: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .element, .element::after, .element .skill-details { transition: none; }
}

.elements.is-expanded .element:not(.is-open) { visibility: hidden; pointer-events: none; }
.elements.is-expanded .element.is-open { position: absolute; inset: 0; z-index: 2; min-height: 0; padding: clamp(1.5rem, 5vw, 4rem); border-radius: 3rem; }
.element.is-open h3 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.element.is-open p { max-width: 48ch; font-size: clamp(.95rem, 1.4vw, 1.15rem); }
.element.is-open .skill-details p { font-size: clamp(.9rem, 1.2vw, 1rem); }
.element.is-open::after { background-image: linear-gradient(180deg, rgb(20 32 26 / 5%), rgb(20 32 26 / 94%)), var(--skill-image); }
@media (max-width: 600px) {
  .elements.is-expanded .element.is-open { border-radius: 1.5rem; justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; }
  .element.is-open > * { flex-shrink: 0; }
  .element.is-open .skill-details { max-height: none; }
}
.schedule-dialog [hidden] { display: none !important; }
.schedule-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 2.75rem; gap: .65rem; margin: 1.25rem 0 .75rem; align-items: end; }
.schedule-filters label { display: grid; min-width: 0; gap: .35rem; font-size: .8rem; color: #27352d; }
.schedule-filters select, .schedule-filters button { height: 2.75rem; border: 1px solid #aebbad; border-radius: .7rem; background: #fffdf7; color: #27352d; font: inherit; }
.schedule-filters select { width: 100%; min-width: 0; padding: .5rem .4rem; }
.schedule-filters select:focus-visible { outline: 2px solid #52695d; outline-offset: 3px; }
.schedule-filters button { width: 2.75rem; padding: 0; font-size: 1.1rem; cursor: pointer; }
.schedule-filters button:hover { background: #e8eddf; border-color: #52695d; }
@media (max-width: 800px) {
  .schedule-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-filters label { font-size: 1rem; }
  .schedule-filters select, .schedule-filters option { font-size: 1rem; }
}
@media (max-width: 420px) { .schedule-filters { grid-template-columns: 1fr; } }
.schedule-class:has(.calendar-class-toggle) { display: block; }
.calendar-class-toggle { display: flex; align-items: center; gap: .6rem; width: 100%; border: 0; border-radius: .5rem; padding: .4rem; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.calendar-class-toggle:hover { background: #e4e9dc; }
.calendar-class-toggle:focus-visible { outline: 2px solid #38533c; outline-offset: 2px; }
.calendar-class-toggle::after { content: '＋'; margin-left: auto; }
.calendar-class-options { margin-top: .5rem; max-width: 24rem; padding: .75rem; border: 1px solid #d8ddcf; border-radius: .7rem; background: #fff; white-space: normal; }
.calendar-class-options[hidden] { display: none; }
.calendar-class-options label, .calendar-class-options small { display: block; margin-bottom: .6rem; }
.calendar-class-options input[type="date"] { display: block; max-width: 100%; margin-top: .3rem; padding: .4rem; font: inherit; }
.calendar-class-options select { display: block; width: 100%; min-width: 0; margin-top: .3rem; padding: .4rem; font: inherit; }
.calendar-class-options a { display: inline-block; margin-bottom: .6rem; color: #38533c; text-decoration: underline; }
.calendar-class-options a[aria-disabled="true"] { opacity: .5; }
.calendar-class-toggle { padding: .65rem; border-radius: .8rem; transition: background .15s ease; }
.calendar-class-toggle[aria-expanded="true"] { background: #e4e9dc; }
.calendar-class-toggle[aria-expanded="true"]::after { content: '−'; }
.calendar-class-options { padding: 1rem; border-radius: 1rem; background: #fffdf7; box-shadow: 0 6px 18px rgb(39 53 45 / 8%); }
.calendar-next { display: grid; gap: .6rem; }
.calendar-next > small { margin: 0; color: #52695d; font-size: .65rem; font-weight: 700; letter-spacing: .12em; }
.calendar-next-date { color: #27352d; font-size: .95rem; line-height: 1.6; }
.calendar-class-options .calendar-next-link, .calendar-class-options .calendar-custom-link { display: block; padding: .8rem; margin: 0; border-radius: .7rem; background: #38533c; color: #fffdf7; font-size: .85rem; font-weight: 600; text-align: center; text-decoration: none; line-height: 1.5; }
.calendar-class-options a:hover { filter: brightness(1.12); }
.calendar-class-options a:focus-visible, .calendar-custom summary:focus-visible { outline: 2px solid #52695d; outline-offset: 3px; }
.calendar-custom { border-top: 1px solid #d8ddcf; margin-top: .9rem; padding-top: .8rem; }
.calendar-custom summary { color: #38533c; cursor: pointer; font-size: .85rem; padding: .25rem 0; }
.calendar-custom[open] summary { margin-bottom: .8rem; }
.calendar-custom select, .calendar-custom input[type="date"] { box-sizing: border-box; width: 100%; border: 1px solid #aebbad; border-radius: .6rem; background: #fff; color: #27352d; padding: .6rem; }
.calendar-class-options .calendar-save-note { margin: .8rem 0 0; color: #687067; font-size: .72rem; line-height: 1.6; }