/* ================================
   CONTENT PAGES MOBILE OPTIMIZATION
   Specific fixes for IHP, Education, etc.
   ================================ */

/* Mobile optimizations for content pages */
@media (max-width: 575px) {
  /* Hero sections on content pages */
  .hero {
    min-height: 200px !important;
    margin-bottom: 1rem;
  }

  .hero img {
    min-height: 200px !important;
  }

  .hero-overlay-text,
  .hero .project {
    font-size: 1.5rem !important;
    padding: 0.75rem 0.5rem !important;
  }

  /* Navigator improvements */
  .navigator-layout {
    padding: 0.75rem 0.4rem !important;
  }

  .navigator {
    margin-bottom: 0.75rem;
  }

  /* Content blocks */
  .content-block {
    padding: 0.6rem !important;
  }

  /* Headings in content */
  .content-block h2 {
    font-size: 1.3rem !important;
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
  }

  .content-block h3 {
    font-size: 1.05rem !important;
    margin-top: 1.25rem !important;
  }

  .content-block h4 {
    font-size: 0.9rem !important;
    margin-top: 1rem !important;
  }

  /* Paragraphs and lists */
  .content-block p {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    margin-bottom: 0.75rem !important;
  }

  .content-block ul,
  .content-block ol {
    margin-bottom: 0.75rem !important;
    padding-left: 1rem !important;
  }

  .content-block li {
    font-size: 0.825rem !important;
    line-height: 1.55 !important;
    margin-bottom: 0.35rem !important;
  }

  /* Override all inline-styled images */
  .content-block img[style],
  img[style*="max-width"],
  img[style*="border-radius"] {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin: 0.75rem 0 !important;
    border-radius: 6px !important;
  }

  /* Override centered image containers */
  div[style*="text-align: center"] {
    margin: 0.75rem 0 !important;
    padding: 0 !important;
  }

  div[style*="margin: 20px"] {
    margin: 0.75rem 0 !important;
  }

  /* PDF and iframe containers */
  div[style*="width: 100%"][style*="max-width: 800px"] {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin: 0.75rem 0 !important;
    padding: 0 !important;
  }

  div[style*="height: 600px"] {
    height: 250px !important;
    min-height: 250px !important;
  }

  div[style*="height: 600px"] iframe {
    height: 250px !important;
  }

  /* Nested lists in navigator */
  .navigator ul ul {
    margin-top: 0 !important;
  }

  .navigator ul ul li {
    margin-bottom: 0 !important;
  }

  /* Callout boxes */
  .bd-callout {
    padding: 0.7rem !important;
    margin: 0.85rem 0 !important;
  }

  .bd-callout h4 {
    font-size: 0.9rem !important;
  }

  .bd-callout p {
    font-size: 0.825rem !important;
  }

  /* Cards */
  .card-modern {
    padding: 0.7rem !important;
    margin-bottom: 0.85rem !important;
  }

  /* Tables - make scrollable */
  .content-block table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.75rem !important;
    margin: 0.75rem 0 !important;
  }

  .content-block th,
  .content-block td {
    padding: 0.35rem !important;
    font-size: 0.75rem !important;
  }

  /* Strong and emphasis */
  .content-block strong,
  .content-block em {
    font-size: inherit;
  }

  /* Links */
  .content-block a {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Blockquotes */
  .content-block blockquote {
    margin: 0.75rem 0 !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    border-left-width: 3px !important;
  }

  /* Code blocks */
  .content-block pre,
  .content-block code {
    font-size: 0.75rem !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Horizontal rules */
  .content-block hr {
    margin: 1rem 0 !important;
  }
}

/* Extra small phones */
@media (max-width: 374px) {
  .content-block {
    padding: 0.5rem !important;
  }

  .content-block h2 {
    font-size: 1.2rem !important;
  }

  .content-block h3 {
    font-size: 1rem !important;
  }

  .content-block h4 {
    font-size: 0.875rem !important;
  }

  .content-block p,
  .content-block li {
    font-size: 0.8rem !important;
  }

  .navigator a {
    font-size: 0.8rem !important;
    padding: 0.45rem 0.55rem !important;
  }

  .navigator ul ul a {
    font-size: 0.75rem !important;
  }
}

/* Medium mobile improvements */
@media (min-width: 576px) and (max-width: 767px) {
  .hero {
    min-height: 250px !important;
  }

  .hero img {
    min-height: 250px !important;
  }

  .content-block {
    padding: 1rem !important;
  }

  div[style*="height: 600px"] {
    height: 350px !important;
  }

  div[style*="height: 600px"] iframe {
    height: 350px !important;
  }
}