@import url('../css/basis.css') layer(base);@layer base, layout, components, utilities, overrides;@layer base {:root {--training-day-spacing: 1.5rem;--training-session-gap: 1rem;--training-time-bg: rgba(255, 255, 255, 0.8);--color-kid-group: rgba(0, 123, 255, 0.1);--color-teen-group: rgba(92, 184, 92, 0.1);--color-adult-group: rgba(205, 0, 11, 0.1);--section-spacing: clamp(1.5rem, 4vw, 3rem);--card-spacing: var(--spacing-lg);--training-hover-lift: translateY(-3px);--faq-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);--training-focus-ring: color-mix(in srgb, var(--color-primary) 20%, transparent);--training-card-hover: color-mix(in srgb, var(--color-blue) 80%, white);@supports not (color: color-mix(in srgb, red, blue)) {--training-focus-ring: rgba(205, 0, 11, 0.2);--training-card-hover: rgba(0, 123, 255, 0.05);}}}@layer layout {.training-page-container {display: flow-root;container-type: inline-size;}.training-page-container > * + * {margin-block-start: var(--section-spacing);}@supports selector(:has(*)) {.training-page-container:has(> .training-location) > *:not(.training-location) + .training-location {margin-block-start: var(--section-spacing);}.training-page-container:has(> .faq-section) > *:not(.faq-section) + .faq-section {margin-block-start: var(--section-spacing);}}@container (max-width: 48rem) {:root {--section-spacing: clamp(1rem, 3vw, 2rem);}}@container (min-width: 64rem) {:root {--section-spacing: clamp(2rem, 5vw, 4rem);}}}@layer components {.container {max-width: var(--container-width);margin: 0 auto;padding: 0 var(--spacing-md);}.cta-container {display: flex;justify-content: center;margin-top: var(--spacing-lg);gap: var(--spacing-md);flex-wrap: wrap;@container (max-width: 30rem) {flex-direction: column;align-items: center;}}}.tagline {font-size: var(--font-size-lg);font-style: italic;color: var(--color-text);text-align: center;margin-top: -0.5rem;margin-bottom: 1.5rem;font-weight: normal;letter-spacing: 1px;}.question {color: var(--color-text);}@layer components {.training-location {margin-bottom: 0;contain: layout style;& .card-body {display: flex;flex-direction: column;gap: var(--spacing-lg);}}@container (min-width: 48rem) {.training-location .card-body {flex-direction: row;}.training-schedule {flex: 2;}.location-image {flex: 1;align-self: center;}}@supports not (container-type: inline-size) {@media (min-width: 768px) {.training-location .card-body {flex-direction: row;}.training-schedule {flex: 2;}.location-image {flex: 1;align-self: center;}}}.training-schedule {display: flex;flex-direction: column;gap: var(--training-day-spacing);}.training-day {margin-bottom: var(--spacing-md);& h3 {color: var(--color-primary);margin-bottom: var(--spacing-sm);display: flex;align-items: center;font-size: var(--font-size-lg);& i {margin-right: 0.5rem;color: var(--color-primary);width: 20px;text-align: center;}}}.training-sessions {display: flex;flex-direction: column;gap: var(--training-session-gap);}.training-session {padding: var(--spacing-md);display: flex;flex-direction: column;transition: var(--transition-standard);border-left: 4px solid var(--color-primary);background-color: var(--color-white);border-radius: var(--border-radius);box-shadow: var(--shadow-sm);contain: layout style;will-change: transform, box-shadow;&:hover {transform: translateY(-5px);box-shadow: var(--shadow-md);}&:focus-visible {outline: 2px solid var(--color-primary);outline-offset: 2px;box-shadow: 0 0 0 3px var(--training-focus-ring);}}.training-session:nth-child(1) {border-left-color: var(--color-blue);}.training-session:nth-child(2) {border-left-color: var(--color-green);}.training-session:nth-child(3) {border-left-color: var(--color-primary);}.time {font-weight: 600;font-size: var(--font-size-md);margin-bottom: var(--spacing-xs);color: var(--color-primary);line-height: var(--line-height-normal);}.group {font-size: var(--font-size-base);color: var(--color-text);line-height: var(--line-height-relaxed);}.note {font-style: italic;font-size: var(--font-size-sm);color: var(--color-text-light);margin-top: var(--spacing-xs);}.location-image {overflow: hidden;border-radius: var(--border-radius);box-shadow: var(--shadow-md);max-width: 100%;contain: layout;& img {width: 100%;height: auto;display: block;transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);cursor: pointer;will-change: transform;}&:hover img {transform: scale(1.05);}&:focus-visible {outline: 2px solid var(--color-primary);outline-offset: 2px;}}}@layer components {.faq-grid {display: flex;flex-direction: column;gap: var(--spacing-md);margin-bottom: 0;container-type: inline-size;}.faq-item {border-radius: var(--border-radius);overflow: hidden;background-color: var(--color-white);box-shadow: var(--shadow-sm);contain: layout style;transition: var(--transition-standard);&:hover {box-shadow: var(--shadow-md);transform: translateY(-1px);}}.question {padding: var(--spacing-md);font-weight: 600;cursor: pointer;display: flex;align-items: center;transition: var(--faq-transition);background: none;border: none;width: 100%;text-align: left;font-size: var(--font-size-base);line-height: var(--line-height-normal);min-height: var(--min-touch-target);&:hover {color: var(--color-primary-dark);background-color: var(--color-white);}&.active {color: var(--color-white) !important;background-color: var(--color-primary);}&:focus-visible {outline: 2px solid var(--color-primary);outline-offset: -2px;background-color: rgba(205, 0, 11, 0.1);}& i {margin-right: 0.5rem;transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);color: var(--color-primary);width: 16px;text-align: center;}&.active i {color: var(--color-white);transform: rotate(90deg);}}.answer {padding: 0 var(--spacing-md);max-height: 0;overflow: hidden;transition: var(--faq-transition);background-color: var(--color-white);& p {margin: 0;padding: var(--spacing-md) 0;line-height: var(--line-height-relaxed);color: var(--color-text);}}.question.active + .answer {padding: 0 var(--spacing-md);max-height: 300px;}}@layer components {.training-overview-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: var(--spacing-lg);container-type: inline-size;@container (min-width: 48rem) {grid-template-columns: repeat(3, 1fr);}@container (max-width: 32rem) {grid-template-columns: 1fr;}@supports not (container-type: inline-size) {@media (min-width: 768px) {grid-template-columns: repeat(3, 1fr);}@media (max-width: 480px) {grid-template-columns: 1fr;}}}.training-day-card {transition: var(--transition-standard);contain: layout style;&:hover {transform: translateY(-3px);box-shadow: var(--shadow-md);}& .card-header h3 {display: flex;align-items: center;gap: var(--spacing-sm);color: var(--color-white);& i {color: var(--color-white);width: 20px;margin-right: 0.5rem;}}}}@layer overrides {@media (max-width: 768px) {:root {--training-day-spacing: 1rem;--training-session-gap: 0.75rem;}.training-location .card-body {flex-direction: column;gap: var(--spacing-md);}.training-session {padding: var(--spacing-sm);}.time {font-size: var(--font-size-base);}.cta-container {flex-direction: column;align-items: center;gap: var(--spacing-sm);}.question {padding: var(--spacing-sm);font-size: var(--font-size-sm);}.answer {padding: 0 var(--spacing-sm);}.question.active + .answer {padding: 0 var(--spacing-sm);}.training-overview-grid {grid-template-columns: 1fr;gap: var(--spacing-md);}}@media (max-width: 480px) {.container {padding: 0 var(--spacing-sm);}.training-session {padding: var(--spacing-xs) var(--spacing-sm);}.time {font-size: var(--font-size-sm);}.group, .note {font-size: var(--font-size-xs);}.question {padding: var(--spacing-xs) var(--spacing-sm);font-size: var(--font-size-xs);}}@media (max-width: 1024px) and (min-width: 768px) {.training-overview-grid {grid-template-columns: repeat(2, 1fr);}.cta-container {justify-content: space-around;}}}@layer utilities {.question:focus-visible, .training-session:focus-visible {outline: 3px solid var(--color-primary);outline-offset: 2px;}.location-image img:focus-visible {outline: 2px solid var(--color-primary);outline-offset: 2px;}@media (prefers-reduced-motion: reduce) {*, *::before, *::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;}.training-session:hover, .faq-item:hover, .location-image:hover img {transform: none;}.question i {transition: none;}}.sr-only {position: absolute !important;width: 1px !important;height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;clip: rect(0, 0, 0, 0) !important;white-space: nowrap !important;border: 0 !important;}@media (hover: none) and (pointer: coarse) {.question {min-height: var(--preferred-touch-target);padding: var(--spacing-md);}.training-session {min-height: var(--min-touch-target);}.question:active {transform: scale(0.98);transition-duration: 0.1s;}.training-session:active {transform: scale(0.99);transition-duration: 0.1s;}}}@layer utilities {@media print {.training-location {break-inside: avoid;page-break-inside: avoid;}.faq-item {break-inside: avoid;page-break-inside: avoid;}.question.active + .answer {max-height: none;padding: var(--spacing-sm);}.location-image {display: none;}.cta-container {display: none;}}}@layer utilities {.training-location, .faq-item, .training-day-card {contain: layout style;}.training-session, .question {contain: layout;}.training-session, .question, .location-image img {will-change: transform;}.training-session:not(:hover), .question:not(:hover):not(:focus), .location-image:not(:hover) img {will-change: auto;}}@layer overrides {@supports not (container-type: inline-size) {.training-overview-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: var(--spacing-lg);}@media (min-width: 768px) {.training-overview-grid {grid-template-columns: repeat(3, 1fr);}}@media (max-width: 480px) {.training-overview-grid {grid-template-columns: 1fr;}}}@supports not selector(:has(*)) {.training-page-container > * {margin-bottom: var(--section-spacing);}.training-page-container > *:last-child {margin-bottom: 0;}}@supports not selector(:focus-visible) {.question:focus, .training-session:focus, .location-image:focus {outline: 2px solid var(--color-primary);outline-offset: 2px;}}@supports not (color: color-mix(in srgb, red, blue)) {.training-session:hover {background-color: rgba(0, 123, 255, 0.05);}.question:focus {background-color: rgba(205, 0, 11, 0.1);}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {.training-overview-grid {display: flex;flex-wrap: wrap;}.training-day-card {flex: 1 1 300px;}.faq-grid {display: block;}.faq-item {margin-bottom: var(--spacing-md);}}}