/* ═══════════════════════════════════════════════════════════════════
   Global Responsive Fixes — Africa Western Education (public site)
   Loaded by templates/global_agency/base.html (all base-extending
   pages) and by the standalone public pages.
   Breakpoints: 768px, 480px, 360px
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 768px ─────────────────────────── */
@media (max-width: 768px) {

  /* overflow-x: clip — prevents horizontal scroll WITHOUT creating a
     scroll container, so position: sticky elements keep working */
  html, body {
    overflow-x: clip;
  }

  /* Hero: landscape-style on tablets — wide and short */
  #home {
    min-height: 0 !important;
    height: 460px;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Search bar: keep single row but compact padding */
  #home .js-live-search .flex {
    flex-wrap: nowrap;
  }
  #home .js-live-search select {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  #home .js-live-search button {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Hero heading (same as phone) */
  #home h1 {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
  }
  #home p {
    font-size: 0.78rem !important;
  }

  /* Hero badge (top pill, same as phone) */
  #home .inline-flex.items-center.px-4 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 0.6rem;
    white-space: nowrap;
  }

  /* Hero search: compact paddings (same as phone) */
  #home .js-live-search select {
    font-size: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  #home .js-live-search input {
    padding-top: 0.6rem;
    padding-bottom: 0.5rem;
    font-size: 0.62rem;
  }

  /* Trust bar stats: hide on tablets to keep the landscape hero clean */
  #home .absolute.-bottom-0 {
    display: none !important;
  }

  /* Add margin-top to the "Explore courses worldwide" search box */
  #home .max-w-md {
    margin-top: 1.5rem;
  }

  /* "Trusted Worldwide / Recommended By" header — smaller on tablets */
  #recommended-by h2 {
    font-size: 1.25rem !important;
  }
  #recommended-by h2 span {
    font-size: 1.25rem !important;
  }
  #recommended-by .text-center > p {
    font-size: 0.85rem !important;
  }

  /* "Top Universities in Tanzania" showcase — smaller headings on tablets */
  #university-showcase h2 {
    font-size: 1.6rem !important;
  }
  #university-showcase h2 + p {
    font-size: 1rem !important;
  }
  #university-showcase h3 {
    font-size: 1.1rem !important;
  }

  /* Top courses: keep 4 columns on tablets */
  .courses-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.75rem !important;
  }
  .course-card {
    padding: 0.5rem !important;
  }
  .course-card h3 {
    font-size: 11px !important;
  }
  #top-courses h2 {
    font-size: 1.7rem !important;
  }
  #top-courses .text-center > p {
    font-size: 0.9rem !important;
  }

  /* Partner logos marquee: smaller cards on tablets */
  #recommended-by .marquee-content > div {
    height: 5.5rem !important;
    padding: 0.5rem !important;
  }
  #recommended-by .w-20 {
    width: 3.2rem !important;
    height: 3.2rem !important;
  }

  /* University logos marquee: smaller cards on tablets */
  #university-showcase .marquee-content > div {
    width: 4.5rem !important;
    height: 4.5rem !important;
  }
  #university-showcase .marquee-content > div > div {
    width: 3rem !important;
    height: 3rem !important;
  }

  /* Highlights header already collapses via inline styles; center cards */
  .highlights-track {
    gap: 0.75rem;
  }
  /* Highlights: smaller cards + heading on tablets */
  .highlights-card {
    width: 280px !important;
  }
  .highlights-card .card-image img {
    height: 160px !important;
  }
  .highlights-card .card-title {
    font-size: 13px !important;
  }
  .highlights-header h2 {
    font-size: 30px !important;
  }
  .highlights-header .view-all {
    font-size: 16px !important;
  }

  /* Register / Create Account page — tighter on tablets */
  .register-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .register-card {
    padding: 1.5rem 1.25rem !important;
  }
  .register-card form {
    row-gap: 1.25rem;
  }

  /* Program detail page */
  .pd-wrap {
    padding: 20px 14px 40px;
  }
  .pd-header {
    flex-wrap: wrap;
  }
  .pd-title-row {
    gap: 8px;
  }
  .pd-similar-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .pd-grid {
    grid-template-columns: 1fr !important;
  }

  /* University detail: shrink logo so name gets room */
  .univ-logo {
    width: 56px !important;
    height: 56px !important;
  }

  /* Update gallery: smaller tiles */
  .gallery-grid img {
    height: 160px !important;
  }

  /* Footer newsletter: full width form */
  footer form {
    width: 100% !important;
  }

  /* Navbar: reduce logo text size */
  #nav-sticky-wrap h1 {
    font-size: 0.8rem !important;
  }
  #nav-sticky-wrap h2 {
    font-size: 0.55rem !important;
  }
}

