/* ==========================================================================
   Edukall Site — product: the product pages: course, programme, event and contest pages, and the free lesson preview.
   --------------------------------------------------------------------------
   Loaded after edukall-site.css only by the pages SiteStylesheets lists for
   this family, and before the skin's own layer. A rule lives here only when
   every page that can show what it styles is in this family: a component
   another family uses too belongs in edukall-site.css.
   ========================================================================== */

/* ── Base ─────────────────────────────────────────────────────────────────── */
/* Dark bands: the ring in the amber, which reads on them. */
.s-phero { --s-focus: var(--s-focus-on-deep); }

/* ── Product pages (course, programme) ────────────────────────────────────── */

.s-product { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "hero aside" "body aside"; column-gap: 56px; padding-top: 32px; padding-bottom: 72px; }
.s-product__hero { grid-area: hero; display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px; }
.s-product__aside { grid-area: aside; }
.s-product__body { grid-area: body; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.s-product__title { font-size: calc(clamp(34px, 4.4vw, 60px) * var(--s-h1-scale)); line-height: 1.02; }
.s-product__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.s-product__fact { padding: 6px 12px; border-radius: 999px; background: var(--s-band); font-size: 14px; }
.s-site .s-product__rating { display: inline-flex; align-items: center; gap: 6px; color: var(--s-ink); text-decoration: none; margin-right: 6px; }
.s-product__by { margin: 0; }
@media (max-width: 991.98px) {
    .s-product { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "aside" "body"; padding-top: 16px; padding-bottom: 32px; }
    .s-product__hero { padding-bottom: 24px; }
    .s-product__aside { margin-bottom: 20px; }
}

.s-stars { display: inline-flex; gap: 2px; color: var(--s-highlight); font-size: 14px; }

/* The purchase card */
/* Sticky by a top edukall-site-sticky.js moves, so a card taller than the window still shows its buttons. */
.s-buy { position: sticky; top: var(--s-sticky-top, 96px); overflow: hidden; border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); background: var(--s-surface); box-shadow: var(--s-shadow); }
.s-buy__media { position: relative; aspect-ratio: 16 / 10; background: var(--s-tint-3); }
.s-buy__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-buy__play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border: 0; border-radius: 999px; background: var(--s-surface); color: var(--s-ink); font-size: 34px; display: flex; align-items: center; justify-content: center; box-shadow: var(--s-shadow-lg); cursor: pointer; }
.s-buy__body { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.s-buy__price { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.s-buy__price .s-display { font-size: 28px; line-height: 1; }
/* A price is one piece: "$4,200" and "MXN" never on two lines, in the box or the phone's bar. */
.s-buy__price .s-display, .s-buybar__price .s-display { white-space: nowrap; }
.s-buy__secure { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--s-muted); }
.s-buy__includes { list-style: none; margin: 8px 0 0; padding: 16px 0 0; border-top: 1px solid var(--s-line); display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.s-buy__includes li { display: flex; align-items: center; gap: 10px; }
.s-buy__includes .bi { color: var(--s-accent); font-size: 18px; }
.s-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; background: transparent; color: var(--s-muted); font: inherit; font-weight: 600; cursor: pointer; }
.s-save[aria-pressed="true"] { color: var(--s-accent); }
@media (max-width: 991.98px) { .s-buy { position: static; } }

.s-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 28px; }
.s-ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .s-ticks--2 { grid-template-columns: minmax(0, 1fr); } }
.s-ticks li { display: flex; gap: 10px; align-items: flex-start; }
.s-ticks .bi { color: var(--s-accent); flex-shrink: 0; margin-top: 2px; }

.s-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.s-chips li { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--s-line); background: var(--s-bg); font-size: 14px; }
.s-lessons { list-style: none; margin: 0; padding: 0 18px 10px; }
.s-lessons li { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--s-line); font-size: 15px; }
.s-lessons .bi { color: var(--s-accent); }
.s-lessons__title { flex-grow: 1; min-width: 0; }

/* People */
.s-person__name { margin: 0; font-family: var(--s-font-display); font-weight: 700; font-size: 20px; }

