/* ==========================================================================
   Villa Restaurant Soemmerda - Layout
   ==========================================================================
   Container, Grids, Sektionen, Spacing Utilities.
   ========================================================================== */


/* === Container =========================================================== */

.container {
  width: 100%;
  max-width: var(--vr-container-xl);
  margin-inline: auto;
  padding-inline: var(--vr-space-md);
}

.container-sm  { max-width: var(--vr-container-sm); }
.container-md  { max-width: var(--vr-container-md); }
.container-lg  { max-width: var(--vr-container-lg); }
.container-xl  { max-width: var(--vr-container-xl); }
.container-2xl { max-width: var(--vr-container-2xl); }
.container-prose { max-width: var(--vr-container-prose); }

@media (min-width: 768px) {
  .container {
    padding-inline: var(--vr-space-xl);
  }
}


/* === Sektion (Long Scroll Home) ========================================= */

.section {
  padding-block: var(--vr-section-pad-y);
  position: relative;
}

.section + .section {
  border-top: 1px solid var(--vr-linie-soft);
}

.section-creme    { background: var(--vr-creme); }
.section-papier   { background: var(--vr-papier); }
.section-tief     { background: var(--vr-creme-tief); }
.section-burgund  { background: var(--vr-burgund); color: var(--vr-text-on-burgund); }
.section-anthrazit { background: var(--vr-anthrazit); color: var(--vr-text-on-dark); }


/* === Sektion Header (Eyebrow + Headline + Body) ========================= */

.section-head {
  max-width: var(--vr-container-md);
  margin-bottom: var(--vr-space-2xl);
}

.section-head .lead {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-lg);
  line-height: var(--vr-leading-relaxed);
  color: var(--vr-text-secondary);
  margin-top: var(--vr-space-md);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}


/* === Grid System ========================================================= */

.grid {
  display: grid;
  gap: var(--vr-space-md);
}

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

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

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

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--vr-space-lg); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--vr-space-md); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--vr-space-lg); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--vr-space-lg); }
}


/* === Two Column (Bild + Text) ============================================ */

.split {
  display: grid;
  gap: var(--vr-space-xl);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--vr-space-xl), 6vw, var(--vr-space-3xl));
  }

  .split--reverse > :first-child { order: 2; }
  .split--reverse > :last-child  { order: 1; }

  .split--narrow-text {
    grid-template-columns: 5fr 4fr;
  }

  .split--wide-text {
    grid-template-columns: 4fr 5fr;
  }
}


/* === Stack (vertikales Spacing) ========================================== */

.stack > * + * {
  margin-top: var(--vr-space-md);
}

.stack-sm > * + * { margin-top: var(--vr-space-2xs); }
.stack-lg > * + * { margin-top: var(--vr-space-lg); }
.stack-xl > * + * { margin-top: var(--vr-space-xl); }


/* === Cluster (horizontales Wrapping) ===================================== */

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vr-space-sm);
  align-items: center;
}

.cluster-sm { gap: var(--vr-space-2xs); }
.cluster-lg { gap: var(--vr-space-md); }


/* === Center (Inhalte zentrieren) ========================================= */

.center {
  text-align: center;
}

.center-x {
  display: block;
  margin-inline: auto;
}


/* === Wrap Stack ========================================================== */

.wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vr-space-md);
}


/* === Hero Layout ========================================================= */

.hero {
  position: relative;
  min-height: 80svh;
  display: grid;
  align-items: center;
  padding-block: var(--vr-space-4xl) var(--vr-space-3xl);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 2;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(26, 20, 16, 0.20) 0%,
    rgba(26, 20, 16, 0.45) 60%,
    rgba(26, 20, 16, 0.75) 100%
  );
}


/* === Aspect Ratio Helpers ================================================ */

.ar-square    { aspect-ratio: var(--vr-ratio-square); }
.ar-portrait  { aspect-ratio: var(--vr-ratio-portrait); }
.ar-landscape { aspect-ratio: var(--vr-ratio-landscape); }
.ar-wide      { aspect-ratio: var(--vr-ratio-wide); }
.ar-cinema    { aspect-ratio: var(--vr-ratio-cinema); }
.ar-hero      { aspect-ratio: var(--vr-ratio-hero); }

.media-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* === Spacer Utilities ==================================================== */

.mt-0   { margin-top: 0; }
.mt-sm  { margin-top: var(--vr-space-sm); }
.mt-md  { margin-top: var(--vr-space-md); }
.mt-lg  { margin-top: var(--vr-space-lg); }
.mt-xl  { margin-top: var(--vr-space-xl); }
.mt-2xl { margin-top: var(--vr-space-2xl); }

.mb-0   { margin-bottom: 0; }
.mb-sm  { margin-bottom: var(--vr-space-sm); }
.mb-md  { margin-bottom: var(--vr-space-md); }
.mb-lg  { margin-bottom: var(--vr-space-lg); }
.mb-xl  { margin-bottom: var(--vr-space-xl); }
.mb-2xl { margin-bottom: var(--vr-space-2xl); }


/* === Sticky Helper ======================================================= */

.sticky-top {
  position: sticky;
  top: 0;
  z-index: var(--vr-z-sticky);
}