/* =========================================================
   First Aid Kerry - Responsive Breakpoints
   File: assets/css/responsive.css
   ========================================================= */

@media (max-width: 1200px) {
  .mega-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 1.15rem;
  }

  .coverage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  :root {
    --header-height: 76px;
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .primary-nav {
    position: fixed;
    top: var(--header-height);
    right: 0;
    width: min(370px, 100vw);
    max-width: 100vw;
    height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    padding: 1rem;
    background: #306233;
    border-left: 1px solid rgba(148, 163, 184, 0.25);
    visibility: hidden;
    pointer-events: none;
    transform: none;
    opacity: 0;
    transition: opacity var(--ease), visibility 0s linear var(--ease);
  }

  .primary-nav.open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition: opacity var(--ease);
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
  }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 0.7rem 0.35rem;
  }

  .nav-dropdown {
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  }

  .mega-menu {
    position: static;
    transform: none;
    width: 100%;
    background: #306233;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: none;
    margin-bottom: 0.65rem;
    padding: 0.85rem;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    display: none;
  }

  .nav-dropdown.open > .mega-menu {
    display: block;
  }

  .mega-col h3,
  .mega-col a {
    color: #e2e8f0;
  }

  .hero {
    min-height: 74vh;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 2.4rem 0;
  }

  .section-head {
    margin-bottom: 1.05rem;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .form-grid,
  .process-grid,
  .coverage-grid,
  .footer-grid,
  .mega-grid,
  .intro-block {
    grid-template-columns: minmax(0, 1fr);
  }

  .intro-block > * {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .intro-block .placeholder-image {
    width: min(100%, 460px);
    max-height: 620px;
    margin-inline: auto;
  }

  .course-card::before {
    top: 0.6rem;
    right: 0.6rem;
    font-size: 0.66rem;
    padding: 0.22rem 0.52rem;
  }

  .course-card h3 {
    padding-right: 3.5rem;
  }

  .course-card .card-body,
  .cta-card .card-body,
  .pathway-panel {
    padding: 1rem;
  }

  .course-card .card-body {
    gap: 0.72rem;
  }

  .course-card p {
    font-size: 0.97rem;
    line-height: 1.58;
    margin-bottom: 0;
  }

  .course-card .btn {
    margin-top: 0.85rem;
  }

  .testimonial-card {
    padding: 1rem;
  }

  .testimonial-card::before {
    font-size: 0.86rem;
    letter-spacing: 0.09rem;
    margin-bottom: 0.5rem;
  }

  .coverage-link {
    min-height: 50px;
    padding: 0.82rem 0.9rem;
    font-size: 0.96rem;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .btn {
    flex: 1 1 auto;
  }

  .cookie-actions {
    flex-direction: column;
  }

  .phecc-hero-badge {
    margin-top: 0.75rem;
    padding: 0.32rem 0.42rem;
  }

  .phecc-logo-top {
    max-width: 220px;
    max-height: 80px;
  }

  .footer-grid {
    gap: 1.15rem;
  }

  .footer-base {
    gap: 0.7rem;
    margin-top: 1.45rem;
    padding-top: 1rem;
  }

  .footer-base-row {
    padding: 0.55rem 0;
  }

  .footer-base-row-contact {
    gap: 0.55rem;
  }

  .footer-base-row-contact .footer-line:first-child {
    max-width: 100%;
  }

  .footer-policies {
    margin-left: 0;
  }

  .footer-line {
    line-height: 1.65;
  }

  .phecc-logo-footer {
    max-width: 110px;
    max-height: 40px;
  }

  .table-wrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }
}

@media (max-width: 576px) {
  .container {
    width: min(100% - 1.2rem, 1200px);
  }

  .grid {
    gap: 1rem;
  }

  .btn {
    width: 100%;
  }

  .hero-kpis {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 1.7rem;
  }

  .badge {
    font-size: 0.72rem;
  }

  main p,
  main li,
  main td,
  main th {
    font-size: 0.95rem;
    line-height: 1.62;
  }

  section[aria-labelledby="courses-heading"] .section-head p {
    font-size: 1rem;
    line-height: 1.56;
    margin-bottom: 0;
  }

  .course-card .card-body {
    padding: 0.95rem;
  }

  .course-card .btn {
    min-height: 44px;
  }

  main h2 {
    line-height: 1.24;
  }

  .card-body {
    padding: 0.9rem;
  }

  .back-to-top {
    right: 0.65rem;
    bottom: 0.9rem;
    width: 42px;
    height: 42px;
  }

  .cookie-bar {
    left: 0.55rem;
    right: 0.55rem;
    bottom: 0.55rem;
  }
}

/* Small phones and narrow folded widths */
@media (max-width: 430px) {
  :root {
    --header-height: 72px;
  }

  h1 {
    font-size: clamp(1.7rem, 8vw, 2.25rem);
  }

  h2 {
    font-size: clamp(1.35rem, 6.2vw, 1.85rem);
  }

  .site-header .container {
    gap: 0.45rem;
  }

  .logo {
    font-size: 0.92rem;
  }

  .logo-image {
    width: 32px;
    height: 32px;
  }

  .section-head {
    margin-bottom: 1.25rem;
  }

  .intro-block .placeholder-image {
    width: min(100%, 360px);
    max-height: 500px;
  }

  .course-card::before {
    position: static;
    display: inline-flex;
    margin-bottom: 0.45rem;
  }

  .course-card h3 {
    padding-right: 0;
  }

  .course-card .card-body,
  .cta-card .card-body,
  .testimonial-card {
    padding: 0.9rem;
  }

  .course-card .card-body {
    gap: 0.65rem;
  }

  .course-card .btn {
    margin-top: 0.75rem;
  }

  .testimonial-card {
    border-left-width: 4px;
  }

  .testimonial-card::before {
    font-size: 0.8rem;
    letter-spacing: 0.06rem;
  }

  .coverage-link {
    min-height: 48px;
    padding: 0.75rem 0.85rem;
    font-size: 0.93rem;
  }

  .hero {
    min-height: auto;
    place-items: start;
    padding-top: 0.85rem;
  }

  .hero [data-hero-kicker] {
    margin-bottom: 0.9rem;
  }

  .hero-actions {
    gap: 0.5rem;
  }

  .hero-actions .btn,
  .cookie-actions .btn,
  .testimonial-controls .btn,
  .pathway-tabs .pathway-tab {
    width: 100%;
  }

  .pathway-tabs {
    flex-direction: column;
  }

  .table-wrap table {
    min-width: 520px;
  }
}

/* Explicit ultra-narrow devices */
@media (max-width: 320px) {
  .site-header .container {
    gap: 0.35rem;
  }

  .logo {
    font-size: 0.84rem;
  }

  .logo-image {
    width: 28px;
    height: 28px;
  }

  .hero {
    min-height: 66vh;
  }

  .section {
    padding: 2.4rem 0;
  }
}

/* Desktop/tablet hero vertical spacing (keep mobile behavior untouched) */
@media (max-width: 430px) {
  .phecc-hero-badge {
    margin-top: 0.68rem;
    padding: 0.28rem 0.36rem;
  }

  .phecc-logo-top {
    max-width: 185px;
    max-height: 68px;
  }

  .phecc-logo-footer {
    max-width: 96px;
    max-height: 35px;
  }
}

@media (min-width: 431px) {
  .hero {
    place-items: start;
    padding-top: calc(var(--header-height) + 1.1rem);
  }

  .hero-kpis {
    margin-top: 1.65rem;
  }
}

/* Foldables and split-screen portrait widths (e.g., Galaxy Z Fold inner panes) */
@media (min-width: 600px) and (max-width: 900px) {
  .container {
    width: min(100% - 1.6rem, 1200px);
  }

  .grid-3,
  .grid-4,
  .coverage-grid,
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Fold/landscape constrained height states */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: 540px;
  }

  .primary-nav {
    height: calc(100vh - var(--header-height));
  }
}

/* Dual-screen/segmented viewport support where available */
@media (horizontal-viewport-segments: 2) {
  .container {
    width: min(100% - 2rem, 1280px);
  }

  .hero .container,
  .section .container {
    max-width: 1180px;
  }
}