/*!
 * ursula.philippi.ro — enhancement layer, 2026-07-26
 *
 * Loaded AFTER the original template stylesheets, so it only overrides what it
 * needs to. Existing breakpoints (480px / 960px) are kept so this stays
 * consistent with the original responsive.css.
 *
 * Covers: responsive image grid, lightbox, mobile nav toggle.
 */

/* ---------------------------------------------------------- responsive media */

/* Never let an image or embed overflow its column - the single most important
   rule for the old fixed-width TYPO3 markup on a phone. */
#rci_left_column img,
#rci_right_column img,
.csc-textpic img,
.csc-textpic-imagewrap img {
  max-width: 100%;
  height: auto;
}

img { border: 0; }

/* TYPO3 baked GALLERIES into fixed rows and columns, so pictures could not
   reflow. Collapsing the row/column wrappers with display:contents lets every
   picture become a direct grid item, giving one even grid (4 across on desktop)
   instead of TYPO3's ragged 2-3-2 grouping.

   IMPORTANT: this must apply to gallery blocks ONLY. The "intext" variants
   (csc-textpic-intext-right on the CV, csc-textpic-intext-left-nowrap on the
   recordings page) rely on floats so the text wraps beside the picture -
   turning those into a flex container destroys the layout. */
.csc-textpic:not([class*="intext"]) .csc-textpic-imagewrap {
  /* auto-fitting grid: as many even columns as the content width allows
     (4 across in the ~630px content column, fewer on narrow screens) */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
  align-items: start;
  /* TYPO3 puts an explicit pixel width on the wrap based on how many columns
     it originally rendered; without clearing it the grid collapses to one
     column. */
  width: auto !important;
  max-width: 100%;
  float: none !important;
}

.csc-textpic:not([class*="intext"]) .csc-textpic-imagewrap .csc-textpic-imagerow,
.csc-textpic:not([class*="intext"]) .csc-textpic-imagewrap .csc-textpic-imagecolumn {
  display: contents;
}

.csc-textpic:not([class*="intext"]) .csc-textpic-imagewrap .csc-textpic-image {
  float: none;
  margin: 0;
  width: auto;
  max-width: 100%;
}

/* Uniform gallery thumbnails. NOTE the #rci_* prefixes: the generic rule
   "#rci_left_column img { height: auto }" further up uses an ID and would
   otherwise win, leaving the heights ragged. */
#rci_left_column .csc-textpic:not([class*="intext"]) .csc-textpic-image img,
#rci_right_column .csc-textpic:not([class*="intext"]) .csc-textpic-image img,
.csc-textpic:not([class*="intext"]) .csc-textpic-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 150px;
  /* contain, not cover: the gallery mixes portrait sheet-music scans with
     landscape photos, and cropping would hide the very part that identifies
     them. Letterboxing keeps the grid tidy without losing content. */
  object-fit: contain;
  border-radius: 3px;
  background: #f4f2ee;
  transition: opacity .15s ease, transform .15s ease;
}

/* Text-wrap images keep their natural proportions - just stop them overflowing. */
.csc-textpic[class*="intext"] .csc-textpic-image img {
  max-width: 100%;
  height: auto;
}

