/* ==========================================================================
   Edukall Site — gallery: the photography pages: contests, results, gallery, photo, feed, member profiles, upload, My gallery and the jury.
   --------------------------------------------------------------------------
   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.
   ========================================================================== */

/* ── Product pages (course, programme) ────────────────────────────────────── */
@media (max-width: 767.98px) {
    .s-upload__bulk .form-select { flex-basis: 100%; }
}
@media (max-width: 575.98px) {
    .s-upbar { padding: 12px 14px; bottom: calc(10px + env(safe-area-inset-bottom)); }
    .s-upbar__actions { width: 100%; flex-wrap: nowrap; }
    .s-upbar__actions .s-btn--primary { flex: 1; }
    .s-upbar__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── Profiles and the gift claim (user_profile, partner_profile, gift_redeem) ── */
.s-awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.s-awards li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; border-radius: var(--s-radius); background: var(--s-ink); color: var(--s-bg); text-align: center; font-size: 14px; }
.s-awards img { width: 72px; height: 72px; }

/* ── Gallery and contests (gallery, contests_home, contests, contest_page, contest_results) ── */
.s-jg { min-height: 200px; }
.s-jg__item img { border-radius: 6px; }
.s-jg .jg-caption { display: flex; flex-direction: column; gap: 2px; padding: 28px 12px 10px; background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); font-size: 13px; }
.s-site .s-jg .jg-caption a { color: #fff; text-decoration: none; }
.s-jg__end { margin: 24px 0 0; text-align: center; color: var(--s-muted); }
.s-jg__end[hidden] { display: none; }
/* A contest's results: one column of whole photographs, prize by prize, like the feed. */
.s-results { padding-top: 56px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 64px; }
/* A contest's winners (contest_results.php): the podium as prints on the gallery wall. */
.s-results-hero > .s-container:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 32px; }
.s-results-hero__nav { margin-top: 6px; }
.s-print { display: block; }
.s-print img { display: block; width: auto; height: auto; max-width: 100%; }
.s-podium { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 48px; align-items: end; padding-top: 48px; padding-bottom: 80px; }
.s-podium__place { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; align-items: end; justify-items: center; scroll-margin-top: 96px; }
.s-podium__place--first { grid-column: 1 / -1; }
.s-winner { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 100%; text-align: center; }
.s-winner--first .s-print img { max-height: min(72vh, 760px); }
.s-winner--next .s-print img { max-height: 500px; }
.s-winner__caption { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.s-winner__prize { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--s-accent); }
.s-winner__prize img { width: 36px; height: 36px; padding: 4px; border-radius: 99px; background: var(--s-accent); }
.s-site .s-winner__title { font-family: var(--s-font-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--s-ink); text-decoration: none; }
.s-site .s-winner--first .s-winner__title { font-size: clamp(28px, 3.2vw, 44px); }
.s-winner__by { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 15px; }
.s-site .s-winner__by a { color: var(--s-ink); font-weight: 600; }
.s-fame.s-fame--fill { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (max-width: 767.98px) {
    .s-podium { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 32px; padding-bottom: 56px; }
    .s-winner--first .s-print img, .s-winner--next .s-print img { max-height: none; }
    .s-print { padding: 10px; }
}
.s-results__head h1 { margin: 12px 0 6px; }
.s-results__head .s-blog__cats { margin-top: 20px; }
.s-results__prize { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 96px; }
.s-results__title { display: flex; align-items: center; gap: 14px; margin: 0; font-size: clamp(24px, 2.4vw, 32px); }
/* The award marks are white, drawn to sit on a photo: here they sit on the accent. */
.s-results__title img { width: 60px; height: 60px; flex-shrink: 0; padding: 6px; border-radius: 999px; background: var(--s-accent); }
.s-results__title .bi { color: var(--s-highlight); }
.s-results__cards { display: flex; flex-direction: column; gap: 28px; }
.s-results__more { justify-content: center; }

.s-contestcard__state { display: inline-flex; align-items: center; gap: 6px; }
.s-contestcard__state--closed, .s-contestcard__state--in_deliberation { color: var(--s-muted); }
.s-contestcard__cta { align-self: flex-start; margin-top: 8px; }
/* A photography contest's page (contest_page.php). It opens on its photograph, whole, hung
   like a print on a gallery wall beside the title: in a contest of photographs the photo is
   not cropped behind a veil to carry text. */
.s-cphero { background: var(--s-band); }
.s-cphero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy print" "facts facts"; gap: 40px 64px; align-items: center; padding-top: 32px; padding-bottom: 48px; }
.s-cphero__copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.s-site .s-cphero__title { margin: 0; font-size: calc(clamp(40px, 4.6vw, 68px) * var(--s-h1-scale, 1)); line-height: 1; }
.s-cphero .s-lead { margin: 0; max-width: 560px; }
/* Where a contest stands, as a badge: a pill with its marker — closed (neutral), open (the
   amber, breathing) or its winners (the trophy, in the brand's colour). */
.s-cphero__state { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 16px 8px 14px; border-radius: 999px; border: 1px solid var(--s-line); background: var(--s-surface); box-shadow: 0 6px 16px -12px rgba(var(--s-scrim), .45); color: var(--s-ink); font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -0.005em; }
.s-cphero__state::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 99px; background: var(--s-faint); }
.s-cphero__state.is-open { border-color: color-mix(in srgb, var(--s-highlight) 55%, transparent); background: color-mix(in srgb, var(--s-highlight) 16%, var(--s-surface)); }
.s-cphero__state.is-open::before { background: var(--s-highlight); animation: s-breathe 2s infinite; }
.s-cphero__state--award { border-color: transparent; background: var(--s-btn-primary-bg); color: var(--s-on-accent); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--s-accent) 70%, transparent); }
.s-cphero__state--award::before { display: none; }
.s-cphero__state--award .bi { font-size: 15px; color: var(--s-highlight); }
/* A line beside the badge on the contests home: the open call's name, or why none is shown. */
.s-cphero__note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 15px; color: var(--s-muted); }
.s-site .s-cphero__note a { color: var(--s-ink); font-weight: 700; }
.s-cphero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 6px; }
.s-cphero__play { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; color: var(--s-ink); font: inherit; font-weight: 600; cursor: pointer; }
.s-cphero__play-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; background: var(--s-surface); color: var(--s-accent); font-size: 22px; box-shadow: 0 0 0 1px var(--s-line), 0 10px 24px -12px rgba(var(--s-scrim), .5); transition: transform .15s ease; }
.s-cphero__play:hover .s-cphero__play-icon { transform: scale(1.06); }
/* The print: the photo at its own proportions, in a white mat, a shadow on the wall. */
.s-cphero__print, .s-print { margin: 0; padding: 14px; background: var(--s-surface); border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--s-ink) 6%, transparent), 0 50px 80px -46px rgba(var(--s-scrim), .6), 0 18px 30px -24px rgba(var(--s-scrim), .35); }
.s-cphero__print { grid-area: print; justify-self: end; }
.s-cphero__print img { display: block; width: auto; height: auto; max-width: 100%; max-height: 540px; }
.s-cphero__facts { grid-area: facts; }
.s-cphero__inner--solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "facts"; }
/* The contests home's counts, real ones, at the foot of its wall (contests_home.php). */
.s-cpstats { grid-area: facts; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); }
.s-cpstats > div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 18px 22px; }
.s-cpstats > div + div { border-left: 1px solid var(--s-line); }
.s-cpstats dt { font-size: 14px; font-weight: 500; color: var(--s-muted); }
.s-cpstats dd { margin: 0; font-family: var(--s-font-display); font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--s-ink); }
.s-cpmore { margin-top: 48px; }
@media (max-width: 991.98px) {
    .s-cphero__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "print" "copy" "facts"; gap: 28px; padding-top: 16px; padding-bottom: 32px; }
    .s-cphero__print { justify-self: stretch; padding: 10px; }
    .s-cphero__print img { width: 100%; max-height: none; }
    .s-cphero__inner--solo { grid-template-areas: "copy" "facts"; }
}
@media (max-width: 575.98px) {
    .s-cpstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .s-cpstats > div { padding: 14px 12px; }
    .s-cpstats dt { font-size: 12px; }
    .s-cpstats dd { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .s-cphero__state.is-open::before { animation: none; } }

/* ── Photo page and feed (photo.php, feed.php) ────────────────────────────── */

.s-photo__stage { background: var(--s-viewer-bg); color: var(--s-viewer-ink); display: flex; flex-direction: column; }
/* On a large screen the stage always opens at the visible window's height, the photo centred
   in it; on a phone it is as tall as the photo. */
@media (min-width: 768px) { .s-photo__stage { min-height: 100vh; min-height: 100dvh; } }
.s-photo__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.s-photo__bar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--s-viewer-muted); font-size: 15px; }
.s-site .s-photo__icon { width: 40px; height: 40px; border-radius: 999px; border: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--s-viewer-chip); color: var(--s-viewer-ink); font-size: 18px; text-decoration: none; }
.s-site .s-photo__icon:hover { background: var(--s-viewer-chip-hover); color: var(--s-viewer-ink); }
.s-photo__icon[hidden] { display: none; }
.s-photo__figure { position: relative; flex: 1; margin: 0; padding: 0 16px 24px; display: flex; justify-content: center; align-items: center; }
/* The photo takes its box before it arrives: as wide as the stored photos are (1200 px, the
   stage permitting), as tall as its width/height attributes' proportions — so the stage keeps
   the photo's place while it loads. Inside, never enlarged. */
