/* Nakładki · the studio "Zrób zdjęcie" of the home page (prototype Main.dc.html, the band #studio, with the editor of
   Edytor.dc.html in it): the white band with the light in the colours of the chosen page, the chips of the pages
   (with the chip of a category and the line when nothing matches), then the editor. The editor is the module of a
   published page: its markup and its classes .nkm… come from module.css, which the home page loads before this file;
   here are the band, the title row, the chips, the name of the chosen page at the top of the settings and the size of
   the preview by the height of the window. Classes .site-studio…, .site-pick and .site-ed…;
   app/views/site/_studio.php is the markup, public/assets/js/studio.js the behaviour. Every var() with its value as the
   fallback. */

/* The name of the chosen page, a title that is not an h1 to h6 element: the display face of the headings (app.css). */
.site-studio__name { font-family: var(--nk-font-display, 'Hanken Grotesk', 'Sofia Sans', system-ui, sans-serif); }

.site-studio { position: relative; isolation: isolate; margin-top: clamp(64px, 9vw, 112px); border-top: 1px solid var(--nk-line, #E3E0D9); border-bottom: 1px solid var(--nk-line, #E3E0D9); background: var(--nk-surface, #FFFFFF); scroll-margin-top: 16px; }
/* What studio.js hides (the photo tools before a photo, the files before "Pobierz") stays hidden whatever its display. */
.site-studio [hidden] { display: none; }
.site-studio__glow { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.site-studio__in { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(36px, 5vw, 64px); }
.site-studio__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.site-studio__titles { flex: 1 1 420px; min-width: 0; }
.site-studio__eyebrow { margin-bottom: 8px; }
.site-studio__title { font-size: clamp(30px, 4.2vw, 48px); font-weight: 600; line-height: 1.06; letter-spacing: -0.025em; }
.site-studio__search { flex: 1 1 320px; }
/* The prototype's field has no padding of its own, so the browser's 1px 2px stays. */
.site-studio__search .search__input { padding: 0 2px; }
.site-studio__nojs { margin-top: 22px; color: var(--nk-ink-2, #3A4050); }
.site-studio__picks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
/* A chip of the studio: the thumbnail of the overlay and its name; the chosen one in ink. */
.site-pick { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 52px; padding: 5px 16px 5px 5px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-pill, 999px); background: var(--nk-surface, #FFFFFF); color: var(--nk-ink, #0B1220); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.site-pick:hover { border-color: var(--nk-ink, #0B1220); }
.site-pick[aria-pressed="true"] { border-color: var(--nk-ink, #0B1220); background: var(--nk-ink, #0B1220); color: var(--nk-on-ink, #FFFFFF); }
.site-pick__mini { width: 40px; height: 40px; }
.site-pick__name { min-width: 0; text-align: left; overflow-wrap: anywhere; }
/* The chip of the category a tile chose (app.css .chip--dashed): "Kluby i kibice ×" takes the filter away. */
.site-studio__cat:hover { border-color: var(--nk-ink-2, #3A4050); }
.site-studio__all { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 15px; font-weight: 600; }
.site-studio__none { margin-top: 14px; color: var(--nk-ink-2, #3A4050); }
.site-studio__none a { font-weight: 600; }

/* The editor (module.css) under the chips. Its preview is as large as lets the band show from its title to "Pobierz"
   when the page stands at #studio: the height of the window less the band's top, the title row, two rows of chips, the
   strip of overlays and a margin (400 px), from 320 to 480 px. Beside 480 px the settings stand in one column, whose
   "Pobierz" ends about 600 px under the top of the editor; a window lower than 900 px keeps the preview at 440 px or
   less, so the settings stand in two columns (module.css) and "Pobierz" shows. */
.site-ed { margin-top: 16px; }
.site-studio .nkm { --nkm-pv: clamp(320px, calc(100vh - 400px), var(--nkm-pv-max, 480px)); }
@supports (height: 100svh) {
  .site-studio .nkm { --nkm-pv: clamp(320px, calc(100svh - 400px), var(--nkm-pv-max, 480px)); }
}
@media (max-height: 899px) {
  .site-studio .nkm { --nkm-pv-max: 440px; }
}
/* The chosen page at the top of its settings: its name with the kind and the people after it, the link to its page;
   under it "Wybierz nakładkę", its label over the overlays as in the module of a page. */
.site-ed__page { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 16px; }
.site-ed .nkm-group--pick { gap: 14px; }
.site-ed .nkm-picks { display: flex; flex-direction: column; gap: 8px; }
/* The check of the chosen overlay: the module's markup has it as an inline svg, studio.js only makes the span. */
.site-ed .nkm-pick__tick::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-studio__name { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
/* The kind and the people after the name: text, so the text face again. */
.site-studio__meta { font-family: var(--nk-font, 'Sofia Sans', system-ui, sans-serif); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--nk-muted, #5D6372); }
/* A plain 15 px line as in the prototype; a band above and below keeps the target 44 px. */
.site-studio__link { position: relative; font-size: 15px; font-weight: 600; }
.site-studio__link::after { content: ''; position: absolute; top: calc(50% - 22px); right: 0; bottom: calc(50% - 22px); left: 0; }

@media (forced-colors: active) {
  .site-pick[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .site-pick { border: 1px solid ButtonText; }
}