/* Shared mobile refinements for public pages, admin tools and galleries. */
@media (max-width: 800px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: clip; }
  img, video, canvas, iframe { max-width: 100%; }
  input, select, textarea, button { max-width: 100%; }
  .admin-shell { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .admin-sidebar { min-width: 0; padding: 12px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .admin-sidebar > .eyebrow, .admin-sidebar > .hint { display: none; }
  .admin-sidebar nav { display: flex; position: static; flex-flow: row nowrap; gap: 7px; overflow-x: auto; overscroll-behavior-x: contain; padding: 8px 0 4px; border: 0; background: transparent; scrollbar-width: thin; }
  .admin-sidebar nav a { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; font-size: 13px; }
  .admin-sidebar .admin-switch { display: inline-flex; min-height: 36px; align-items: center; }
  .admin-main { min-width: 0; width: 100%; }
  .admin-main .page-intro, .admin-main > .page-intro { padding: 32px 6% 28px; }
  .admin-main h1, .page-intro h1 { font-size: clamp(32px, 7vw, 48px); line-height: 1.08; letter-spacing: -.04em; overflow-wrap: anywhere; }
  .admin-main h2 { font-size: clamp(22px, 5vw, 30px); line-height: 1.18; }
  .admin-main .section-pad { padding: 22px 6%; }
  .admin-main .panel, .admin-main .card, .admin-main .camera-server-card, .admin-main .camera-profile-card { min-width: 0; }
  .admin-main .admin-grid, .admin-main .camera-server-data, .admin-main .camera-profile-meta, .admin-main .camera-credential-list { grid-template-columns: minmax(0, 1fr); }
  .admin-main .admin-grid { padding-left: 0; padding-right: 0; }
  .admin-main form { min-width: 0; }
  .admin-main label { line-height: 1.4; overflow-wrap: anywhere; }
  .admin-main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  .admin-main select, .admin-main textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; }
  .admin-main input[type=checkbox], .admin-main input[type=radio] { width: 20px; height: 20px; flex: 0 0 auto; }
  .admin-main button, .admin-main .button, .admin-main input[type=submit] { min-height: 42px; }
  .admin-main .filter-form, .admin-main .press-library-toolbar, .admin-main .press-review-tools .filter-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .admin-main .filter-form > *, .admin-main .press-library-toolbar > * { width: 100%; min-width: 0; }
  .admin-main .table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .admin-main .table-wrap table { min-width: 620px; }
  .admin-main .table-wrap th, .admin-main .table-wrap td { padding: 9px 10px; }
  .press-lightbox { align-items: stretch; justify-content: flex-start; flex-direction: column; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); height: 100vh; height: 100dvh; box-sizing: border-box; }
  .press-lightbox-toolbar { flex: 0 0 auto; min-width: 0; gap: 8px; }
  .press-lightbox-toolbar > div:first-child { min-width: 0; }
  .press-lightbox-toolbar strong { display: block; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .press-lightbox-tools { flex: 0 0 auto; }
  .press-lightbox-workspace { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(180px, 1fr) minmax(0, 42dvh); flex: 1 1 auto; width: 100%; min-height: 0; overflow: hidden; }
  .press-lightbox-canvas { min-height: 0; padding: 10px 42px; background: linear-gradient(145deg, #171a1b, #303536); }
  .press-lightbox-figure { min-width: 0; min-height: 0; }
  .press-lightbox-figure img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .press-lightbox-figure figcaption { color: #e8ebed; }
  .press-exif-panel { position: static; inset: auto; z-index: auto; width: auto; min-width: 0; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; padding: 12px; box-shadow: none; }
  .press-lightbox.press-panel-collapsed .press-lightbox-workspace { grid-template-rows: minmax(0, 1fr) 0; }
  .press-lightbox.press-panel-collapsed .press-exif-panel { display: none; }
  .press-editor-tabs { position: sticky; top: -12px; z-index: 2; }
  .press-lightbox-edit { gap: 8px; }
  .press-lightbox-edit label { min-width: 0; line-height: 1.35; }
  .press-lightbox-edit input[type=range] { min-width: 0; min-height: 28px; }
  .press-compare-range { min-height: 36px; }
  .usp-strip { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 6%; }
  .usp-strip > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; gap: 0 8px; padding: 0; }
  .usp-strip > div > span:first-child { position: static; grid-column: 1; grid-row: 1; font-size: 12px; }
  .usp-strip strong { display: block; grid-column: 2; grid-row: 1; min-width: 0; font-size: 16px; line-height: 1.35; }
  .usp-strip p { grid-column: 2; grid-row: 2; margin: 2px 0 0; font-size: 14px; line-height: 1.5; }
  .press-media-masonry { columns: 2; column-gap: 12px; padding: 14px 4% 40px; }
  .press-event-grid { columns: 2; column-gap: 12px; padding: 12px 4% 36px; }
  .press-media-card, .press-event-photo { break-inside: avoid; }
  .press-review-tools .filter-form { grid-template-columns: minmax(0, 1fr); }
  .media-modal { box-sizing: border-box; width: calc(100vw - 16px); max-width: none; max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); margin: auto; }
  .media-modal-inner { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); }
  .media-modal-header { gap: 12px; padding: 14px 16px; }
  .media-modal-header h2 { font-size: 20px; }
  .media-modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px; }
  .live-dock { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }
  .live-toolbar { left: max(8px, env(safe-area-inset-left)) !important; right: max(8px, env(safe-area-inset-right)) !important; width: auto; max-height: min(45dvh, 280px); overflow: auto; overscroll-behavior: contain; }
}
@media (max-width: 520px) {
  .admin-main .page-intro, .admin-main > .page-intro { padding: 26px 5% 22px; }
  .admin-main h1, .page-intro h1 { font-size: clamp(29px, 8vw, 40px); }
  .admin-main .section-pad { padding: 18px 5%; }
  .admin-main .panel { padding: 16px; }
  .admin-main .camera-server-top, .admin-main .camera-profile-head { align-items: stretch; }
  .admin-main .camera-server-top button, .admin-main .camera-profile-head button { width: 100%; }
  .press-lightbox-toolbar { align-items: center; }
  .press-lightbox-tools .pill { min-height: 38px; padding: 7px 9px; font-size: 11px; }
  .press-lightbox-close { width: 38px; height: 38px; }
  .press-lightbox-workspace { grid-template-rows: minmax(150px, 1fr) minmax(0, 45dvh); }
  .press-exif-panel { padding: 10px; }
  .press-editor-tabs { gap: 6px; }
  .press-editor-tabs button { min-height: 38px; padding: 7px 9px; font-size: 12px; }
  .press-lightbox-edit { grid-template-columns: minmax(0, 1fr); }
  .press-media-masonry, .press-event-grid { column-gap: 9px; padding-right: 3%; padding-left: 3%; }
  .press-media-card-copy { padding: 10px; }
  .press-media-card h2, .press-media-card h3, .press-event-photo h2, .press-event-photo h3 { overflow-wrap: anywhere; }
  .media-modal-tabs { overflow-x: auto; padding: 10px 12px; }
  .media-modal-tab { flex: 0 0 auto; }
  .live-toolbar { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .press-media-masonry, .press-event-grid { columns: 1; }
  .admin-sidebar { padding-right: 10px; padding-left: 10px; }
  .admin-sidebar nav a { padding: 7px 10px; font-size: 12px; }
  .press-lightbox-tools [data-panel-toggle] { max-width: 116px; white-space: normal; line-height: 1.1; }
  .press-lightbox-canvas { padding-right: 34px; padding-left: 34px; }
}
.press-event-photo:has(> [data-review-image]) { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.press-event-photo > [data-review-image] { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: #272b2d; cursor: zoom-in; }
.press-event-photo > [data-review-image] img { display: block; width: 100%; height: auto; object-fit: contain; }
.press-review-decision { margin-top: 16px; }
.press-review-form textarea { width: 100%; box-sizing: border-box; }
.press-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Let the crop controls pan through the overflow created by zoom as well as
   the overflow provided by object-fit: cover. This matters for portrait
   images in the wide desktop hero, where object-position alone has no X range. */
.hero-frame {
  transform-origin: var(--hero-desktop-x, 50%) var(--hero-desktop-y, 50%);
  transition: opacity 1.2s, object-position .18s ease, transform .18s ease, transform-origin .18s ease;
}

/* Keep the portrait subject in view on narrow hero crops. */
@media (max-width: 720px) {
  .hero-frame {
    object-position: var(--hero-mobile-x,100%) var(--hero-mobile-y,50%);
    transform: scale(var(--hero-mobile-zoom,1));
    transform-origin: var(--hero-mobile-x, 100%) var(--hero-mobile-y, 50%);
  }
  .usp-journey.is-ready .usp-step {
    left: 50%;
    top: 50%;
    transform: translate3d(calc(-50% + var(--usp-offset-x, 0px)), calc(-50% + var(--usp-offset-y, 0px)), 0) scale(var(--usp-scale));
    will-change: transform, opacity;
  }
}

/* Mobile navigation: keep the brand and hamburger on one row, with language
   choices inside the expanded navigation panel. */
@media (max-width: 720px) {
  .site-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .site-header .brand {
    min-width: 0;
  }

  .site-header .menu-toggle {
    display: inline-flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    padding: 0;
    border: 1px solid #c8ccce;
    border-radius: 3px;
    background: transparent;
  }

  .site-header .menu-toggle span {
    display: block;
    width: 21px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .site-header .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .site-header .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-header.is-compact .menu-toggle {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
  }

  .site-header #navigation,
  .site-header #navigation.open {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    padding: 8px 7% max(18px, env(safe-area-inset-bottom));
    border-bottom: 1px solid var(--line);
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 12px 22px rgb(20 24 26 / 10%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
  }

  .site-header #navigation.open {
    display: flex;
  }

  .site-header #navigation > a {
    display: flex;
    min-height: 48px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgb(37 39 42 / 10%);
  }

  .site-header #navigation > a.account-admin-link {
    font-weight: 700;
  }

  .site-header #navigation > a.pill {
    align-self: flex-start;
    margin: 14px 0 8px;
    padding: 11px 18px;
    border: 1px solid #a1a4a6;
  }

  .site-header #navigation .language-switch {
    display: flex;
    gap: 18px;
    align-self: flex-start;
    margin: 12px 0 0;
    padding-top: 12px;
    font-size: 15px;
  }

  .site-header #navigation .language-switch a {
    padding: 6px 4px;
  }
}