/* Global layout fixes — bento overlap + blue MEG logo + overflow safety */

/* ── Bento: flex stack so labels never clip under dark UI panels ── */
.bento-cell {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.bento-label {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
  padding: 1rem 1.25rem 0 !important;
  font-size: clamp(0.65rem, 2vw, 0.72rem) !important;
  letter-spacing: 0.16em !important;
  line-height: 1.4 !important;
  z-index: 2 !important;
}

.bento-ui {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  flex: 1 1 auto !important;
  margin: 0.55rem 1.15rem 0 !important;
  min-height: 128px !important;
  width: auto !important;
  max-width: none !important;
}

.bento--tall .bento-ui.bento-ml-net {
  inset: auto !important;
  margin: 0.55rem 1.15rem 0 !important;
  min-height: 150px !important;
  padding: 0.55rem !important;
}

.bento-title {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
  margin-top: auto !important;
  padding: 0.9rem 1.25rem 1.1rem !important;
  z-index: 2 !important;
}

.bento--hero { min-height: 340px !important; }
.bento--tall { min-height: 400px !important; }
.bento--wide,
.bento--mid,
.bento--sm { min-height: 260px !important; }

@media (max-width: 768px) {
  .bento--hero { min-height: 320px !important; }
  .bento--tall { min-height: 380px !important; }
  .bento-label { padding: 0.9rem 1.1rem 0 !important; }
  .bento-ui { margin: 0.5rem 1rem 0 !important; min-height: 120px !important; }
}

/* Prevent horizontal scroll / text clipping on small screens */
.snot-admin__hero-lead,
.snot-admin__eyebrow,
.section-head p,
.hero-text {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* ── Full-site sharpen: hero CTAs always above ticker ── */
.hero {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.hero-actions {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 100%;
}

.hero-actions .btn {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .hero {
    min-height: auto !important;
    padding-bottom: calc(4.25rem + 56px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
  }

  .hero-ticker {
    z-index: 2 !important;
  }
}

@media (max-width: 480px) {
  .hero {
    padding-bottom: calc(4.75rem + 52px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Keep interactive content from being clipped by section overflow */
.hero .wrap,
.hero-grid,
.hero-copy {
  max-width: 100%;
  min-width: 0;
}
