/**
 * Responsive safety: prevent horizontal clip, keep touch targets and titles visible.
 */

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  max-width: 100%;
}

main {
  overflow-x: clip;
  max-width: 100%;
}

/* Headlines: wrap at word boundaries only — no automatic syllable breaks (e.g. le-bendige). */
h1,
h2,
h3,
.section-title-deco {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}

.lead,
.region-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Region hub CTA — large type but stays inside viewport */
.chapter-band--regions .region-hub-link {
  padding-left: clamp(0.5rem, 3vw, 1rem);
  padding-right: clamp(0.5rem, 3vw, 1rem);
}

.chapter-band--regions .region-hub-link a {
  max-width: 100%;
  padding: 0 0.15rem;
}

/* Scatter: allow slight tilt without cropping the frame */
.scatter-thumb {
  overflow: visible;
}

/* Frame rotation lives on .scatter-thumb-face (see style.css / gallery-experience.css). */

.photo-scatter-section {
  overflow-x: clip;
  overflow-y: visible;
}

/* Atelier canvas must match box (game.js reads getBoundingClientRect) */
@media (max-width: 768px) {
  .atelier-canvas-wrap {
    height: clamp(260px, 50vh, 420px);
    min-height: 260px;
    max-height: min(420px, 58vh);
  }

  .section {
    padding-left: clamp(0.85rem, 4vw, 1.25rem);
    padding-right: clamp(0.85rem, 4vw, 1.25rem);
  }

  .header-inner {
    padding-left: clamp(0.75rem, 4vw, 1.25rem);
    padding-right: clamp(0.75rem, 4vw, 1.25rem);
  }

  .brand:not(.brand--logos) {
    font-size: clamp(0.92rem, 3.5vw, 1.05rem);
    max-width: calc(100% - 4.5rem);
  }

  .brand--logos {
    max-width: calc(100% - 4.5rem);
  }

  .brand__banner {
    max-width: min(240px, 52vw);
  }

  .site-nav.is-open {
    max-height: min(80vh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #region-search {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .atelier-toolbar {
    padding: 0.85rem clamp(0.65rem, 3vw, 1rem);
  }

  .atelier-toolbar .btn,
  .atelier-toolbar .btn-primary {
    flex: 1 1 auto;
    min-width: min(100%, 12rem);
    text-align: center;
  }

  .scatter-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
  }

  .photo-scatter-field--three-rows .scatter-thumb {
    flex: 0 1 calc(33.333% - 0.5rem);
    max-width: calc(33.333% - 0.5rem);
    min-width: 72px;
  }
}

@media (max-width: 480px) {
  .photo-scatter-field--three-rows .scatter-thumb {
    flex: 0 1 calc(50% - 0.4rem);
    max-width: calc(50% - 0.4rem);
  }

  .chapter-band--regions .region-hub-link a {
    font-size: clamp(1.35rem, 6.5vw, 1.85rem);
  }
}

/* Lightbox / reveal: keep framed art inside viewport on short screens */
@media (max-height: 640px), (max-width: 480px) {
  .paint-reveal-lightbox,
  #paint-reveal-lightbox {
    padding: 0.5rem;
    align-items: center;
  }

  #paint-reveal-canvas {
    max-height: min(78vh, 520px);
  }

  .gallery-lightbox-figure img {
    max-height: 85vh;
  }
}