/* Share the PC Builds content width, frames, glow, and mobile breakpoint. */
.pc-builds-content.dog-photography-event { max-width: none; }
.dog-photography-event #event-description { max-width: 65ch; }
.dog-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.dog-tabs button { min-height: 48px; padding: 8px 0 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 20px; cursor: pointer; }
.dog-tabs [aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }
.dog-media-page button:not(:where(.plyr button)):focus-visible, .dog-media-page [role="tabpanel"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.dog-event-card { text-decoration: none; }
.dog-event-card h2 { font-size: 20px; }
.dog-event-count { margin: 4px 0 0; color: var(--muted); font-size: 17px; }
.dog-placeholder { display: grid; place-content: center; gap: 8px; width: 100%; min-height: 180px; padding: 24px; color: var(--muted); text-align: center; background: var(--surface); }
.dog-placeholder strong { font-size: 20px; font-weight: 600; color: var(--text); }
.dog-sample-label { display: inline-block; color: var(--muted); font-size: 15px; margin-top: 8px; }
.dog-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 24px; align-items: start; }
.dog-photo-grid--masonry { grid-auto-rows: 1px; row-gap: 0; }
.dog-photo { border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.dog-photo-frame { display: grid; min-width: 0; min-height: 0; }
.dog-photo img { display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: contain; }
.dog-photo .dog-placeholder { height: 100%; min-height: 0; }
.dog-video-poster { aspect-ratio: var(--video-ratio, 16 / 9); width: min(100%, 420px, calc(70dvh * 9 / 16)); margin-inline: auto; }
.dog-video-poster[hidden] { display: none; }
.dog-photo:disabled { cursor: default; }
.dog-video-event #event-heading { max-width: 420px; margin: 0 auto 8px; text-align: center; overflow-wrap: break-word; }
.dog-video-event .dog-video-date { margin: 0 0 24px; text-align: center; color: var(--muted); font-size: 17px; }
.dog-video-list { display: grid; gap: 24px; overflow-anchor: none; }
.dog-video-entry { width: min(100%, var(--video-max-width, 420px), calc(70svh * var(--video-aspect, .5625))); min-width: min(100%, 280px); margin-inline: auto; }
.dog-video-entry h2 { margin: 0 0 12px; font-size: 24px; }
.dog-video-entry > p { margin: 0 0 14px; }
.dog-video-entry video { display: block; width: 100%; aspect-ratio: var(--video-ratio, 16 / 9); height: auto; object-fit: contain; background: #000; }
.dog-video-player { position: relative; }
.dog-video-player .plyr { --plyr-color-main: var(--accent); }
/* Only the existing volume input is moved into this popup; Plyr keeps its bindings. */
.dog-video-player .dog-volume-popup { position: absolute; bottom: 100%; left: 16px; transform: translateX(-50%); width: 44px; height: 140px; background: rgb(24 23 22 / 95%); border-radius: var(--plyr-control-radius, 4px); }
.dog-video-player .dog-volume-popup[hidden] { display: none; }
.dog-video-player .dog-volume-popup input[data-plyr="volume"] { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); width: 112px; min-width: 0; max-width: none; height: 44px; margin: 0; touch-action: none; }
.dog-video-player .dog-volume-toggle { display: none; }
@media (any-pointer: coarse) {
  .dog-video-player .dog-volume-toggle { display: inline-block; min-width: 44px; min-height: 44px; }
}
/* Keep the local poster while the first user-requested media buffer arrives. */
.dog-video-player.is-initializing .plyr__poster { opacity: 1; }
.dog-video-retry, .dog-video-start { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.dog-video-start { position: absolute; inset: 45% auto auto 50%; transform: translateX(-50%); }
.dog-video-start[hidden], .dog-video-retry[hidden] { display: none; }
.dog-video-error { color: var(--muted); }
.dog-video-selector { min-width: 0; max-width: 100%; overflow-x: auto; padding: 8px; scrollbar-width: thin; }
.dog-video-thumbnails { display: flex; gap: 12px; width: max-content; margin-inline: auto; }
.dog-video-choice { display: grid; align-content: start; gap: 8px; flex: 0 0 116px; width: 116px; min-height: 44px; padding: 6px; border: 2px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.dog-video-choice:hover { background: rgb(255 255 255 / 5%); color: var(--text); }
.dog-video-choice[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.dog-media-page .dog-video-choice:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.dog-video-thumbnail { display: grid; place-items: center; width: 100%; aspect-ratio: 6 / 5; background: var(--background); }
.dog-video-thumbnail img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.dog-video-entry .dog-placeholder { border: 1px solid var(--line); border-radius: 6px; aspect-ratio: 16 / 9; }
html:has(.dog-lightbox[open]) { overflow: hidden; }
.dog-lightbox {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  overflow: hidden;
}
.dog-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.dog-lightbox-toolbar { position: static; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 0 0 12px; background: transparent; }
/* A two-line title area keeps the Close control and photo row steady.
   Exceptionally long titles can scroll here instead of consuming photo space. */
.dog-lightbox h2 { grid-column: 2; min-width: 0; height: 44px; margin: 0; font-size: 18px; line-height: 22px; text-align: center; align-content: safe center; overflow: auto; overflow-wrap: anywhere; }
.dog-lightbox #lightbox-close { grid-column: 3; }
.dog-lightbox .dog-lightbox-control { display: grid; place-items: center; flex-shrink: 0; width: 44px; min-width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; color: #fff; }
.dog-lightbox .dog-lightbox-control:hover { background: rgb(255 255 255 / 8%); }
.dog-lightbox .dog-lightbox-control:focus-visible { outline: none; background: rgb(255 255 255 / 20%); }
.dog-lightbox.is-arrow-navigation :is(#previous-photo, #next-photo):focus-visible { background: transparent; box-shadow: none; }
.dog-lightbox.is-arrow-navigation :is(#previous-photo, #next-photo):hover { background: rgb(255 255 255 / 8%); }
.dog-lightbox.is-pointer-navigation .dog-lightbox-control:focus-visible { background: transparent; box-shadow: none; }
.dog-lightbox.is-pointer-navigation .dog-lightbox-control:hover { background: rgb(255 255 255 / 8%); }
.dog-lightbox h2:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.dog-lightbox .dog-lightbox-control[hidden] { display: none; }
.dog-lightbox-stage, .dog-lightbox .dog-lightbox-control { -webkit-user-select: none; user-select: none; }
.dog-lightbox-stage { display: grid; width: min(100%, 1400px); justify-self: center; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 4px; min-height: 0; }
.dog-lightbox-stage .dog-lightbox-control { position: relative; z-index: 1; }
.dog-lightbox #previous-photo { transform: translateX(var(--photo-arrow-inset, 0px)); }
.dog-lightbox #next-photo { transform: translateX(calc(-1 * var(--photo-arrow-inset, 0px))); }
.dog-lightbox-media { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; grid-column: 2; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.dog-lightbox-media img { display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.dog-lightbox-media .dog-placeholder { min-height: 0; height: 100%; padding: 12px; overflow: auto; }
.dog-lightbox-single .dog-lightbox-stage { grid-template-columns: minmax(0, 1fr); }
.dog-lightbox-single .dog-lightbox-media { grid-column: 1; }
.dog-lightbox-counter { margin: 0; padding-top: 12px; color: rgb(255 255 255 / 80%); text-align: center; font-size: 14px; }
@media (max-width: 600px) {
  .dog-photo-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: 24px; }
  /* Single-column flow needs no packing. Override old desktop placement
     immediately at the breakpoint, before the resize observer runs. */
  .dog-photo-grid > .dog-photo { grid-column: auto !important; grid-row: auto !important; }
}
@media (max-width: 600px), (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .dog-lightbox {
    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));
  }
  .dog-lightbox[open] { grid-template: auto minmax(0, 1fr) 48px / minmax(0, 1fr) auto minmax(0, 1fr); }
  .dog-lightbox-toolbar { grid-row: 1; grid-column: 1 / -1; gap: 6px; padding-bottom: 4px; }
  .dog-lightbox h2 { font-size: 16px; }
  /* Promote the same persistent controls into the dialog's bottom row.
     No side columns take width away from the mobile photo. */
  .dog-lightbox-stage { display: contents; }
  .dog-lightbox .dog-lightbox-media { grid-row: 2; grid-column: 1 / -1; }
  .dog-lightbox #previous-photo { grid-row: 3; grid-column: 1; justify-self: end; align-self: end; transform: none; }
  .dog-lightbox #next-photo { grid-row: 3; grid-column: 3; justify-self: start; align-self: end; transform: none; }
  .dog-lightbox-counter { grid-row: 3; grid-column: 2; align-self: end; display: grid; place-items: center; height: 44px; min-width: 72px; padding: 0 12px; }
}