/* CEOBI homepage mobile overflow and clipping fix.
   Loaded last on index.html so legacy and current homepage sections can grow to their content. */

@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  #main-content,
  #main-content > section,
  #main-content .ceobi-section,
  #main-content .ceobi-water-hero,
  #main-content .ceobi-library-grid,
  #main-content .ceobi-featured-publications,
  #main-content .ceobi-featured-articles,
  #main-content :is(
    [class*="preview"],
    [class*="dashboard"],
    [class*="executive"],
    [class*="reading"],
    [class*="insight"],
    [class*="panel"],
    [class*="card"]
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  #main-content > section,
  #main-content .ceobi-section,
  #main-content .ceobi-water-hero,
  #main-content .ceobi-featured-publications,
  #main-content :is(
    [class*="preview"],
    [class*="executive-reading"],
    [class*="platform-preview"]
  ) {
    overflow: visible !important;
  }

  #main-content :is(
    .ceobi-library-grid,
    .ceobi-featured-articles,
    [class*="dashboard-grid"],
    [class*="cards-grid"],
    [class*="preview-grid"],
    [class*="metrics-grid"]
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #main-content :is(.ceobi-section__head,.ceobi-featured-publications__head) {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  #main-content :is(img,svg,video,canvas,iframe) {
    max-width: 100% !important;
  }
}

@media (max-width: 600px) {
  #main-content {
    width: 100%;
    padding-inline: 14px !important;
  }

  #main-content .ceobi-water-hero,
  #main-content .ceobi-section,
  #main-content .ceobi-library-card,
  #main-content .ceobi-featured-article,
  #main-content :is([class*="card"],[class*="panel"],[class*="preview"]) {
    width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }

  #main-content .ceobi-search {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
  }

  #main-content .ceobi-search :is(input,button) {
    width: 100% !important;
    min-width: 0 !important;
  }

  #main-content .ceobi-library-actions {
    width: 100%;
    flex-wrap: wrap !important;
  }

  #main-content .ceobi-library-actions > * {
    flex: 1 1 140px;
    text-align: center;
  }
}