/* Ratings and reviews */
.s-rating { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 16px; }
.s-rating__score { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.s-rating__score .s-display { font-size: 48px; line-height: 1; }
.s-rating__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.s-rating__bars li { display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; align-items: center; gap: 10px; }
.s-rating__bars .bi { color: var(--s-highlight); font-size: 12px; }
.s-rating__bars progress { width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--s-band); appearance: none; }
.s-rating__bars progress::-webkit-progress-bar { background: var(--s-band); }
.s-rating__bars progress::-webkit-progress-value { background: var(--s-highlight); border-radius: 999px; }
.s-rating__bars progress::-moz-progress-bar { background: var(--s-highlight); border-radius: 999px; }
@media (max-width: 575.98px) { .s-rating { grid-template-columns: minmax(0, 1fr); } }
.s-review { margin: 0; padding: 18px 0; border-top: 1px solid var(--s-line); }
.s-review__who { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.s-review__who > span:nth-child(2) { flex-grow: 1; }

/* Who offers it (marketplace sites only) */
.s-site .s-offered { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-surface); color: var(--s-ink); text-decoration: none; }
.s-site .s-offered:hover { color: var(--s-ink); border-color: var(--s-accent); }
.s-offered img { width: 40px; height: 40px; border-radius: 999px; object-fit: contain; background: var(--s-surface); }
.s-institution { display: flex; gap: 20px; align-items: flex-start; }
.s-institution img { width: 96px; height: 96px; flex-shrink: 0; border-radius: var(--s-radius-sm); object-fit: contain; border: 1px solid var(--s-line); background: var(--s-surface); }
@media (max-width: 575.98px) { .s-institution { flex-direction: column; } }

/* Programme: where enrolment stands (under the title) */
.s-status { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.2fr) minmax(0, 0.9fr); border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); }
.s-status__cell { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-width: 0; }
.s-status__cell + .s-status__cell { border-left: 1px solid var(--s-line); }
.s-status__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); }
.s-status__value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 600; }
.s-status__value--ok { color: var(--s-accent); }
.s-status__value--hot { color: var(--s-ink); }
/* "Select one": the dates are choices, which a pill alone does not say. */
.s-status__hint { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--s-accent); }
.s-status .s-date { gap: 4px; min-height: 32px; padding: 0 10px; font-size: 13px; }
/* On a phone the two short facts share a row and the dates take the width below them. */
@media (max-width: 767.98px) {
    .s-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s-status__cell--wide { grid-column: 1 / -1; order: 3; border-left: 0 !important; border-top: 1px solid var(--s-line); }
}

/* Programme: price extras, the chosen cohort, costs */
.s-then { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--s-line); }
.s-then ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.s-days { padding: 12px 14px; border-radius: var(--s-radius-sm); background: var(--s-band); font-size: 14px; }
.s-days[hidden] { display: none; }
.s-days ul { margin: 0 0 6px; padding-left: 18px; }
.s-installments { margin: 8px 0 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--s-radius-sm); background: var(--s-accent-soft); color: var(--s-accent-soft-ink); font-size: 14px; }
.s-installments[hidden] { display: none; }
.s-costs { margin: 0; display: flex; flex-direction: column; }
.s-costs > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--s-line); }
.s-costs > div:first-child { border-top: 0; padding-top: 0; }
.s-costs dt { font-weight: 500; }
.s-costs dd { margin: 0; font-weight: 700; text-align: right; }
/* A cost that does not apply is a remark, not a figure. */
.s-costs dd del { font-size: 15px; font-weight: 400; letter-spacing: 0; }
.s-site .s-costs .s-costs__none { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--s-muted); }
.s-showcase { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.s-showcase img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--s-radius-sm); display: block; }
.s-lessons--courses li { padding: 10px 0; align-items: flex-start; }

