/* ===== Premierentage theme =====
   Only what theme.json cannot express. Colors, sizes and spacing come from
   the presets (var(--wp--preset--*)), so they are not repeated here. */

:root {
  /* Relief on display type, taken over from the 2026 placeholder page:
	   light source top left, two light layers approximate the flat band
	   Figma produces. In em, so it scales with the type. */
  --pt-relief-offset: 0.038em;
  --pt-relief-blur: 0.025em;
  --pt-relief-opacity: 0.22;
  --pt-relief:
    calc(var(--pt-relief-offset) * -1) calc(var(--pt-relief-offset) * -1)
      var(--pt-relief-blur) rgba(255, 255, 255, var(--pt-relief-opacity)),
    calc(var(--pt-relief-offset) / -2) calc(var(--pt-relief-offset) / -2)
      var(--pt-relief-blur) rgba(255, 255, 255, var(--pt-relief-opacity)),
    calc(var(--pt-relief-offset) / -4) calc(var(--pt-relief-offset) / -4)
      var(--pt-relief-blur) rgba(255, 255, 255, var(--pt-relief-opacity)),
    var(--pt-relief-offset) var(--pt-relief-offset) 0.038em
      rgba(0, 8, 64, var(--pt-relief-opacity));
  /* Faint dark outline painted behind the fill, softens the glyph edge */
  --pt-relief-stroke: 0.1em #00000010;

  /* Glass edge for boxes and buttons: the same light-from-top-left idea as
	   the relief, as box-shadow. Measured off the "Rückblick 2025" box: ~35%
	   white ramping in above/left, ~35% dark navy below/right, ~7px wide. */
  --pt-glass:
    -0.2rem -0.2rem 0.25rem rgba(255, 255, 255, 0.35),
    0.2rem 0.2rem 0.25rem rgba(0, 8, 64, 0.4);
}

/* Safari renders the stacked shadows and the stroke badly, so it gets a
   simpler three-layer shadow and no stroke. The @supports combination
   only matches WebKit (hanging-punctuation and -apple-system-body are
   Safari-only). */
@supports (hanging-punctuation: first) and (font: -apple-system-body) and
  (-webkit-appearance: none) {
  :root {
    --pt-relief:
      -0.014em -0.014em 0.016em rgba(255, 255, 255, 0.13),
      -0.026em -0.034em 0.034em rgba(255, 255, 255, 0.34),
      0.024em 0.032em 0.038em rgba(0, 8, 64, 0.34);
    --pt-relief-stroke: 0 transparent;
  }
}

/* ---- Minimal reset ----
   Core already does body { margin: 0 } and spaces blocks via its layout
   system (blockGap). So no blanket "* { margin: 0 }" here - it would compete
   with the layout rules, which are deliberately low-specificity :where(). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

img,
picture,
video,
svg {
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

body {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Relief is opt-in: block style "Relief" on paragraphs and headings */
.is-style-relief,
.pt-display {
  text-shadow: var(--pt-relief);
  -webkit-text-stroke: var(--pt-relief-stroke);
  paint-order: stroke fill;
}

.pt-display {
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 500;
  line-height: 0.909;
  letter-spacing: -0.015em;
}

/* Page title (post-title block in the page templates): a small label above
   the content, as on the Kontakt and Newsletter mockups */
.pt-page-title {
  font-size: var(--wp--preset--font-size--x-small);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: normal;
}

.pt-label {
  font-size: var(--wp--preset--font-size--x-small);
  text-transform: uppercase;
}

/* ---- Page frame: footer at the bottom, no gaps between header/main/footer ----
   The templates wrap header and main in a .pt-page group (all but landing and
   blank), so the sticky logo below stops above the footer. */

.wp-site-blocks,
.pt-page,
.pt-landing {
  display: flex;
  flex-direction: column;
}

.wp-site-blocks {
  min-height: 100svh;
}

.wp-site-blocks > *,
.pt-page > *,
.pt-landing > * {
  margin-block: 0;
}

.wp-site-blocks > main,
.wp-site-blocks > .pt-page,
.pt-page > main {
  flex-grow: 1;
}

/* Light pages (templates "Seite (hell)" and "Seite (hell) ohne Titel"). The
   theme adds the body class (functions.php); the template's own
   paper-colored .pt-page group covers the Site Editor. The navigation is
   dark there, not blue. */
body.pt-light {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--accent);
}