.s-photo__figure > img:first-child { display: block; width: min(100%, 1200px); height: auto; max-height: calc(100vh - 88px); object-fit: scale-down; }
.s-photo__stage:fullscreen .s-photo__figure > img:first-child { max-height: calc(100vh - 64px); }
/* While it loads (edukall-site-photo.js lifts is-loading): a spinner, shown only once the wait
   is noticeable, so a photo that arrives at once (cached) never flashes it. */
.s-photo__figure.is-loading > img:first-child { color: transparent; }
.s-photo__loader { position: absolute; top: calc(50% - 12px - 1rem); left: calc(50% - 1rem); color: var(--s-viewer-ink); pointer-events: none; opacity: 0; animation: s-photo-loader-in .2s ease .25s forwards; }
.s-photo__figure:not(.is-loading) > .s-photo__loader { display: none; }
/* An upload with no recorded measure gets a usual photo's proportions until it arrives. */
.s-photo__figure.is-loading > img:first-child:not([width]) { aspect-ratio: 3 / 2; }
.s-photo__badge { position: absolute; top: 12px; right: 28px; width: 72px; height: 72px; }
.s-site .s-photo__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--s-viewer-control); border: 1px solid var(--s-viewer-chip-hover); color: var(--s-viewer-ink); font-size: 22px; text-decoration: none; }
.s-site .s-photo__nav:hover { background: var(--s-viewer-control-hover); color: var(--s-viewer-ink); }
.s-photo__nav--prev { left: 24px; }
.s-photo__nav--next { right: 24px; }
.s-photo__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; padding-top: 32px; padding-bottom: 72px; }
.s-photo__main { display: flex; flex-direction: column; gap: 20px; }
.s-photo__main h1 { margin: 0; }
.s-photo__main .s-h3 { margin-bottom: 10px; }
.s-photo__author { display: flex; align-items: center; gap: 12px; }
.s-photo__author > div { display: flex; flex-direction: column; margin-right: 8px; }
.s-site .s-photo__author-name { color: var(--s-ink); font-weight: 600; text-decoration: none; }
.s-photo__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.s-site .s-photo__stat { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-ink); font-size: 15px; text-decoration: none; }
.s-site button.s-photo__stat:hover, .s-site a.s-photo__stat:hover { border-color: var(--s-ink); }
.s-photo__stat[aria-pressed="true"] .bi { color: var(--s-favorite); }
.s-photo__note { margin: -8px 0 0; font-size: 14px; }
.s-site .s-photo__contest { display: flex; align-items: center; gap: 16px; padding: 18px 22px; color: var(--s-ink); text-decoration: none; }
.s-photo__contest > span { flex: 1; display: flex; flex-direction: column; }
.s-photo__contest .bi-trophy { font-size: 24px; color: var(--s-accent); }
.s-photo__text { margin: 0; white-space: normal; }
.s-photo__signin { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.s-photo__signin > span { flex-basis: 100%; }
.s-photo__side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }
.s-photo__side .s-panel { padding: 24px; }
.s-photo__facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 15px; }
.s-photo__facts dt { color: var(--s-muted); font-weight: 500; }
.s-photo__facts dd { margin: 0; }
.s-photo__exif { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.s-photo__exif li { display: flex; gap: 10px; align-items: baseline; }
.s-photo__exif .bi { color: var(--s-muted); }
.s-site .s-photo__subhead { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--s-muted); margin: 16px 0 8px; }
.s-photo__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.s-site .s-photo__tags a { padding: 4px 12px; border-radius: 999px; background: var(--s-band); color: var(--s-ink); font-size: 14px; text-decoration: none; }
.s-site .s-photo__tags a:hover { background: var(--s-line); }
.s-photo__fans { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.s-photo__fans img { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; display: block; }
.s-photo__ads img { max-width: 100%; height: auto; }
/* The comment thread's plugin, dressed in the site's type and colours. */
.s-photo__comments .jquery-comments { font-family: inherit; font-size: 15px; color: var(--s-ink); }
.s-photo__comments .jquery-comments .textarea-wrapper .textarea { border-radius: var(--s-radius); border-color: var(--s-line); background: var(--s-surface); min-height: 44px; }
.s-photo__comments .jquery-comments .highlight-background, .s-photo__comments .jquery-comments .send.enabled { background: var(--s-accent) !important; color: var(--s-on-accent); border-radius: 999px; }
.s-photo__comments .jquery-comments .highlight-font, .s-photo__comments .jquery-comments .highlight-font-bold, .s-photo__comments .jquery-comments ul.navigation li.active { color: var(--s-accent) !important; }
.s-photo__comments .jquery-comments ul.navigation li.active::after { background: var(--s-accent) !important; }
.s-photo__comments .jquery-comments li.comment .name, .s-photo__comments .jquery-comments li.comment .profile-picture { cursor: pointer; }
@media (max-width: 991.98px) {
    .s-photo__body { grid-template-columns: minmax(0, 1fr); }
    .s-photo__side { position: static; }
}
@media (max-width: 575.98px) {
    .s-photo__figure { padding: 0 0 16px; }
    .s-photo__loader { top: calc(50% - 8px - 1rem); }
    .s-site .s-photo__nav { width: 40px; height: 40px; font-size: 18px; }
    .s-photo__nav--prev { left: 8px; }
    .s-photo__nav--next { right: 8px; }
    .s-photo__badge { right: 8px; width: 56px; height: 56px; }
}

.s-feed { padding-top: 32px; padding-bottom: 72px; max-width: 680px; }
.s-feed__head { margin-bottom: 24px; }
.s-feed__head h1 { margin: 0 0 6px; }
.s-feed__head .s-blog__cats { margin-top: 16px; }
.s-feed__head .bi { margin-right: 4px; }
.s-feed__list { display: flex; flex-direction: column; gap: 24px; }
.s-feed__card { border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); background: var(--s-surface); overflow: hidden; }
.s-feed__who { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.s-feed__who > div { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.s-site .s-feed__author { color: var(--s-ink); font-weight: 600; font-size: 15px; text-decoration: none; }
/* Whole and full width, as the templates showed them: never letterboxed. */
.s-feed__image img { display: block; width: 100%; height: auto; background: var(--s-band); }
.s-feed__foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.s-site .s-feed__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--s-ink); text-decoration: none; }

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