/* Clickable thumbnails get a subtle affordance. */
a[data-lightbox] { display: inline-block; line-height: 0; cursor: zoom-in; }
a[data-lightbox]:hover img,
a[data-lightbox]:focus-visible img { opacity: .82; transform: scale(1.02); }
a[data-lightbox]:focus-visible { outline: 2px solid #7a6a52; outline-offset: 2px; }

/* Captions under images should not inherit the fixed pixel widths. */
.csc-textpic-caption { max-width: 100%; }

/* Tables (the organ stop list) must scroll rather than break the layout. */
#rci_left_column table { max-width: 100%; }

@media all and (max-width: 480px) {
  #rci_left_column .csc-textpic:not([class*="intext"]) .csc-textpic-image img,
  .csc-textpic:not([class*="intext"]) .csc-textpic-image img {
    height: 112px;
  }
  .csc-textpic:not([class*="intext"]) .csc-textpic-imagewrap {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
  }
}

/* --------------------------------------------------------------- mobile nav */
/* site.js builds a self-contained menu (.m-bar + .m-panel) from the same links
   and we hide the legacy chrome below 960px. Fighting the original markup was
   not workable: the bar is display:none there, its <ul> is floated with
   white-space:nowrap, and the flag strip is absolutely positioned over the top.
   Desktop is untouched - everything here is inside the media query. */

.m-bar, .m-panel { display: none; }

@media all and (max-width: 960px) {
  body {
    display: flex;
    flex-direction: column;
    height: auto;          /* style.css sets height:100%, which fights the column */
    min-height: 0;
    margin: 0;
    padding: 0 12px 24px;
    overflow-x: hidden;
  }
  body > * { max-width: 100%; }

  /* the absolutely-positioned desktop columns must dissolve */
  #left_container { display: contents; }

  /* 1. header bar: logo left, Menu button right */
  #logo_container {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    margin: 0;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid #DFD8D2;
    background: none;
    text-align: left;
  }
  /* responsive.css renders the logo as a zero-size box sized by
     "padding: 93px 108px 0 0" plus a background image, so max-height on the
     element does nothing. Keep the crop, scale it down. */
  #logo_container #logo,
  #logo_container img.logo {
    width: 0;
    height: 0;
    padding: 52px 62px 0 0;
    background-image: url('/fileadmin/template/main/img/tuburi_3.jpg');
    background-size: cover;
    background-position: left top;
    margin: 0;
    border: 1px solid #5a5250;
    flex: 0 0 auto;
  }

  .m-bar { display: block; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    background: #8E1F0D;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
  }
  .nav-toggle:hover { background: #a82c17; }
  .nav-toggle:focus-visible { outline: 2px solid #333; outline-offset: 2px; }
  .nav-toggle svg { display: block; }

  /* 2. the menu panel itself */
  .m-panel {
    order: 2;
    display: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #DFD8D2;
  }
  .m-panel.m-open { display: block; }
  .m-panel ul { margin: 0; padding: 0; list-style: none; }
  .m-panel li { margin: 0; padding: 0; }
  .m-panel li a {
    display: block;
    padding: 12px 2px;
    border-top: 1px solid #DFD8D2;
    color: #8E1F0D;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.35;          /* long labels wrap instead of colliding */
    text-align: left;
    text-decoration: none;
    overflow-wrap: break-word;
  }
  /* a sub-page sits one level under its parent */
  .m-panel li.m-sub a {
    padding-left: 24px;
    font-size: 15px;
    font-weight: normal;
  }
  .m-panel li.m-sub a::before {
    content: "\2013\00a0";     /* en dash + nbsp */
    color: #9c8f80;
  }
  .m-panel li a:hover,
  .m-panel li a:focus { background: #EDE9E6; }
  .m-panel li a.is-current { color: #7A6D62; background: #EDE9E6; }
  .m-flags {
    display: flex;
    gap: 14px;
    padding: 12px 2px;
    border-top: 1px solid #DFD8D2;
  }
  .m-flags img { height: 14px; width: auto; display: block; }

  /* 3. hide the legacy navigation chrome */
  #nav, .navbar, #flags_container, #navbar_fade { display: none !important; }

  /* 4. content */
  #right_container_outer {
    order: 3;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    left: auto;
    top: auto;
  }
  #right_container_inner { width: auto; margin: 12px 0 0; padding: 0; }
  #rci_left_column { position: static; width: auto; margin: 0; padding: 0 10px; }
  #footer { width: auto; }

  /* responsive.css pulls the first heading up by 85px between 481 and 960px
     ("#rci_left_column h1:first-of-type { position:relative; top:-85px }") to
     compensate for the layout the old responsive.js produced. That layout is
     gone, so the offset just drags the heading over the menu. Below 480px the
     original stylesheet already resets it, which is why the bug only shows on
     mid-size screens. */
  /* responsive.css carries a set of hacks that apply ONLY between 481 and 960px
     and are reset again below 480px - they compensated for the layout the old
     responsive.js built by moving DOM nodes. That layout is gone, so in that
     band they misfire: the heading is dragged up 85px and its wrapper is pinned
     to 10px, which lets the following floated image ride up over the title.
     Make the whole range behave like the (correct) sub-480px design. */
  #rci_left_column .csc-header,
  #rci_left_column .csc-header.csc-header-n1 {
    height: auto !important;
    overflow: visible;
  }
  #rci_left_column h1:first-of-type {
    position: static !important;
    top: auto !important;
    background-image: url('/fileadmin/template/main/img/leafs_brown.jpg') !important;
    background-repeat: no-repeat;
    font-size: 22px !important;
    margin: .5em 0 .3em !important;
    padding: .4em 0 .3em 3.3em !important;
    line-height: 1.25;
  }

  /* the sub-menu block inside the old left column is cloned into the panel */
  #left_quote,
  #left_container > div:not(#logo_container) { display: none; }
}

/* ----------------------------------------------------------------- lightbox */

body.lb-lock { overflow: hidden; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 18, 15, .93);
}
.lb.lb-on { display: flex; }

.lb-fig {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.lb-img {
  max-width: 100%;
  /* leave room for the caption */
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  background: #2a2622;
}

.lb-cap {
  color: #e8e2d8;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  max-width: 70ch;
}

.lb button {
  position: absolute;
  background: none;
  border: 0;
  color: #f2ede4;
  cursor: pointer;
  line-height: 1;
  padding: 12px;
  border-radius: 4px;
}
.lb button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lb-close { top: 8px; right: 12px; font-size: 34px; }
.lb-prev  { left: 8px;  font-size: 48px; }
.lb-next  { right: 8px; font-size: 48px; }

@media all and (max-width: 480px) {
  .lb { padding: 12px; }
  .lb-prev, .lb-next { font-size: 34px; padding: 8px; }
  .lb-img { max-height: calc(100vh - 150px); }
  /* keep the arrows clear of the image on small screens */
  .lb-prev { left: 0; }
  .lb-next { right: 0; }
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  a[data-lightbox]:hover img,
  a[data-lightbox]:focus-visible img { transform: none; }
  .csc-textpic .csc-textpic-image img { transition: none; }
}