/* A person to ask, beside the purchase */
.s-advice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px dashed var(--s-line); border-radius: var(--s-radius-sm); background: transparent; color: var(--s-ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.s-advice:hover { border-color: var(--s-accent); background: var(--s-bg); }
.s-advice .bi { font-size: 22px; color: var(--s-accent); }

/* Photo viewer (student gallery) */
.s-showcase a { display: block; border-radius: var(--s-radius-sm); overflow: hidden; cursor: zoom-in; }
.s-showcase img { transition: transform .2s ease; }
.s-showcase a:hover img { transform: scale(1.03); }
.s-lightbox .modal-content { position: relative; background: var(--s-viewer-bg); border: 0; border-radius: var(--s-radius); overflow: hidden; }
.s-lightbox__figure { margin: 0; display: flex; flex-direction: column; }
.s-lightbox__figure img { display: block; width: 100%; min-height: 40vh; max-height: 80vh; object-fit: contain; background: var(--s-viewer-bg); }
.s-lightbox__figure figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; color: var(--s-viewer-ink); font-size: 14px; }
.s-lightbox__count { color: var(--s-viewer-muted); white-space: nowrap; }
.s-lightbox__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 999px; background-color: var(--s-viewer-control); opacity: 1; }
.s-lightbox__nav { position: absolute; top: 40%; z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 999px; background: var(--s-viewer-control); color: var(--s-viewer-ink); font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.s-lightbox__nav[hidden] { display: none; }
.s-lightbox__nav:hover { background: var(--s-viewer-control-hover); }
.s-lightbox__nav--prev { left: 12px; }
.s-lightbox__nav--next { right: 12px; }

/* Programme: long page helpers */
.s-stack { display: flex; flex-direction: column; gap: 20px; }
.s-subnav { position: sticky; top: 76px; z-index: 5; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 6px; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-surface); box-shadow: var(--s-shadow); }
.s-subnav::-webkit-scrollbar { display: none; }
.s-site .s-subnav a { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; color: var(--s-muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.s-site .s-subnav a:hover { color: var(--s-ink); background: var(--s-band); }
.s-site .s-subnav a.is-active { color: var(--s-on-accent); background: var(--s-accent); }
.s-product__body [id] { scroll-margin-top: 150px; }
.s-collapsible { max-height: 14em; overflow: hidden; position: relative; }
.s-collapsible:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4em; background: linear-gradient(to bottom, transparent, var(--s-surface)); }
.s-collapsible.is-open { max-height: none; }
.s-includes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.s-includes li { display: flex; gap: 12px; align-items: flex-start; }
.s-includes .bi { color: var(--s-accent); font-size: 20px; line-height: 1.2; }
/* The line that explains an item reads at the list's own size, only quieter: set smaller,
   the two items that carry one looked like footnotes beside the rest. */
.s-includes__hint { display: block; color: var(--s-muted); }
@media (max-width: 767.98px) { .s-includes { grid-template-columns: minmax(0, 1fr); } }
.s-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767.98px) { .s-team { grid-template-columns: minmax(0, 1fr); } }
.s-site .s-team__card { display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 16px; border: 1px solid var(--s-line); border-radius: var(--s-radius); color: var(--s-ink); text-decoration: none; box-sizing: border-box; }
.s-site .s-team__card:hover { color: var(--s-ink); background: var(--s-bg); }
.s-team__card img { width: 72px; height: 72px; flex-shrink: 0; border-radius: 999px; object-fit: cover; background: var(--s-tint-3); }
.s-team__card > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.s-team__name { font-family: var(--s-font-display); font-weight: 700; font-size: 17px; }
.s-team__bio { font-size: 14px; color: var(--s-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Phone purchase bar */
.s-buybar { display: none; }
@media (max-width: 991.98px) {
    .s-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--s-buybar-bg); -webkit-backdrop-filter: var(--s-buybar-blur); backdrop-filter: var(--s-buybar-blur); border-top: 1px solid var(--s-line); box-shadow: var(--s-buybar-shadow); }
    .s-buybar .s-btn { flex: 1 1 auto; width: auto; min-height: 50px; padding: 0 18px; white-space: nowrap; }
    .s-buybar__price { flex-shrink: 1; min-width: 0; }
    .s-buybar__price { display: flex; flex-direction: column; line-height: 1.1; }
    .s-buybar__price .s-display { font-size: 20px; }
}