.pt-page.has-base-background-color .pt-header {
  color: var(--wp--preset--color--contrast);
}

/* ---- Header ---- */

/* No top padding: the logo PNG brings its own transparent margin */
/* Page margin comes from the surrounding constrained group (root padding),
   which also caps the row at the wide size */
.pt-header {
  padding-bottom: var(--wp--preset--spacing--30);
}

/* Current entry and its section (aria-current, set in functions.php) */
.pt-nav a[aria-current] {
  text-decoration: underline;
}

@media (min-width: 600px) {
  /* The menu spans the right half of the page, items spread evenly,
	   text roughly level with the logo's upper third as in the mockup */
  .pt-header > .wp-block-navigation {
    flex: 0 0 50%;
    margin-top: 3.4rem;
  }

  .pt-header .wp-block-navigation__container {
    width: 100%;
  }

  /* The phone menu button (functions.php) */
  .pt-menu-toggle {
    display: none;
  }
}

@media (max-width: 599px) {
  /* Phone: no logo, just a centered "Menu" pill. It opens a glass box with
     the items below it, which pushes the page down (no overlay). */
  .pt-header {
    padding-top: 3.75rem;
  }

  .pt-header .wp-block-site-logo {
    display: none;
  }

  .pt-header > .wp-block-navigation {
    display: block;
    flex: 0 0 75%;
    margin-inline: auto;
  }

  .pt-menu-toggle {
    display: block;
    width: 100%;
    height: 3rem;
    padding: 0 1em;
    border: 0;
    border-radius: 999px;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--white);
    box-shadow: var(--pt-glass);
    font-size: 1.125rem;
    text-shadow: var(--pt-relief);
    cursor: pointer;
  }

  /* Items left-aligned as a block, the block centered in the box */
  .pt-nav > .wp-block-navigation__container {
    display: grid;
    grid-template-columns: max-content;
    justify-content: center;
    gap: 0.875rem;
    margin-top: 3rem;
    padding: 1.5rem var(--wp--preset--spacing--40);
    border-radius: clamp(1.25rem, 1.75vw, 1.875rem);
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--white);
    box-shadow: var(--pt-glass);
    text-shadow: var(--pt-relief);
    /* Clips the items while the box slides open (menu.js) */
    overflow: hidden;
  }

  /* On the items: the list carries the block's has-small-font-size class,
     which is !important */
  .pt-nav > .wp-block-navigation__container > li {
    font-size: 1.25rem;
  }

  .pt-nav:not(.is-open) > .wp-block-navigation__container {
    display: none;
  }
}

/* ---- Sticky logo ----
   On wide screens the logo stays in view in the margin left of the content.
   Only from 100rem (1600px): the content is at most 75rem wide and centered,
   so the margin then always fits page margin (2.5rem) + logo (116px) + a gap,
   even with a classic scrollbar. Logo and content can't overlap there, as
   long as the page has no wide/full-width blocks at the top level of its
   content (wide blocks nested in a group or column have no effect).

   Sticky only works inside the logo's parent, the short header row. So the
   header is stretched over the .pt-page frame of header and main (not the
   footer, the logo stops above it) and lets clicks through to the content
   below. Out of the flow, it no longer pushes main down: main makes room for
   it instead. */
@media (min-width: 100rem) {
  .pt-page {
    position: relative;
  }

  .pt-page > header {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  .pt-page > header > .wp-block-group,
  .pt-page > header .pt-header {
    height: 100%;
  }

  /* Header height: logo (177px incl. its transparent margin) + padding */
  .pt-page > main {
    margin-top: calc(177px + var(--wp--preset--spacing--30));
  }

  .pt-page > header .wp-block-site-logo {
    position: sticky;
    top: 0;
  }

  .pt-page > header .pt-header > * {
    pointer-events: auto;
  }
}

/* ---- Glass box (block style "Glas" on groups) ---- */

.is-style-glass {
  position: relative;
  padding: clamp(1.5rem, 2.9vw, 3.125rem) var(--wp--preset--spacing--40);
  border-radius: clamp(1.25rem, 1.75vw, 1.875rem);
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--white);
  box-shadow: var(--pt-glass);
}

.is-style-glass > * {
  margin-block: 0;
}

.is-style-glass > * + * {
  margin-block-start: 0.75rem;
}