/* ─────────────────────────── 480px ─────────────────────────── */
@media (max-width: 480px) {

  /* Typography scaling */
  body {
    font-size: 14px;
  }

  /* Hero: landscape-style on phones — wide and short, content centered */
  #home {
    min-height: 0 !important;
    height: 480px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Hero heading */
  #home h1 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
  #home p {
    font-size: 0.78rem !important;
  }

  /* Hero badge (top pill) */
  #home .inline-flex.items-center.px-4 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 0.6rem;
    white-space: nowrap;
  }

  /* Hero search: allow elements to breathe on phones */
  #home .js-live-search select {
    font-size: 0.5rem;
    padding-left: .5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  #home .js-live-search input {
    padding-top: 0.6rem;
    padding-bottom: 0.5rem;
    font-size: 0.62rem;
  }
  #home .js-live-search button {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.6rem;
    border-radius: 0.6rem;
  }
  #home .js-live-search .flex-shrink-0 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Trust bar stats: hide on small phones to save vertical space */
  #home .absolute.-bottom-0 {
    display: none !important;
  }

  /* "Trusted Worldwide / Recommended By" header — smaller on phones */
  #recommended-by h2 {
    font-size: 1.1rem !important;
  }
  #recommended-by h2 span {
    font-size: 1.1rem !important;
  }
  #recommended-by .text-center > p {
    font-size: 0.78rem !important;
  }

  /* "Top Universities in Tanzania" showcase — smaller headings on phones */
  #university-showcase h2 {
    font-size: 1.35rem !important;
  }
  #university-showcase h2 + p {
    font-size: 0.9rem !important;
  }
  #university-showcase h3 {
    font-size: 1rem !important;
  }

  /* Top courses grid: 4 cols fits small phones with tiny cards */
  .courses-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.5rem !important;
  }
  .course-card {
    padding: 0.4rem !important;
  }
  .course-icon {
    width: 1.6rem !important;
    height: 1.6rem !important;
    margin-bottom: 0.4rem !important;
  }
  .course-icon i {
    font-size: 8px !important;
  }
  .course-card h3 {
    font-size: 10px !important;
  }
  #top-courses h2 {
    font-size: 1.4rem !important;
  }
  #top-courses .text-center > p {
    font-size: 0.8rem !important;
  }
  #top-courses .w-4 {
    width: 3.5rem !important;
    height: 0.2rem !important;
  }

  /* Partner logos marquee: smaller cards on phones */
  #recommended-by .marquee-content > div {
    height: 4.5rem !important;
    padding: 0.4rem !important;
  }
  #recommended-by .w-20 {
    width: 2.6rem !important;
    height: 2.6rem !important;
  }
  #recommended-by .w-20 img {
    max-width: 100% !important;
    max-height: 100% !important;
  }

  /* University logos marquee: smaller cards on phones */
  #university-showcase .marquee-content > div {
    width: 4rem !important;
    height: 4rem !important;
  }
  #university-showcase .marquee-content > div > div {
    width: 2.4rem !important;
    height: 2.4rem !important;
  }

  /* Highlights: keep track scrollable, cards slightly smaller */
  .highlights-card {
    width: 230px !important;
    border-radius: 14px !important;
  }
  .highlights-card .card-image {
    padding: 10px !important;
  }
  .highlights-card .card-image img {
    height: 140px !important;
  }
  .highlights-card .card-title {
    font-size: 12px !important;
  }
  .highlights-header h2 {
    font-size: 24px !important;
  }
  .highlights-header .view-all {
    font-size: 14px !important;
  }

  /* Register / Create Account page — tighter on phones */
  .register-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .register-section img {
    height: 3.5rem !important;
  }
  .register-section h2 {
    font-size: 1.4rem !important;
  }
  .register-card {
    padding: 1.25rem 1rem !important;
  }
  .register-card form {
    row-gap: 1rem;
  }
  .register-card label,
  .register-card input,
  .register-card select,
  .register-card textarea {
    font-size: 0.85rem !important;
  }
  .register-card .rounded-xl.border p {
    font-size: 0.78rem !important;
  }

  /* Program detail */
  .pd-logo {
    width: 52px !important;
    height: 52px !important;
  }
  .pd-course-title {
    font-size: 1.25rem !important;
  }
  .pd-badge {
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
  }
  .pd-gallery img {
    width: 200px !important;
    height: 150px !important;
  }
  .pd-similar-grid {
    grid-template-columns: 1fr !important;
  }
  .pd-apply-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* University detail */
  .univ-hero-slide,
  .hero-slide {
    background-position: center !important;
  }
  .univ-logo {
    width: 44px !important;
    height: 44px !important;
  }

  /* Update detail gallery */
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  }
  .gallery-grid img {
    height: 120px !important;
  }

  /* Footer newsletter: stack input + button */
  footer form {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  footer form input,
  footer form button {
    width: 100% !important;
  }

  /* Navbar: keep logo text on one line, tighten top bar */
  #nav-sticky-wrap h1 {
    white-space: nowrap;
  }
  nav > div:first-child .max-w-7xl {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }
}