.s-upload { padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 20px; max-width: 1040px; }
.s-upload__head h1 { margin: 0 0 12px; }
.s-upload__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: step; }
.s-upload__steps li { counter-increment: step; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--s-band); color: var(--s-muted); font-size: 14px; font-weight: 600; }
.s-upload__steps li::before { content: counter(step); width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--s-surface); font-size: 13px; }
.s-upload__steps li[aria-current] { background: var(--s-accent); color: var(--s-on-accent); }
.s-upload__steps li[hidden] { display: none; }
.s-upload__steps li[aria-current]::before { color: var(--s-accent); }
.s-site .s-upload__contest { display: flex; align-items: center; gap: 16px; padding: 18px 22px; text-decoration: none; }
.s-upload__contest .bi { font-size: 26px; }
.s-upload__contest > span { display: flex; flex-direction: column; }
.s-upload__quota { margin: 0; }
.s-upload__drop { border: 2px dashed var(--s-line); border-radius: var(--s-radius-lg); background: var(--s-surface); padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; transition: border-color .15s ease, background .15s ease; }
.s-upload__drop > .bi { font-size: 48px; color: var(--s-accent); }
.s-upload__drop h2, .s-upload__drop p { margin: 0; }
.s-upload__drop[hidden], .s-upload__cards[hidden], .s-upload__progress[hidden], .s-upload__all-done[hidden] { display: none; }
body.dz-drag-hover .s-upload__drop { border-color: var(--s-accent); background: var(--s-accent-soft); }
.s-upload__formats { font-size: 13px; color: var(--s-faint); }
.s-upload__cards { display: flex; flex-direction: column; gap: 16px; }
.s-upload__cards-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.s-upload__cards-head h2, .s-upload__cards-head p { margin: 0; }
.s-upload__progress { display: flex; flex-direction: column; gap: 6px; min-width: 180px; font-size: 14px; }
.s-upload__bar { display: block; height: 6px; border-radius: 999px; background: var(--s-band); overflow: hidden; }
.s-upload__bar > span { display: block; height: 100%; width: 0; background: var(--s-accent); transition: width .15s ease; }
.s-upload__list { display: flex; flex-direction: column; gap: 16px; }
.s-site .s-upload__rules { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; }
.s-upload__rules .form-check { margin: 0; }
.s-site .s-upload__bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; }
.s-upload__bulk[hidden] { display: none; }
.s-upload__bulk-title { flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; }
.s-upload__bulk .form-select { flex: 1 1 200px; width: auto; min-width: 0; max-width: 100%; }
/* What is optional on a card waits behind one line (description, tags). */
.s-upcard__more { grid-column: 1 / -1; }
.s-upcard__more > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--s-accent); }
.s-upcard__more > summary::-webkit-details-marker { display: none; }
.s-upcard__more > summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 99px; background: var(--s-accent-soft); font-weight: 700; line-height: 1; }
.s-upcard__more[open] > summary::before { content: "−"; }
.s-upcard__more-fields { display: grid; gap: 12px; margin-top: 12px; }
/* No call open for one who must enter one: where the drop zone was, the way to the contests. */
.s-upload__drop--none > .bi { color: var(--s-faint); }
/* The entries waiting for their fee, and the two ways on — pay, or add more. It stays at the
   foot of the screen while the cards scroll past, and rests at the end of the list. */