/* The whole box is clickable when it contains a link */
.is-style-glass a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ---- Hero (block style "Hero (Video)" on the Cover block) ----
   Fills the first screen; the video is cropped to fit (object-fit: cover). */

.wp-block-cover.is-style-hero {
  min-height: 100svh;
  align-items: flex-start;
  justify-content: flex-start;
  padding: clamp(4rem, 4.25vw, 4.59rem) var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--white);
}

/* The background runs edge to edge, the text lines up with the header and
   footer frame (wide size). The extra indent puts the ink where the mockup
   has it, 50px further in than the logo @1728. */
.wp-block-cover.is-style-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  /* padding-inline: clamp(0rem, 2.9vw, 3.125rem); */
}

.is-style-hero .wp-block-cover__inner-container > * {
  margin: 0;
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 500;
  line-height: 0.909;
  letter-spacing: -0.015em;
}

.is-style-hero .wp-block-cover__inner-container > * + * {
  margin-top: 1.012em;
}

@media (orientation: portrait) {
  .is-style-hero .wp-block-cover__inner-container > * + * {
    margin-top: 4.5em;
  }
}

/* ---- Landing page (template "Startseite") ---- */

.pt-landing .wp-block-post-content > .alignfull {
  margin-block: 0;
}

@media (min-width: 600px) {
  /* The header floats over the hero; the logo sits in the intro instead */
  .pt-landing {
    position: relative;
  }

  .pt-landing > header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    color: var(--wp--preset--color--white);
  }

  .pt-landing .pt-header .wp-block-site-logo {
    visibility: hidden;
  }
}

@media (max-width: 599px) {
  /* Phone: the menu sits below the hero; hero and menu pill fill the first
     screen. The header still comes first in the HTML (the hero is page
     content), so the hero is taken out of the flow and the header pushed
     down by the hero's height. That keeps the open menu pushing the page
     down. The hero needs a fixed height for this: the minimum leaves room
     for two three-line headings on short screens (core clips the cover). */
  .pt-landing {
    --pt-hero-height: max(100svh - 5.5rem, 36rem);
    position: relative;
  }

  .pt-landing .wp-block-cover.is-style-hero {
    position: absolute;
    inset: 0 0 auto;
    height: var(--pt-hero-height);
    min-height: 0;
    margin: 0;
  }

  /* Class for specificity: core zeroes the first child's top margin */
  .pt-landing > header.wp-block-template-part {
    margin-top: var(--pt-hero-height);
  }

  /* 1.25rem + 3rem pill + 1.25rem = the 5.5rem below the hero */
  .pt-landing .pt-header {
    padding-block: 1.25rem;
  }
}

/* Landing sections are constrained groups: the page margin comes from the
   root padding, so only vertical padding here */
.pt-intro,
.pt-verein {
  padding-block: var(--wp--preset--spacing--70);
}

.pt-intro > .wp-block-columns {
  margin-block: 0;
}

@media (max-width: 781px) {
  /* Stacked columns: the logo column would just be an empty gap */
  .pt-intro .wp-block-column:has(> .wp-block-site-logo) {
    display: none;
  }

  .pt-intro .wp-block-columns {
    gap: var(--wp--preset--spacing--50);
  }
}

