/* Responsibility: every breakpoint override. Loads last. */

/* --- Tablet and below --- */
@media (max-width: 980px) {
  .hero-inner,
  .studio-shell,
  .review-shell,
  .final-shell {
    grid-template-columns: 1fr;
  }

  .studio-shell .camera-stage {
    order: 1;
  }

  .editor-shell {
    grid-template-columns: 1fr;
  }

  .editor-panel {
    position: static;
  }

  .studio-shell .panel,
  .studio-shell .studio-aside {
    order: 2;
    max-height: none;
  }

  .live-preview {
    max-height: none;
  }

  .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .highlight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .review-grid-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .live-preview {
    min-height: 460px;
  }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .shell {
    padding: var(--space-3) var(--space-3) var(--space-6);
  }

  .hero {
    padding: var(--space-6) 0 var(--space-5);
  }

  .hero-visual {
    padding: 0;
  }

  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .template-grid,
  .option-grid,
  .filter-grid,
  .sticker-grid,
  .meta-list,
  .swatch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .selection-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-grid-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-grid-panel {
    padding: var(--space-4);
  }

  .how-it-works {
    padding: var(--space-5) 0;
  }

  .camera-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-3);
  }

  .capture-rail {
    justify-content: center;
  }

  .timer-control {
    align-items: center;
    justify-self: center;
  }

  .camera-header {
    flex-wrap: wrap;
  }

  .capture-thumbs {
    justify-content: center;
  }

  .live-preview {
    min-height: 380px;
  }

  .review-stage,
  .viewer-body {
    min-height: 0;
  }

  .viewer-actions > * {
    width: 100%;
  }

  #toast,
  .toast {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    max-width: none;
  }

  .modal-foot {
    flex-direction: column-reverse;
  }

  .modal-foot > * {
    width: 100%;
  }
}

/* Capture-console layout: confined to the Create camera screen. */
.studio-body .studio {
  min-height: 0;
  padding: 10px 40px 14px;
}

.studio-body .studio-head {
  width: min(100%, 1000px);
  align-items: center;
  margin: 0 auto 8px;
}

.studio-body .studio-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  line-height: 1.08;
}

.studio-body .studio-sub {
  max-width: 44rem;
  margin: 4px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.studio-body .studio-head-actions {
  gap: 8px;
}

.studio-body .studio-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 10px;
  width: min(100%, 1000px);
  margin: 0 auto;
}

.studio-body .studio-shell > .camera-stage {
  width: min(100%, 900px);
  flex: none;
  gap: 7px;
  padding: 12px clamp(14px, 2vw, 22px);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(23, 6, 10, 0.2);
}

.studio-body .camera-toolbar {
  min-height: 28px;
}

.studio-body .camera-toolbar-status {
  gap: 6px;
}

.studio-body .camera-toolbar .camera-pill {
  padding: 4px 8px;
  font-size: 0.66rem;
}

.studio-body .camera-toolbar #cameraStatusPill::before {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #ae8955;
  content: "";
}

.studio-body .camera-toolbar #cameraStatusPill[data-status="live"]::before {
  background: #43835c;
}

.studio-body .camera-toolbar #cameraStatusPill[data-status="error"]::before {
  background: #4b101b;
}

.studio-body .capture-counter {
  padding: 5px 9px;
}

.studio-body .camera-view-grid {
  display: grid;
  grid-template-columns: clamp(68px, 7vw, 92px) minmax(0, 640px) clamp(68px, 7vw, 92px);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-content: center;
  gap: 7px clamp(8px, 1.1vw, 14px);
  width: 100%;
}

.studio-body .camera-view-grid > .live-preview {
  grid-column: 2;
  grid-row: 1 / 4;
  width: min(100%, 640px, max(360px, calc((100svh - 440px) * 4 / 3)));
  max-height: none;
  aspect-ratio: 4 / 3;
}

.studio-body .capture-rail {
  display: contents;
}

.studio-body .thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-color: rgba(174, 137, 85, 0.55);
  border-radius: 6px;
}

.studio-body .thumb.empty {
  display: grid;
  place-items: center;
  background: rgba(233, 222, 206, 0.52);
}

.studio-body .thumb.empty.is-next {
  border-style: solid;
  background: #eee5d8;
}

.studio-body .thumb-placeholder {
  color: rgba(86, 58, 41, 0.54);
  font-family: var(--font-display);
  font-size: 1rem;
}

.studio-body .thumb.empty.is-next .thumb-placeholder {
  color: #4b101b;
}

.studio-body .thumb-index {
  top: -5px;
  right: -5px;
  bottom: auto;
  min-width: 18px;
  height: 18px;
  border-color: #f5efe5;
  background: #4b101b;
  font-size: 0.62rem;
}

.studio-body .capture-status-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: auto;
  min-height: 28px;
  color: #725a4c;
  font-size: 0.72rem;
}

