.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; }
}