.pt-partner {
  padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.pt-partner > h2 {
  margin-bottom: var(--wp--preset--spacing--50);
}

/* Each row is a four-column grid (block layout "grid", columnCount 4), so
   logos line up in columns across rows and shrink inside their cell instead
   of wrapping one at a time. Outer columns hug the content edges. Logo files
   should be trimmed (no transparent padding) for the alignment to work. */
.pt-logos {
  align-items: center;
  justify-items: center;
  row-gap: 2rem;
  column-gap: 3rem;
}

.pt-logos > :nth-child(4n + 1) {
  justify-self: start;
}

.pt-logos > :nth-child(4n) {
  justify-self: end;
}

.pt-logos + .pt-logos {
  margin-top: var(--wp--preset--spacing--50);
}

.pt-logos .wp-block-image {
  margin: 0;
}

@media (max-width: 1199px) {
  .pt-logos {
    column-gap: 1.5rem;
  }
}

@media (max-width: 781px) {
  /* Phone: two centred columns, normalise logo heights instead of the
     desktop widths */
  .pt-logos.is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pt-logos > .wp-block-image {
    justify-self: center;
  }

  .pt-logos .wp-block-image img {
    width: auto !important;
    max-width: 8rem;
    max-height: 2.75rem;
  }
}

/* ---- Rückblick pages ----
   Page content: a head (title + year links left, credits right), a square
   gallery and the title + year links again at the bottom. Classes on the
   groups and the gallery; selectors carry .wp-block-* to beat core's flow
   layout margins. */

.wp-block-group.pt-review__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.wp-block-group.pt-review__head > *,
.wp-block-group.pt-review__years > *,
.wp-block-group.pt-review__credits > *,
.wp-block-group.pt-review__credits > * > * {
  margin-block: 0;
}

/* The bottom one is a paragraph (one h1 per page) but looks the same */
.wp-block-group.pt-review__years > :first-child {
  line-height: 0.909;
  letter-spacing: -0.015em;
}

/* The menu lists all years; the current one is the title above it */
.pt-review__nav .current-menu-item {
  display: none;
}

.pt-review__nav .wp-block-navigation__container {
  gap: 0;
  line-height: 1.05;
}

.wp-block-group.pt-review__credits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

/* Narrower than the content, as in the mockup (4 × 273px @1728) */
.wp-block-gallery.pt-review__gallery {
  max-width: 68.25rem;
  margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

/* Square tiles, cropped here: the image size (pt-gallery) keeps the photo's
   shape so the lightbox can show it whole (see functions.php). */
.pt-review__gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
  aspect-ratio: 1;
  height: auto;
}

@media (max-width: 781px) {
  .wp-block-group.pt-review__head {
    grid-template-columns: 1fr;
  }

  .wp-block-group.pt-review__credits {
    flex-direction: column;
  }
}

@media (max-width: 599px) {
  /* Core drops galleries to two columns on phones; the mockup keeps four.
     The :not(#individual-image) matches core's selector weight. */
  .pt-review__gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    width: 25%;
  }
}

/* ---- Footer ---- */

.pt-footer {
  padding-block: var(--wp--preset--spacing--60);
}

@media (min-width: 782px) and (max-width: 1199px) {
  /* Four columns don't fit here: the claim gets its own row, the rest go
     below. !important because core forces nowrap from 782px up and the
     column width is an inline style. */
  .pt-footer .wp-block-columns {
    flex-wrap: wrap !important;
    row-gap: var(--wp--preset--spacing--50);
  }

  .pt-footer .wp-block-column:first-child {
    flex-basis: 100% !important;
  }
}

/* Icon size on the items, not the list: on the list it would also scale the
   em-based block gap above it */
.pt-footer .wp-block-social-links {
  gap: 1.25rem;
}

.pt-footer .wp-block-social-links .wp-social-link {
  font-size: 3rem;
  color: inherit;
}

@media (max-width: 781px) {
  /* Columns stack here (core breakpoint); the right-aligned legal column
	   goes left with them */
  .pt-footer {
    padding-top: var(--wp--preset--spacing--40);
  }

  .pt-footer .has-text-align-right {
    text-align: left;
  }
}

/* ---- Events (plugin premierentage-events) ----
   The plugin outputs data with stable classes, all styling is here. */

/* Venue number in front of event titles: "15. Artwalk …". Hidden for now:
   without the map the numbers only confuse. */
.pt-number {
  display: none;
  margin-right: 0.15em;
  font-size: 0.5em;
  vertical-align: 0.7em;
  line-height: 0;
}

/* Program block: one column per day, the additional program (Sunday) goes
   below the last day */
.wp-block-pt-program {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.pt-program__day + .pt-program__day {
  margin-top: var(--wp--preset--spacing--60);
}

.pt-program__day-label {
  margin: 0;
  font-size: var(--wp--preset--font-size--x-small);
}

.pt-program__day-heading {
  margin: 0.2em 0 0;
  font-size: var(--wp--preset--font-size--large);
  text-shadow: var(--pt-relief);
  -webkit-text-stroke: var(--pt-relief-stroke);
  paint-order: stroke fill;
}

.pt-program__weekday,
.pt-program__date {
  display: block;
}

.pt-program__events {
  margin: var(--wp--preset--spacing--50) 0 0;
  padding: 0;
  list-style: none;
}

.pt-program__event + .pt-program__event {
  margin-top: 1.5em;
}

.pt-program__meta {
  margin: 0;
  font-size: var(--wp--preset--font-size--x-small);
}

.pt-program__time,
.pt-program__types {
  display: block;
}

.pt-program__types,
.pt-program__title,
.pt-event__title,
.pt-event__types,
.pt-event__address {
  text-transform: uppercase;
}

.pt-program__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium-plus);
  line-height: 1.05;
  letter-spacing: normal;
}