.studio-body .capture-idle-label {
  display: block;
  width: 100%;
  text-align: center;
}

.studio-body .capture-idle-label[hidden] {
  display: none;
}

.studio-body .sequence-bar {
  position: static;
  width: min(100%, 640px, max(360px, calc((100svh - 440px) * 4 / 3)));
  padding: 0;
  transform: none;
  color: #4b101b;
  background: transparent;
  backdrop-filter: none;
}

.studio-body .sequence-bar[hidden] {
  display: none;
}

.studio-body .sequence-fill {
  background: #ae8955;
}

.studio-body .capture-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 6px 10px;
  width: min(100%, 640px, max(360px, calc((100svh - 440px) * 4 / 3)));
  margin: 0 auto;
}

.studio-body .capture-controls > .tool-group:first-child {
  grid-column: 1;
  grid-row: 1;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}

.studio-body .capture-controls > .shutter {
  grid-column: 2;
  grid-row: 1;
  width: 58px;
  height: 58px;
}

.studio-body .shutter-ring {
  border: 2px solid #4b101b;
}

.studio-body .shutter-core {
  width: 44px;
  height: 44px;
  border: 2px solid #4b101b;
  background: #fbf6ea;
  box-shadow: 0 3px 8px rgba(43, 9, 16, 0.16);
}

.studio-body .shutter.is-complete .shutter-ring {
  border-color: #ae8955;
}

.studio-body .shutter.is-complete .shutter-core {
  background: #fbf6ea;
}

.studio-body .capture-controls > .tool-group--icons {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  gap: 3px;
}

.studio-body .capture-controls .toggle-btn {
  min-width: 33px;
  min-height: 30px;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 0.68rem;
}

.studio-body .capture-controls .tool-btn {
  min-width: 42px;
  min-height: 40px;
  gap: 2px;
  padding: 4px;
  border-radius: 6px;
  font-size: 0.57rem;
}

.studio-body .studio-shell > .studio-continue-btn {
  position: static;
  justify-self: end;
  min-width: 174px;
  min-height: 42px;
  margin: 0 2px 0 0;
  padding: 8px 12px;
  color: #f5efe5;
  background: #4b101b;
  border: 1px solid #ae8955;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(20, 5, 8, 0.18);
  font-size: 0.8rem;
}

.studio-body .studio-shell > .studio-continue-btn:disabled {
  color: rgba(245, 239, 229, 0.72);
  background: #4b101b;
  border-color: rgba(174, 137, 85, 0.55);
  opacity: 0.78;
}

.studio-body .studio-shell > .studio-continue-btn:not(:disabled):hover {
  color: #f5efe5;
  background: #651c2a;
}

@media (min-width: 761px) and (max-height: 800px) {
  .studio-body .studio {
    padding-top: 6px;
    padding-bottom: 8px;
  }

  .studio-body .studio-head {
    margin-bottom: 5px;
  }

  .studio-body .camera-stage {
    gap: 5px;
    padding-block: 9px;
  }

  .studio-body .camera-toolbar {
    min-height: 25px;
  }

  .studio-body .camera-view-grid {
    row-gap: 5px;
  }

  .studio-body .capture-controls > .shutter {
    width: 52px;
    height: 52px;
  }

  .studio-body .shutter-core {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 760px) {
  .studio-body .studio {
    padding: 12px 14px 20px;
  }

  .studio-body .studio-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
  }

  .studio-body .studio-head-actions {
    margin-left: auto;
  }

  .studio-body .studio-shell {
    gap: 10px;
  }

  .studio-body .camera-stage {
    gap: 8px;
    padding: 12px;
  }

  .studio-body .camera-view-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px;
  }

  .studio-body .capture-rail {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 7px;
  }

  .studio-body .camera-view-grid .capture-rail .thumb:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    width: min(100%, 120px);
    justify-self: center;
  }

  .studio-body .camera-view-grid > .live-preview {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 580px);
  }

  .studio-body .capture-controls {
    width: 100%;
    gap: 4px;
  }

  .studio-body .capture-controls > .tool-group:first-child {
    gap: 4px;
  }

  .studio-body .capture-controls .toggle-btn {
    min-width: 28px;
    padding-inline: 5px;
  }

  .studio-body .capture-controls .tool-btn {
    min-width: 38px;
  }

  .studio-body .studio-shell > .studio-continue-btn {
    min-height: 42px;
  }
}

@media (max-width: 390px) {
  .studio-body .studio {
    padding-inline: 10px;
  }

  .studio-body .studio-title {
    font-size: 1.35rem;
  }

  .studio-body .studio-head-actions .ghost-btn {
    padding-inline: 6px;
    font-size: 0.61rem;
  }

  .studio-body .camera-toolbar .camera-pill {
    padding-inline: 5px;
    font-size: 0.57rem;
  }
}