/* ─────────────────────────── 360px ─────────────────────────── */
@media (max-width: 360px) {

  /* Smallest phones: tighter type */
  body {
    font-size: 12.5px;
  }

  #home h1 {
    font-size: .9rem !important;
  }

  /* Hero search: switch to stacked layout on the smallest phones so
     the select+input row frees up and the button becomes full-width */
  #home .js-live-search > div {
    flex-wrap: wrap;
  }
  #home .js-live-search select {
    font-size: 0.62rem;
    padding-left: 0.3rem;
    padding-right: 0.4rem;
    flex: 0 0 auto;
  }
  #home .js-live-search input {
    font-size: 0.6rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    min-width: 0;
  }
  #home .js-live-search button {
    flex: 1 1 100%;
    width: 100%;
    margin: 0.25rem 0.45rem 0.45rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 0.65rem;
  }

  /* Course tiles: 4 columns still fine, smaller gap */
  .courses-grid {
    gap: 0.4rem !important;
    margin: auto;
  }
  .course-card {
    padding: 0.4rem !important;
     margin: auto;
  }
  .course-icon {
    width: 18px !important;
    height: 18px !important;
    margin-bottom: 8px !important;
  }

  /* Highlights */
  .highlights-card {
    width: 250px !important;
  }

  /* Program detail */
  .pd-wrap {
    padding: 16px 10px 32px;
  }
  .pd-title-row {
    gap: 6px;
  }
  .pd-gallery img {
    width: 170px !important;
    height: 130px !important;
  }

  /* Search results / forms */
  input[type="text"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }

  /* Buttons full-width on the narrowest screens */
  .btn-modern,
  .pd-apply-btn,
  a[class*="btn"] {
    max-width: 100%;
  }

  /* Navbar (smallest phones) */
  #nav-sticky-wrap h1 {
    font-size: 0.72rem !important;
    letter-spacing: 0.1rem !important;
  }
  #nav-sticky-wrap h2 {
    font-size: 0.5rem !important;
  }
  #nav-sticky-wrap .flex.items-center.gap-3 {
    gap: 0.5rem !important;
  }
  #nav-sticky-wrap a[class*="flex items-center"] img {
    height: 2rem !important;
  }
  #mobile-menu-button {
    padding: 0.4rem !important;
  }
  nav > div:first-child .max-w-7xl {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  /* Mobile menu: bigger touch targets, tighter text */
  #mobile-menu .mobile-link {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    font-size: 0.9rem !important;
  }
  #mobile-menu .min-h-\[44px\] {
    min-height: 44px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Updates pages — cross-cutting responsive (loaded by public base)
   These supplement the inline <style> blocks in updates.html and
   update_detail.html.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 768px: tablet ─── */
@media (max-width: 768px) {
  .news-section-header {
    gap: 12px;
  }
  .news-section-header h2 {
    white-space: normal;
  }
  .news-hero-search {
    max-width: 100%;
  }
}

/* ─── 480px: phone ─── */
@media (max-width: 480px) {
  .news-hero-section {
    padding: 50px 0 30px;
  }
  .news-hero-section h1 {
    font-size: 1.5rem;
  }
  .news-hero-section p {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }
  .news-section-header h2 {
    white-space: normal;
    font-size: 1.2rem;
  }
  .detail-hero h1 {
    font-size: 1.4rem;
  }
}

/* ─── 360px: smallest phones ─── */
@media (max-width: 360px) {
  .news-hero-section h1 {
    font-size: 1.35rem;
  }
  .detail-hero h1 {
    font-size: 1.25rem;
  }
}