/* The showcase layout (site_product_layout() 'showcase'): the page opens on its photo, with the
   enrolment status along the photo's foot and the buy box rising into it from the column beside;
   the body reads as open sections — a tinted "what you will learn", tiles, a timeline, a mosaic. */
.s-phero { position: relative; overflow: hidden; background: var(--s-deep-3); color: var(--s-on-deep); }
.s-phero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
/* The words sit on the left 55%: the veil stays nearly opaque across all of it, whatever the
   photo is like there, and lets the photo show only on the right, where nothing is written.
   The status box at the foot gets a dark ground of its own. The photo holds still: a drift
   behind text is what the eye reads, not the text. */
.s-phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--s-veil), .95) 0%, rgba(var(--s-veil), .92) 55%, rgba(var(--s-veil), .45) 72%, rgba(var(--s-veil), .12) 90%), linear-gradient(0deg, rgba(var(--s-veil), .95) 0%, rgba(var(--s-veil), 0) 45%); }
.s-phero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 56px; min-height: 520px; padding-top: 56px; box-sizing: border-box; }
.s-phero__copy { grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 760px; padding-bottom: 40px; }
.s-phero__status { grid-column: 1; align-self: end; }
.s-site .s-phero .s-crumbs a { color: var(--s-on-deep-muted); }
.s-site .s-phero .s-crumbs a:hover { color: var(--s-on-deep); }
.s-phero .s-crumbs a + a::before { color: var(--s-on-deep-muted); }
.s-site .s-phero h1 { color: var(--s-on-deep); font-size: calc(clamp(40px, 5.6vw, 80px) * var(--s-h1-scale)); line-height: .95; letter-spacing: -0.05em; font-weight: 800; }
.s-phero .s-lead { color: var(--s-on-deep-muted); max-width: 620px; }
.s-phero__tag { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--s-highlight) 16%, transparent); color: var(--s-highlight-soft); font-size: 13px; font-weight: 700; border: 1px solid color-mix(in srgb, var(--s-highlight) 45%, transparent); }
.s-phero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; color: var(--s-on-deep-muted); font-size: 15px; }
.s-phero__play { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: var(--s-on-deep); font: inherit; font-weight: 600; cursor: pointer; }
.s-phero__play-icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 999px; background: var(--s-surface); color: var(--s-deep); font-size: 24px; transition: transform .15s ease; position: relative; }
.s-phero__play:hover .s-phero__play-icon { transform: scale(1.06); }
.s-site .s-phero .s-offered { background: transparent; border-color: var(--s-deep-line); color: var(--s-on-deep); }
.s-phero .s-status { border: 1px solid var(--s-glass-line); border-radius: 22px 22px 0 0; background: var(--s-glass); color: var(--s-on-deep); border-bottom: 0; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.s-phero .s-status__cell + .s-status__cell { border-left-color: var(--s-deep-line); }
.s-phero .s-status__label, .s-phero .s-status .s-muted { color: var(--s-on-deep-muted); }
.s-phero .s-status__value, .s-phero .s-status__value--hot { color: var(--s-on-deep); }
.s-phero .s-status__value--ok { color: var(--s-highlight); }
.s-site .s-phero .s-status a { color: var(--s-on-deep); }
.s-site .s-phero .s-status a:hover { color: var(--s-highlight); }
/* The same pill as on a light page, in the dark band's colours. */
.s-phero .s-date { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: var(--s-on-deep); }
.s-phero .s-status__cell--wide { border-top-color: var(--s-deep-line); }
.s-phero .s-status__hint { color: var(--s-highlight); }
.s-phero button.s-date:hover { border-color: var(--s-highlight); color: var(--s-highlight); }
.s-phero button.s-date[aria-pressed="true"] { background: var(--s-highlight); border-color: var(--s-highlight); color: var(--s-on-highlight); }
.s-phero .s-date--hot { background: var(--s-highlight); color: var(--s-on-highlight); }
/* The same rounding as the buy box and the status box they sit beside. */
.s-site .s-product--showcase .s-panel { border-radius: 20px; }
.s-product--showcase { grid-template-areas: "body aside"; }
.s-product--showcase .s-product__aside { position: relative; z-index: 2; margin-top: -260px; }
/* On the photo an accented word runs warm. */
.s-phero { --s-accent-paint: var(--s-accent-paint-on-deep); }
/* A skin without a paint for dark bands sets the accented words in its marker colour, not in
   the action colour, which barely shows on the dark header. */
.s-site .s-phero .s-accent { color: var(--s-highlight); }
.s-phero__play-icon::after { content: ""; position: absolute; inset: -6px; border-radius: 99px; border: 2px solid rgba(255, 255, 255, .5); animation: s-whatsapp-ring 2.6s ease-out infinite; }
.s-phero .s-status__value--ok::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--s-highlight); animation: s-breathe 2s infinite; }
.s-phero .s-status__value--ok .bi { display: none; }
.s-site .s-product--showcase .s-buy { border: 0; border-radius: 26px; box-shadow: 0 50px 90px -40px color-mix(in srgb, var(--s-deep) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--s-accent) 8%, transparent); }
.s-product--showcase .s-buy::before { content: ""; display: block; height: 5px; background: var(--s-gradient); }
.s-product--showcase .s-buy__body { padding: 30px; gap: 14px; }
/* The price is read, not shouted: the same measure as the classic box. */
.s-product--showcase .s-buy__price .s-display { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.s-product--showcase .s-installments { border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--s-accent) 9%, transparent), color-mix(in srgb, var(--s-highlight) 12%, transparent)); color: var(--s-accent-soft-ink); }
.s-site .s-product--showcase .form-select { height: 52px; border-radius: 14px; }
.s-site .s-product--showcase .s-buy .s-btn--primary { min-height: 62px; border-radius: 16px; font-size: 17px; font-weight: 700; box-shadow: 0 18px 36px -14px color-mix(in srgb, var(--s-accent) 80%, transparent); }
.s-product--showcase .s-advice { border-radius: 14px; }
.s-site .s-product--showcase .s-panel--tint { background: radial-gradient(500px 300px at 100% 0%, color-mix(in srgb, var(--s-highlight) 14%, transparent), transparent 70%), radial-gradient(500px 300px at 0% 100%, color-mix(in srgb, var(--s-accent-2) 10%, transparent), transparent 70%), var(--s-surface); border-color: var(--s-line); }
.s-product--showcase .s-panel--tint .s-ticks .bi { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; background: var(--s-gradient); color: var(--s-on-accent); font-size: 16px; }
/* Imago's curriculum keeps its timeline: the terms as cards on a line, numbered. */
/* Each term is its own card: its border is a shadow, which the list's overflow clipped in places. */
.s-product--showcase #s-curriculum .s-accordion { position: relative; padding-left: 44px; counter-reset: s-term; border: 0; overflow: visible; }
/* The hover tint follows the card's corners instead of squaring them off. */
.s-product--showcase #s-curriculum summary { border-radius: 18px; }
.s-product--showcase #s-curriculum details[open] > summary { border-radius: 18px 18px 0 0; }
.s-product--showcase #s-curriculum .s-accordion::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--s-accent), var(--s-highlight)); }
.s-product--showcase #s-curriculum details { position: relative; margin-bottom: 12px; border: 0; border-radius: 18px; background: var(--s-surface); box-shadow: 0 0 0 1px var(--s-line); counter-increment: s-term; }
.s-product--showcase #s-curriculum details::before { content: counter(s-term); position: absolute; left: -44px; top: 16px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 99px; background: var(--s-surface); box-shadow: 0 0 0 2px var(--s-accent-2); font-size: 13px; font-weight: 700; color: var(--s-accent); }
.s-product--showcase #s-curriculum details[open] { box-shadow: 0 30px 50px -34px color-mix(in srgb, var(--s-accent) 55%, transparent), 0 0 0 1.5px color-mix(in srgb, var(--s-accent) 25%, transparent); }
.s-product--showcase .s-showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 12px; }
.s-product--showcase .s-showcase li:nth-child(6n+1) { grid-column: span 2; }
.s-product--showcase .s-showcase li:nth-child(6n+2) { grid-row: span 2; }
.s-product--showcase .s-showcase li:nth-child(6n) { grid-column: span 2; }
.s-product--showcase .s-showcase a, .s-product--showcase .s-showcase img { display: block; width: 100%; height: 100%; border-radius: 18px; object-fit: cover; }
.s-product--showcase .s-team__card { border: 0; border-radius: 18px; box-shadow: 0 0 0 1px var(--s-line); }
.s-product--showcase .s-panel--scholarship { position: relative; padding: 28px !important; border-radius: 22px !important; }
.s-product--showcase .s-panel--scholarship::before { content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 1.5px; background: var(--s-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
@media (max-width: 991.98px) {
    /* Stacked: the photo shows as a band at the top, and the veil is dark by the time the title starts. */
    .s-phero::after { background: linear-gradient(180deg, rgba(var(--s-veil), .3) 0%, rgba(var(--s-veil), .88) 13%, rgba(var(--s-veil), .96) 55%); }
    .s-phero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 110px; }
    .s-phero__copy { padding-bottom: 24px; }
    .s-phero__status { margin: 0 calc(-1 * var(--s-gutter)); }
    .s-product--showcase { grid-template-areas: "aside" "body"; }
}
/* On a phone a band of picture above the title is enough: 150px of it pushed the title and the
   price below the first screen. */
@media (max-width: 575.98px) {
    .s-phero__inner { padding-top: 56px; }
}
@media (max-width: 991.98px) {
    .s-product--showcase .s-product__aside { margin-top: 20px; }
    .s-product--showcase .s-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; }
    .s-product--showcase .s-showcase li:nth-child(6n+2) { grid-row: auto; }
}

