/* Fixes on top of the original theme (css/main.min.css). Loaded last by layouts/Base.astro. */

/* Portrait tablets: the full-screen hero image hid all content below the fold. */
@media (min-width: 768px) and (max-width: 1199.9px) and (orientation: portrait) {
  .inner-hero-section img { height: min(60vh, 52rem); }
}

/* Home: the Cambridge logo was a fixed 250px inside a narrow column on tablets. */
.cambLogo { max-width: 100%; }

/* Admission "how to apply" cards: let grid columns shrink instead of spilling past the screen. */
.how-to-apply .application-grid .application-grid-item { min-width: 0; }
@media (min-width: 992px) and (max-width: 1199.9px) {
  .how-to-apply .application-grid .application-grid-item { aspect-ratio: auto; min-height: 16rem; }
}

/* Safety net: carousels (owl) and wide embeds must never cause sideways scrolling on phones. */
html, body { overflow-x: clip; }

/* Home "A New Dawn" photo: the round frame was wider than its column on tablets. */
.sustaible-grid-item { min-width: 0; }
@media (min-width: 576px) {
  .sustainable-area .img-wrapper { max-width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .sustainable-area .img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
}

/* Inner-page hero titles: on phones/tablets, long article titles covered the photo.
   Below 992px the title sits under the image instead of on top of it. */
@media (max-width: 991.9px) {
  .inner-hero-section h1 {
    position: static;
    transform: none;
    font-size: 3.4rem;
    line-height: 1.2;
    padding: 1.6rem 1.6rem 0;
    margin-bottom: 2.4rem;
    text-wrap: balance;
  }
  .inner-hero-section::before { bottom: auto; top: 0; height: 100%; background: none; }
}
@media (max-width: 575px) {
  .inner-hero-section h1 { font-size: 2.6rem; }
  .inner-hero-section img { height: 24rem; }
}
/* Desktop: keep the original over-the-photo title, but keep very long titles to a sensible size. */
@media (min-width: 992px) {
  .inner-hero-section h1 { font-size: clamp(3.2rem, 3.4vw, 4.8rem); text-wrap: balance; padding: 0 6vw; }
}

/* Tables (openings, fees, events) scroll sideways on phones instead of being cut off. */
.lt-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lt-table-scroll > table { margin-bottom: 0; }
