/* ============================================
   HOFZWANZIG Layout Utilities
   Redesign "Elbufer" — Phase 1
   ============================================ */

/* ---- UTILITY: Spacing ---- */
.mt-3xs { margin-top: var(--space-3xs); }
.mt-2xs { margin-top: var(--space-2xs); }
.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }

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

.pt-sm  { padding-top: var(--space-sm); }
.pt-md  { padding-top: var(--space-md); }
.pb-sm  { padding-bottom: var(--space-sm); }
.pb-md  { padding-bottom: var(--space-md); }
.p-sm   { padding: var(--space-sm); }
.p-md   { padding: var(--space-md); }

/* ---- UTILITY: Flex ---- */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: start; }
.justify-center { justify-content: center; }
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }

/* ---- ASYMMETRIC GRIDS ---- */
.grid-60-40 {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.grid-40-60 {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-lg);
  align-items: center;
}
.grid-70-30 {
  display: grid;
  grid-template-columns: 2.3fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

/* ---- OVERLAP CARD ---- */
.overlap-card {
  position: relative;
}
.overlap-card__image {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
}
.overlap-card__content {
  position: relative;
  margin-top: calc(var(--space-xl) * -1);
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ---- PULL QUOTE ---- */
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-xl);
  color: var(--color-primary);
  line-height: var(--lh-heading);
  text-align: center;
  max-width: 50ch;
  margin: var(--space-md) auto;
  position: relative;
  padding: 0 var(--space-lg);
}
.pull-quote::before {
  content: '\201C';
  font-size: var(--type-4xl);
  color: var(--color-primary-200);
  position: absolute;
  top: -0.3em;
  left: 0;
  line-height: 1;
}

/* ---- GALLERY IMAGE ---- */
.gallery-img {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  height: 250px;
}

/* ---- MASONRY GRID ---- */
.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}
.masonry img {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.masonry img:hover {
  transform: scale(1.02);
}
.masonry .span-2 {
  grid-row: span 2;
  height: 100%;
}

/* ---- HORIZONTAL SCROLL ---- */
.horizontal-scroll {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-200) transparent;
}
.horizontal-scroll > * {
  flex: 0 0 80%;
  scroll-snap-align: center;
}
.horizontal-scroll img {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  height: 400px;
}

/* ---- ICON GRID ---- */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  text-align: center;
}
.icon-grid__item {
  padding: var(--space-md);
  background: var(--color-bg-warm);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.icon-grid__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.icon-grid__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-xs);
  display: block;
}

/* ---- OPENING HOURS (reusable) ---- */
.opening-hours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm);
}
.opening-hours__day {
  padding: var(--space-sm);
  background: var(--color-bg-warm);
  border-radius: var(--radius-md);
  text-align: center;
}
.opening-hours__day strong {
  display: block;
  margin-bottom: var(--space-3xs);
}
.opening-hours__day--closed {
  color: var(--color-text-muted);
}

/* ---- SVG WAVE DIVIDER ---- */
.wave-divider {
  width: 100%;
  height: 60px;
  display: block;
  margin: calc(var(--space-sm) * -1) 0;
  position: relative;
  z-index: 2;
}
.wave-divider--flip {
  transform: scaleY(-1);
}

/* ---- SCROLL INDICATOR ---- */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text-light);
  font-size: var(--type-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  opacity: 0.7;
  animation: scroll-bounce 2s ease-in-out infinite;
}
.scroll-indicator__line {
  width: 1px;
  height: 40px;
  background: currentColor;
  opacity: 0.5;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .grid-60-40,
  .grid-40-60,
  .grid-70-30 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .masonry { grid-template-columns: repeat(2, 1fr); }
  .masonry .span-2 { grid-row: span 1; }
  .icon-grid { grid-template-columns: repeat(2, 1fr); }
  .horizontal-scroll > * { flex: 0 0 85%; }
  .horizontal-scroll img { height: 300px; }
  .pull-quote { font-size: var(--type-lg); padding: 0 var(--space-sm); }
  .overlap-card__content {
    margin-left: var(--space-sm);
    margin-right: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }
}

@media (max-width: 640px) {
  .masonry { grid-template-columns: 1fr; }
  .icon-grid { grid-template-columns: 1fr; }
  .horizontal-scroll > * { flex: 0 0 90%; }
  .horizontal-scroll img { height: 250px; }
  .gallery-img { height: 200px; }
  .scroll-indicator { display: none; }
}