/* ── Events: the agenda (events.php) and the event page (event_page.php) ──── */

.s-status--event { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .s-status--event { grid-template-columns: minmax(0, 1fr); } .s-status--event .s-status__cell + .s-status__cell { border-left: 0; border-top: 1px solid var(--s-line); } }
.s-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--s-accent-soft); display: flex; flex-direction: column; gap: 22px; }
.s-timeline li { position: relative; }
.s-timeline li::before { content: ""; position: absolute; left: -29px; top: 4px; width: 12px; height: 12px; border-radius: 999px; background: var(--s-accent); box-shadow: 0 0 0 4px var(--s-surface); }
.s-timeline p { margin: 0 0 4px; }
.s-timeline__when { font-size: 13px; font-weight: 700; color: var(--s-accent); }
.s-timeline__title { font-weight: 700; }
/* A contest's stages: those behind it and the one it is in marked, those ahead quiet. */
.s-timeline--stages li.is-next::before { background: var(--s-line); }
.s-timeline--stages li.is-next .s-timeline__title { color: var(--s-muted); }
.s-timeline--stages li.is-current::before { box-shadow: 0 0 0 4px var(--s-surface), 0 0 0 7px var(--s-accent-soft); }
.s-status--event .s-status__value { flex-wrap: nowrap; align-items: flex-start; }
.s-status--event .s-status__value .bi { margin-top: 2px; }