.s-upbar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 18px; border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); background: var(--s-surface); box-shadow: 0 22px 44px -22px rgba(var(--s-scrim), .5); }
.s-upbar[hidden] { display: none; }
.s-upbar__sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-upbar__sum p { margin: 0; }
.s-upbar__total { font-size: 16px; }
.s-upbar__total [data-ek-upbar-total] { margin-left: 6px; font-weight: 600; color: var(--s-ink); }
.s-upbar__hint { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--s-muted); }
.s-upbar__hint[hidden] { display: none; }
.s-upbar__hint--nudge { color: var(--s-accent); font-weight: 600; }
.s-upbar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.s-upcard { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 16px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); }
.s-upcard.is-published { border-color: var(--s-accent); }
.s-upcard__thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--s-radius-sm); background: var(--s-band); }
.s-upcard__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-content: start; }
.s-upcard__form[hidden] { display: none; }
.s-upcard__form .s-field--wide, .s-upcard__status, .s-upcard__error, .s-upcard__actions { grid-column: 1 / -1; }
.s-upcard__status { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; }
.s-upcard__badge { padding: 3px 10px; border-radius: 999px; background: var(--s-tint-2); color: var(--s-ink); font-size: 13px; font-weight: 600; }
.s-upcard.is-published .s-upcard__badge { background: var(--s-accent-soft); color: var(--s-accent-soft-ink); }
.s-upcard__error { margin: 0; color: var(--s-ink); background: var(--s-tint-2); padding: 8px 12px; border-radius: var(--s-radius-sm); font-size: 14px; }
.s-upcard__error[hidden] { display: none; }
.s-upcard__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.s-upcard__done { margin: 0; align-self: center; display: flex; gap: 10px; align-items: center; font-weight: 600; }
.s-upcard__done[hidden] { display: none; }
.s-upcard__done .bi { color: var(--s-accent); font-size: 22px; }
.s-site .s-upload__all-done { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 22px; }
@media (max-width: 767.98px) {
    .s-upcard { grid-template-columns: minmax(0, 1fr); }
    .s-upcard__thumb { aspect-ratio: 3 / 2; }
    .s-upcard__form { grid-template-columns: minmax(0, 1fr); }
}

