.obs-course-choice { box-sizing: border-box; width: 100%; color: #202738; container-name: obs-course-choice; container-type: inline-size; }
.obs-course-choice *, .obs-course-choice *::before, .obs-course-choice *::after { box-sizing: border-box; }
.obs-course-choice__header { margin-bottom: 0; }
.obs-course-choice__heading, .obs-course-choice > .wp-block-heading:first-child { margin-top: 0; }
.obs-course-choice__subtitle { margin-top: .75rem; font-style: italic; }
.obs-course-choice__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.65rem, 1.2vw, 1rem); align-items: start; }

.obs-course-card { position: relative; display: grid; min-width: 0; min-height: 0; aspect-ratio: 4 / 5; perspective: 1200px; container-type: inline-size; }
.obs-course-card__inner { position: relative; display: grid; width: 100%; height: 100%; min-height: inherit; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; will-change: transform; transition: transform .65s cubic-bezier(.2, .7, .2, 1); }
.obs-course-card__face { position: relative; grid-area: 1 / 1; min-height: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.obs-course-card__front { z-index: 2; display: grid; grid-template-rows: minmax(0, 1fr) auto; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); background: #858574; color: #fff; }
.obs-course-card__visual { position: relative; min-height: 0; overflow: hidden; background: #5e625a; }
.obs-course-card__image { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.obs-course-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #73786d, #454b45); }
.obs-course-card__shade { position: absolute; inset: 0; background: rgb(15 22 29 / 38%); }
.obs-course-card__title { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; margin: 0; padding: clamp(.65rem, 7cqi, 1.4rem); overflow-wrap: normal; color: #fff; font-size: var(--obs-course-front-title-size, clamp(1rem, 10cqi, 2rem)); font-weight: 700; line-height: 1.16; text-align: center; word-break: normal; hyphens: none; -webkit-hyphens: none; }
.obs-course-card__footer { display: grid; min-height: calc(2.5em + 2 * clamp(.6rem, 5cqi, .9rem)); place-items: center; padding: clamp(.6rem, 5cqi, .9rem); overflow-wrap: normal; background: #858574; color: #fff; font-size: var(--obs-course-footer-size, clamp(.78rem, 7.5cqi, 1.3rem)); font-weight: 700; line-height: 1.25; text-align: center; word-break: normal; hyphens: none; -webkit-hyphens: none; }
.obs-course-card__toggle { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; }
.obs-course-card__toggle:focus-visible { outline: 4px solid #9bcf4a; outline-offset: 4px; }

.obs-course-card__back { z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(.45rem, 4cqi, .9rem); padding: clamp(.7rem, 6cqi, 1.4rem); transform: rotateY(180deg); -webkit-transform: rotateY(180deg); background: #e7e6e2; color: #202738; pointer-events: none; }
.obs-course-card__description { flex: 1 1 auto; margin: clamp(1.2rem, 9cqi, 1.9rem) 0 0; overflow: visible; overflow-wrap: normal; font-size: var(--obs-course-back-text-size, clamp(.68rem, 6cqi, 1rem)); line-height: 1.25; word-break: normal; hyphens: none; -webkit-hyphens: none; }
.obs-course-card__description > :first-child { margin-top: 0; }
.obs-course-card__description > :last-child { margin-bottom: 0; }
.obs-course-card__button { display: block; width: 100%; margin-top: auto; padding: clamp(.55rem, 5cqi, .8rem); border-radius: .25rem; background: #83bb26; color: #fff; font-size: var(--obs-course-button-size, clamp(.68rem, 6cqi, .95rem)); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.obs-course-card__button:hover, .obs-course-card__button:focus-visible { background: #6fa31e; color: #fff; }
.obs-course-card__button.is-disabled { color: #fff; }
.obs-course-card__close { position: absolute; top: .4rem; right: .5rem; display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #202738; font: inherit; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.obs-course-card__close:hover, .obs-course-card__close:focus-visible { background: rgb(32 39 56 / 10%); }

.obs-course-card.is-flipped .obs-course-card__inner,
.obs-course-card:has(.obs-course-card__back:focus-within) .obs-course-card__inner { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.obs-course-card.is-flipped .obs-course-card__front,
.obs-course-card:has(.obs-course-card__back:focus-within) .obs-course-card__front { z-index: 1; pointer-events: none; }
.obs-course-card.is-flipped .obs-course-card__back,
.obs-course-card:has(.obs-course-card__back:focus-within) .obs-course-card__back { z-index: 2; pointer-events: auto; }

@media (hover: hover) and (pointer: fine) {
    .obs-course-card:hover .obs-course-card__inner { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
    .obs-course-card:hover .obs-course-card__front { z-index: 1; pointer-events: none; }
    .obs-course-card:hover .obs-course-card__back { z-index: 2; pointer-events: auto; }
}

@media (max-width: 800px) {
    .obs-course-choice { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
}

@media (max-width: 600px) {
    .obs-course-card { width: min(100%, 27rem); margin-inline: auto; }
}

@container obs-course-choice (max-width: 760px) {
    .obs-course-choice__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container obs-course-choice (max-width: 480px) {
    .obs-course-choice__grid { grid-template-columns: minmax(0, 1fr); }
    .obs-course-card { width: min(100%, 27rem); margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .obs-course-card__inner { transition: none; }
}