/* ── Gallery and contests (gallery, contests_home, contests, contest_page, contest_results) ── */
.s-product--contest { grid-template-areas: "body aside"; padding-top: 40px; }
.s-buy__heading { margin: 0; font-family: var(--s-font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.s-product--contest .s-buy__includes { margin-top: 0; padding-top: 12px; }
.s-product--contest .s-prizes strong { font-size: 19px; letter-spacing: -0.01em; }
/* Who supports the contest, named as such rather than a logo left floating. */
.s-cpsupport { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 4px 4px 8px; }
.s-cpsupport__label { margin: 0; font-size: 14px; color: var(--s-muted); }
.s-cpsupport .s-sponsors img { max-height: 40px; filter: grayscale(1); opacity: .7; transition: filter .2s ease, opacity .2s ease; }
.s-cpsupport .s-sponsors a:hover img, .s-cpsupport .s-sponsors a:focus-visible img { filter: none; opacity: 1; }
/* A contest's stages, in their order: the call, the jury, the results. */
.s-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s-stage; }
.s-stages li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 44px; counter-increment: s-stage; }
.s-stages li::before { content: counter(s-stage); position: absolute; top: 0; left: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 99px; background: var(--s-surface); box-shadow: 0 0 0 1.5px var(--s-line); color: var(--s-muted); font-size: 13px; font-weight: 700; }
.s-stages li::after { content: ""; position: absolute; top: 14px; left: 38px; right: -8px; height: 2px; border-radius: 2px; background: var(--s-line); }
.s-stages li:last-child::after { display: none; }
.s-stages li.is-done::before { background: var(--s-accent); box-shadow: none; color: var(--s-on-accent); }
.s-stages li.is-done::after { background: var(--s-accent); }
.s-stages li.is-current::before { background: var(--s-btn-primary-bg); box-shadow: 0 0 0 5px var(--s-accent-soft); color: var(--s-on-accent); }
.s-stages__title { margin: 0; font-weight: 700; }
.s-stages li.is-next .s-stages__title { color: var(--s-muted); }
.s-stages__when { margin: 0; font-size: 14px; color: var(--s-muted); }
.s-stages .s-link-arrow { margin-top: 6px; font-size: 14px; }
/* The admin's banners, whatever their shapes, as tiles of one size. */
.s-cpads__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.s-cpads__grid > * { display: flex; min-height: 128px; margin: 0 !important; border-radius: 16px; overflow: hidden; background-color: var(--s-band); }
.s-cpads__grid > :not(a) { padding: 0 !important; }
.s-cpads__grid a { display: flex; flex: 1; align-items: center; justify-content: center; padding: 18px; }
.s-cpads__grid img { width: auto !important; height: auto !important; max-width: 100%; max-height: 92px; object-fit: contain; }
@media (max-width: 991.98px) {
    .s-product--contest { grid-template-areas: "aside" "body"; padding-top: 24px; }
}
@media (max-width: 767.98px) {
    .s-stages { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .s-stages li { padding: 3px 0 0 46px; }
    .s-stages li::after { top: 38px; left: 14px; right: auto; bottom: -18px; width: 2px; height: auto; }
}
.s-sponsors { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.s-sponsors img { max-height: 36px; width: auto; opacity: .8; }
.s-prizes span { display: flex; flex-direction: column; }
.s-prizes .bi { color: var(--s-highlight); }

/* ── Upload and My gallery (upload.php, my_gallery.php) ───────────────────── */

/* Contest page: the awards, each image at its own proportions beside what it stands for. */
.s-awards-panel > .s-muted { margin: -10px 0 24px; }
.s-awards-panel__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: center; }
.s-awards-panel__row + .s-awards-panel__row { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--s-line); }
.s-awards-panel__row--solo { grid-template-columns: minmax(0, 1fr); }
.s-awards-panel__img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; border-radius: var(--s-radius); }
.s-site .s-awards-panel__title { font-size: 18px; margin: 0 0 14px; }
.s-awards-panel__list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.s-awards-panel__list li { display: flex; gap: 12px; align-items: flex-start; }
.s-awards-panel__list .bi { color: var(--s-highlight); font-size: 20px; }
.s-awards-panel__list span { display: flex; flex-direction: column; color: var(--s-muted); font-size: 15px; }
.s-awards-panel__list strong { color: var(--s-ink); font-family: var(--s-font-display); font-size: 24px; line-height: 1.2; }
@media (max-width: 767.98px) { .s-awards-panel__row { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* ── Motion: appearing as the page scrolls (edukall-site-motion.js adds .ek-motion) ──
   [data-reveal] always rises; [data-reveal="skin"] only where the skin's own layer says so. */

@media (prefers-reduced-motion: reduce) {
    .s-phero__image, .s-phero__play-icon::after { animation: none !important; }
}

/* A phone pays for every blurred or endlessly moving layer on each frame of a scroll: there the
   photos stand still, the lights keep their soft gradient without a blur filter, and glass is
   a plain tint. What moves on purpose (the student work rows) keeps moving. */
@media (max-width: 767.98px) {
    .s-phero__image { animation: none; }
}