.s-mygallery { padding-top: 32px; padding-bottom: 72px; }
.s-mygallery__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.s-mygallery__head h1 { margin: 0 0 6px; }
.s-mygallery__head .s-lead { margin: 0; }
.s-mygallery__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.s-mygallery__item { border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); overflow: hidden; }
.s-mygallery__image img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; height: auto; transition: transform .2s ease; }
.s-mygallery__image:hover img { transform: scale(1.03); }
.s-mygallery__image { display: block; overflow: hidden; }
.s-mygallery__bar { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 14px; }
.s-mygallery__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 15px; }
.s-site .s-mygallery__action { width: 36px; height: 36px; border-radius: 999px; border: 0; background: transparent; color: var(--s-muted); display: inline-flex; align-items: center; justify-content: center; }
.s-site .s-mygallery__action:hover { background: var(--s-band); color: var(--s-ink); }
.s-mygallery__panel { --bs-offcanvas-width: 480px; background: var(--s-bg); }
.s-mygallery__form { display: flex; flex-direction: column; gap: 14px; }
.s-mygallery__replace { border: 2px dashed var(--s-line); border-radius: var(--s-radius); padding: 12px; text-align: center; cursor: pointer; background: var(--s-surface); }
.s-mygallery__replace.dz-drag-hover { border-color: var(--s-accent); background: var(--s-accent-soft); }
.s-mygallery__replace img { display: block; max-width: 100%; max-height: 220px; margin: 0 auto 8px; border-radius: var(--s-radius-sm); }
.s-mygallery__replace p { margin: 0; font-size: 14px; }
.s-mygallery__exif { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; }
.s-mygallery__exif legend { grid-column: 1 / -1; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--s-muted); margin-bottom: 0; }
.s-mygallery__actions { display: flex; justify-content: space-between; gap: 8px; position: sticky; bottom: -16px; padding: 12px 0; background: var(--s-bg); }
@media (max-width: 991.98px) { .s-mygallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
    .s-mygallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .s-mygallery__panel { --bs-offcanvas-width: 100%; }
}
/* Its spinner sits where the photo's own one (.s-photo__loader) will, and that one takes over at
   once, with no delay: one spinner holding still until the photo is there, not two in turn.
   Below the bar on a large screen; on a phone over a usual (3:2) photo's place. */
