/* =============================================================================
   FES Experience Chooser — accessible diagonal selection module (WCAG 2.1 AA)
   Bind accent/font to FES tokens (--exp-accent, --fes-font).
   ============================================================================= */
.fes-expchooser { --exp-accent: #025093; --exp-ink: #0d1b2a; --exp-slant: 80px; width: 100%; }
.fes-expchooser__header { font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; font-size: 24px; line-height: 36px; letter-spacing: 0; color: #025093; text-align: center; margin: 0 0 1.5rem; }

.fes-expchooser__stage {
    position: relative; width: 100%;
    height: clamp(360px, 52vh, 560px);
    overflow: hidden; border-radius: 16px; background: #fff;
}
.fes-expchooser__row { position: absolute; inset: 0; display: flex; gap: 0; background: #fff; }

.fes-expchooser__panel {
    position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
    cursor: default; background: var(--exp-ink);
    transition: flex-grow .7s cubic-bezier(.22, 1, .36, 1);
    animation: fesExpIn 1.1s cubic-bezier(.22, 1, .36, 1) both;
}
/* Diagonals for a variable number of panels (2–4):
   first = no left slant, last = no right slant, middle = both sides */
.fes-expchooser__panel {
    clip-path: polygon(var(--exp-slant) 0, 100% 0, calc(100% - var(--exp-slant)) 100%, 0 100%);
    margin-left: calc(-1 * var(--exp-slant) + 3px);
}
.fes-expchooser__panel:first-child {
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--exp-slant)) 100%, 0 100%);
    margin-left: 0;
}
.fes-expchooser__panel:last-child {
    clip-path: polygon(var(--exp-slant) 0, 100% 0, 100% 100%, 0 100%);
}
.fes-expchooser__panel:hover,
.fes-expchooser__panel:focus-visible { flex-grow: 1.9; }
/* Visible focus ring (2.4.7/2.4.11) – high contrast on any image */
.fes-expchooser__panel:focus-visible {
    outline: 3px solid #fff; outline-offset: -3px;
    box-shadow: inset 0 0 0 6px var(--exp-accent);
}
.fes-expchooser__panel img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; animation: fesExpKenburns 18s ease-in-out infinite alternate;
}
/* Reading band ONLY behind the label (no image overlay) -> 1.4.3 contrast */
.fes-expchooser__panel::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
    background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
    z-index: 6; pointer-events: none;
}
.fes-expchooser__label {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 32px; z-index: 8;
    color: #fff; font-family: var(--fes-font, system-ui), sans-serif;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .6), 0 0 3px rgba(0, 0, 0, .55);
    animation: fesExpBob 7s ease-in-out infinite; pointer-events: none;
}
.fes-expchooser__label-name { display: block; font-weight: 700; font-size: 18px; letter-spacing: .14em; line-height: 1.15; text-transform: uppercase; }
.fes-expchooser__label-sub { display: block; margin-top: 7px; font-weight: 600; font-size: 13px; letter-spacing: .06em; opacity: .95; }

.fes-expchooser__descbar { position: relative; margin-top: 1.75rem; }
.fes-expchooser__desc { max-width: 760px; margin: 0 auto; padding: 14px 24px 0; text-align: center; animation: fesExpDescIn .45s ease both; }
.fes-expchooser__desc[hidden] { display: none; }
.fes-expchooser__desc:focus-visible { outline: 3px solid var(--exp-accent); outline-offset: 4px; border-radius: 8px; }
.fes-expchooser__kicker { display: inline-block; font-weight: 700; font-size: 1.4rem; letter-spacing: .02em; color: var(--exp-accent); margin-bottom: .6rem; }
.fes-expchooser__text { font-size: 1.05rem; line-height: 1.65; color: #445; }
.fes-expchooser__cta { display: inline-block; margin-top: 1.25rem; padding: 14px 30px; border-radius: 50px; background: var(--exp-accent); color: #fff !important; font-weight: 700; text-decoration: none; }
.fes-expchooser__cta:hover { filter: brightness(.92); }

@keyframes fesExpKenburns { 0% { transform: scale(1.05); } 100% { transform: scale(1.18) translate(-2%, -1.5%); } }
@keyframes fesExpIn { 0% { opacity: 0; transform: translateY(40px); filter: saturate(.4) brightness(.7); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes fesExpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fesExpDescIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }

/* Animations can be disabled by editors */
.fes-expchooser--noanim .fes-expchooser__panel,
.fes-expchooser--noanim .fes-expchooser__panel img,
.fes-expchooser--noanim .fes-expchooser__label,
.fes-expchooser--noanim .fes-expchooser__desc { animation: none; }

/* Mobile: stacked cards */
.fes-expchooser--mobile { display: none; }
@media (max-width: 767px) {
    .fes-expchooser--desktop { display: none !important; }
    .fes-expchooser--mobile { display: block !important; }
}
.fes-expchooser__cards { display: grid; gap: 1.25rem; }
.fes-expchooser__card { background: #fff; border: 1px solid #e6e9ee; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .05); }
.fes-expchooser__card-media { position: relative; aspect-ratio: 16 / 10; }
.fes-expchooser__card-media img { width: 100%; height: 100%; object-fit: cover; }
.fes-expchooser__card-label { position: absolute; left: 0; bottom: 0; padding: 14px 18px; color: #fff; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.fes-expchooser__card-body { padding: 1.25rem 1.4rem 1.5rem; }
.fes-expchooser__card-body h3 { color: var(--exp-accent); font-size: 1.15rem; margin-bottom: .4rem; }
.fes-expchooser__card-sub { font-weight: 600; color: #667; margin: 0 0 .5rem; }
.fes-expchooser__card-body p { color: #445; margin: 0; }

/* Reduced motion (mandatory) */
@media (prefers-reduced-motion: reduce) {
    .fes-expchooser__panel, .fes-expchooser__panel img, .fes-expchooser__label, .fes-expchooser__desc { animation: none; }
    .fes-expchooser__panel { transition: none; }
}