/* ============================================================
   LAYOUT — page-level structure, section rhythm, grid
============================================================ */

/* Each section sits above the fixed background stage */
.section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  width: 100%;
}

/* Constrained content column */
.case__inner,
.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-l);
}

/* Case sections: tighter top padding — large title commands its own space */
.case__inner {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-l);
  padding-top: 80px;
}

/* Tighter bottom on Trainerize — achievements fade creates the breathing room */
#case-3 .case__inner {
  padding-bottom: var(--space-l);
}

/* Meta row */
.case__meta {
  display: flex;
  gap: var(--space-xl);
}

.meta__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Media area — full-width within section */
.case__media {
  width: 100%;
  min-height: 60vh;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

/* Sugar AI: carousel sits directly under the hero caption,
   above the detail panels (visual order differs from DOM order). */
#case-1 .case__media > .carousel { order: 1; }
#case-1 .case__media > .case__pattern-row { order: 2; }

/* Hero panel — sits above the carousel, same panel geometry */
.case__hero-panel {
  width: 100%;
  height: 647px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px;
  margin-bottom: 48px;
}

.case__hero-panel--usermind {
  height: 705px;
}

.case__hero-panel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Tablet */
@media (max-width: 1024px) {
  .case__inner,
  .footer__inner {
    padding: var(--space-xl) var(--space-m);
  }

  .case__meta {
    gap: var(--space-l);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .case__inner,
  .footer__inner {
    padding: var(--space-l) var(--space-s);
  }

  .case__meta {
    flex-direction: column;
    gap: var(--space-m);
  }

  .case__media {
    min-height: 40vh;
  }
}