.s-viewer .s-photo__loader { opacity: 1; animation: none; }

/* Contests home: the public gallery's listings, one card each. */
.s-site a.s-explore { display: flex; flex-direction: column; gap: 10px; color: var(--s-ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.s-site a.s-explore:hover { border-color: var(--s-ink); transform: translateY(-2px); }
.s-explore__icon { width: 48px; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--s-accent-soft); color: var(--s-accent); font-size: 22px; }
.s-explore__title { margin: 6px 0 0; }
.s-explore__text { color: var(--s-muted); flex: 1; }
.s-explore__go { margin-top: 6px; }

/* Contests home: the hall of fame, a compact band of the latest podium photos. */
.s-fame { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.s-site .s-fame__item { position: relative; display: block; overflow: hidden; border-radius: var(--s-radius-sm); color: var(--s-viewer-ink); text-decoration: none; background: var(--s-tint-3); }
.s-fame__item img { display: block; width: 100%; height: 220px; object-fit: cover; transition: transform .25s ease; }
.s-fame__item:hover img { transform: scale(1.04); }
.s-fame__caption { position: absolute; inset: auto 0 0 0; display: flex; gap: 8px; align-items: flex-start; padding: 28px 12px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); font-size: 13px; line-height: 1.3; }
.s-fame__caption .bi { color: var(--s-highlight); font-size: 16px; }
.s-fame__caption > span { display: flex; flex-direction: column; min-width: 0; }
.s-fame__caption strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 991.98px) { .s-fame { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .s-fame { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .s-fame__item img { height: 170px; } }

/* ── The jury (jury_contests.php, jury_deliberation.php) ─────────────────── */

.s-jury { padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 24px; }
.s-jury__head h1 { margin: 12px 0 6px; }
.s-jury__head .s-lead { margin: 0; }
.s-jury__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.s-jury__assignment { display: flex; align-items: center; gap: 20px; padding: 16px 20px; }
.s-jury__assignment > img { width: 96px; height: 96px; flex-shrink: 0; object-fit: cover; border-radius: var(--s-radius-sm); background: var(--s-tint-3); }
.s-jury__assignment-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.s-jury__assignment-body h2 { margin: 0; }
.s-jury__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--s-muted); }
.s-jury__status { padding: 3px 10px; border-radius: 999px; background: var(--s-band); color: var(--s-ink); font-weight: 600; font-size: 13px; }
.s-jury__status.is-open { background: var(--s-accent-soft); color: var(--s-accent-soft-ink); }
/* A native <progress>, drawn in the site's colours. */
.s-jury__bar { display: block; width: 100%; max-width: 320px; height: 6px; border: 0; border-radius: 999px; background: var(--s-band); overflow: hidden; appearance: none; }
.s-jury__bar::-webkit-progress-bar { background: var(--s-band); border-radius: 999px; }
.s-jury__bar::-webkit-progress-value { background: var(--s-accent); border-radius: 999px; }
.s-jury__bar::-moz-progress-bar { background: var(--s-accent); border-radius: 999px; }
.s-jury__progress { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.s-jury__progress .s-jury__bar { max-width: none; height: 8px; }
.s-jury__progress-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.s-jury__pct { margin: 0; font-size: 14px; }
.s-jury__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.s-jury__hint { margin: 0; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.s-jury__hint kbd { display: inline-block; min-width: 24px; padding: 1px 6px; border: 1px solid var(--s-line); border-bottom-width: 2px; border-radius: 6px; background: var(--s-surface); color: var(--s-ink); font-family: inherit; font-size: 12px; font-weight: 600; text-align: center; box-shadow: none; }
.s-jury__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.s-jury__card { border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); overflow: hidden; }
.s-jury__card[hidden] { display: none; }
.s-jury__card[data-state="done"] { border-color: var(--s-accent); }
/* The whole frame, never cropped: a juror judges the composition as it was submitted. */
.s-site .s-jury__image { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--s-viewer-bg); cursor: zoom-in; }
.s-jury__image img { display: block; width: 100%; height: 280px; object-fit: contain; }
.s-jury__blind { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: var(--s-viewer-muted); font-size: 12px; text-align: left; }
.s-jury__badge { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px; background: var(--s-accent); color: var(--s-on-accent); font-weight: 700; font-size: 14px; }
.s-jury__badge:empty { display: none; }
.s-jury__card[data-state="partial"] .s-jury__badge { background: var(--s-highlight); color: var(--s-on-highlight); }
.s-jury__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.s-site .s-jury__title { margin: 0; font-size: 16px; font-family: var(--s-font-body); font-weight: 600; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-jury__criterion { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--s-line); }
.s-jury__label { margin: 0; font-size: 14px; font-weight: 600; }
.s-jury__notes[hidden] { display: none; }
.s-site .s-jury__notes { min-height: 0; font-size: 14px; }
.s-jury__status-line { margin: 0; font-size: 13px; color: var(--s-muted); }
.s-scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.s-site .s-scale__btn { min-width: 0; height: 36px; padding: 0; border: 1px solid var(--s-line); border-radius: 8px; background: var(--s-surface); color: var(--s-ink); font-weight: 600; font-size: 14px; }
.s-site .s-scale__btn:hover:not(:disabled) { border-color: var(--s-accent); color: var(--s-accent); }
.s-site .s-scale__btn[aria-pressed="true"] { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on-accent); }
.s-scale__btn:disabled { opacity: .5; cursor: not-allowed; }
html.s-noscroll { overflow: hidden; }
.s-jury-viewer { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: var(--s-viewer-bg); color: var(--s-viewer-ink); }
.s-jury-viewer[hidden] { display: none; }
.s-jury-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.s-jury-viewer__caption { color: var(--s-viewer-muted); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-jury-viewer__figure { position: relative; flex: 1; min-height: 0; margin: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px; cursor: zoom-out; }
/* Never beyond the size stored (photo_display_max_width(), PhotoUploadService::FULL_WIDTH): an
   enlargement blurs the photo and a juror cannot tell that blur from the photographer's. */
.s-jury-viewer__figure img { max-width: min(1200px, 100%); max-height: 100%; object-fit: contain; cursor: default; }
.s-jury-viewer__score { padding: 12px 16px 20px; display: flex; justify-content: center; }
.s-jury-viewer__score .s-scale { width: min(520px, 100%); }
.s-jury-viewer .s-scale__btn { background: var(--s-viewer-chip); border-color: var(--s-viewer-chip-hover); color: var(--s-viewer-ink); }
@media (max-width: 991.98px) { .s-jury__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
    .s-jury__grid { grid-template-columns: minmax(0, 1fr); }
    .s-jury__assignment { flex-wrap: wrap; }
    .s-scale { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.s-jury__closed { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
@media (max-width: 767.98px) { .s-jury__hint { display: none; } }

/* ── The notification bell (navbar.php, _notifications.php) ───────────────── */
.s-contestcard__links { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* Above the title's stretched link (.s-pcard__link::after), which covers the whole card. */
.s-contestcard__links a { position: relative; z-index: 2; }