.pt-program__title a {
  color: inherit;
}

.pt-program__summary {
  margin: 0;
  color: var(--wp--preset--color--contrast);
}

/* Program-only items (shuttle bus): the whole item opens the details */
.pt-program__details > summary {
  list-style: none;
  cursor: pointer;
}

.pt-program__details > summary::-webkit-details-marker {
  display: none;
}

.is-program-only .pt-program__title {
  text-transform: none;
}

.pt-program__more,
.pt-program__description {
  color: var(--wp--preset--color--contrast);
}

.pt-program__more {
  display: block;
}

.pt-program__details[open] .pt-program__more {
  display: none;
}

.pt-program__description > * {
  margin-block: 0.75em 0;
}

.pt-program__description ol {
  padding-left: 1.25em;
}

/* Single event: image on top, facts left, text right.
   The image sits in a band of fixed height (56.25vw = the mockup's ~970px
   @1728, capped so it doesn't fill tall or wide screens). functions.php
   decides per image: "is-bleed" fills the band edge to edge, cropped to fit;
   "is-framed" keeps its shape, centered, at most its own pixel height
   (--pt-image-height). On phones the image stays below the menu, within the
   page margins. */
.pt-event {
  --pt-band: min(max(56.25vw, 24rem), 85svh);
}

.pt-event__image {
  position: relative;
}

.pt-event__image img {
  display: block;
}

.pt-event__image.is-framed {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto !important;
}

.pt-event__image.is-framed img {
  width: auto;
  max-width: 100%;
  height: min(var(--pt-band), var(--pt-image-height));
  object-fit: cover;
}

.pt-event__image.is-bleed img {
  width: 100%;
  height: var(--pt-band);
  object-fit: cover;
}

@media (max-width: 599px) {
  .pt-event {
    --pt-band: 62vw;
    padding-top: var(--wp--preset--spacing--50);
  }

  .pt-event__image.is-bleed {
    margin-inline: 0 !important;
  }

  .pt-event__image.is-bleed img {
    height: auto;
  }
}

/* From 600px the header floats over the image (the sticky-logo rules above
   do that from 100rem). A soft shade at the top of the image keeps the white
   menu readable on bright photos. */
@media (min-width: 600px) {
  .pt-event-page {
    position: relative;
  }

  .pt-event-page > header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
  }

  .pt-event__image::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: min(12rem, 40%);
    background: linear-gradient(rgb(0 0 0 / 0.3), transparent);
    pointer-events: none;
  }

  /* No image: make room for the header (as in the sticky-logo rules) */
  .pt-event-page > main:not(:has(.pt-event__image)) {
    padding-top: calc(177px + var(--wp--preset--spacing--30));
  }
}

@media (min-width: 100rem) {
  .pt-page.pt-event-page > header {
    inset: 0;
  }

  .pt-page.pt-event-page > main {
    margin-top: 0;
  }
}

.pt-event__body {
  margin-top: var(--wp--preset--spacing--60);
}

.pt-event__facts > *,
.pt-event__text > * {
  margin-block: 0;
}

.pt-event__facts > * + *,
.pt-event__text > * + * {
  margin-top: 1.05em;
}

h1.pt-event__title {
  font-size: var(--wp--preset--font-size--large);
}

.pt-event__credit,
.pt-event__nav {
  font-size: var(--wp--preset--font-size--x-small);
}

.pt-event__nav {
  margin-top: var(--wp--preset--spacing--60);
}

.pt-event__nav > * {
  flex: 1 1 0;
  margin: 0;
}

.pt-event__program {
  text-align: center;
}

.pt-event__next {
  text-align: right;
}

/* Arrows on the previous/next links. Switzer has no arrow glyphs, so it's an
   SVG mask in the text color. Inline-block keeps the hover underline off it. */
.pt-event__previous a::before,
.pt-event__next a::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.7em;
  vertical-align: -0.02em;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M0 7h16M10 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.pt-event__previous a::before {
  margin-right: 0.4em;
  transform: scaleX(-1);
}

.pt-event__next a::after {
  margin-left: 0.4em;
}