/* MintCues — Responsive layout fix
 * Defines the new layout classes (mc-grid-sidebar, mc-grid-auto,
 * mc-calc-shell, mc-stat-grid) used in place of the inline
 * `style="display:grid;grid-template-columns:..."` that were
 * blocking mobile responsiveness.
 *
 * Load AFTER style.css and mintcues-mobile-nav.css.
 */

/* ============ Two-column content+sidebar (home, article) ============ */
.mc-grid-sidebar {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 4rem;
  align-items: start;
}
.article-shell.mc-grid-sidebar {
  grid-template-columns: 1fr 300px;
}
@media (max-width: 1024px) {
  .mc-grid-sidebar {
    grid-template-columns: 1fr 300px;
    gap: 2.5rem;
  }
}
@media (max-width: 900px) {
  .mc-grid-sidebar {
    display: block;
  }
  .mc-grid-sidebar > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .mc-grid-sidebar > * + * {
    margin-top: 1.5rem;
  }
}

/* ============ Auto-fit grid (category listing) ============ */
.mc-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
@media (max-width: 560px) {
  .mc-grid-auto {
    grid-template-columns: 1fr;
  }
}

/* ============ Calculator layout ============ */
.mc-calc-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .mc-calc-shell {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Calculator stat grid (4 small stat cells). Keep 2-col on mobile — they fit. */
.mc-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 380px) {
  .mc-stat-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Safety nets — force single-column on mobile for
   any grid class used elsewhere in the site, even if it still
   uses an inline style we didn't catch. These have no effect
   unless the element has an inline style; with inline, we
   physically override via class-level !important combined with
   an attribute selector (inline styles still win at the same
   declaration-level, but browser cascades between an inline
   non-!important and an external !important favor !important). ============ */
@media (max-width: 900px) {
  /* Force single-column on mobile for ANY grid shell we know about,
     even if still carrying an old inline style. Works because
     external !important beats inline non-!important. */
  .content-shell,
  .article-shell,
  [class*="content-shell"],
  [class*="article-shell"] {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .content-shell > *,
  .article-shell > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .content-sidebar,
  .article-sidebar {
    display: block !important;
    position: static !important;
    top: auto !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
  }

  /* Force single-column card grids on mobile */
  .cards-grid,
  .cards-grid-2,
  .cards-grid-3,
  .cards-grid-4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Cards and widgets never exceed the viewport */
  .card, .card-xl, .market-widget, .widget, .widget-card,
  .calc-card, .calc-panel, .mc-calc-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .card-body, .widget-body, .calc-card { padding: 1rem !important; }

  /* Any child of these that still has an inline grid-template-columns
     gets neutralized. Targets inline-style containing "grid-template-columns"
     that are NOT one of our known mc-* classes. */
  [style*="grid-template-columns"]:not(.mc-calc-shell):not(.mc-stat-grid):not(.mc-grid-sidebar):not(.mc-grid-auto):not(.hero-inner) {
    grid-template-columns: 1fr !important;
  }

  /* Ensure body never has horizontal scroll from a runaway child */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Prose inside article pages: allow very long words/URLs to break */
  .prose, .prose * {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* Trending / Editor's Choice section labels shouldn't stack letters */
  .section-label {
    white-space: normal !important;
    word-break: normal !important;
  }

  /* Newsletter / widget card in sidebar — breathing room */
  .article-sidebar > div,
  .content-sidebar > div {
    margin-bottom: 1.25rem !important;
  }
  .article-sidebar > div:last-child,
  .content-sidebar > div:last-child {
    margin-bottom: 0 !important;
  }
}

/* ============ Tables always horizontally-scrollable on mobile ============ */
@media (max-width: 900px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}