/* =============================================================================
   RESPONSIVE.CSS
   Structural, layout-only breakpoints for the YWK Law Firm site.

   Font sizes and most spacing (padding/margin/gap) are handled fluidly
   with clamp() directly in style.css, so they already scale smoothly
   at every viewport width without needing overrides here. This file is
   only for things clamp() can't do: switching flex-direction, changing
   grid-template-columns, showing/hiding elements, and the mobile menu +
   footer accordion behaviour. Loaded after style.css on every page.

   Breakpoints, widest to narrowest:

     1300px  – large laptop:  stop the biggest fixed-width images/columns
               from overflowing before anything needs to restack
     1100px  – tablet landscape: two-column sections start stacking,
               4/5-column grids drop to 2–3 columns
      960px  – tablet / mobile: hamburger menu replaces the nav bar,
               footer becomes an accessible accordion, remaining
               two-column layouts stack
      640px  – phone: grids go to a single column, row-style list
               items stack vertically
      420px  – small phone: final layout tightening
   ========================================================================= */


/* =============================================================================
   1300px and below — safety net for the largest fixed-size elements
   ========================================================================= */
@media (max-width: 1300px) {

  /* Home hero image no longer refuses to shrink */
  .hp03-hero-image-wrap {
    width: 100%;
    max-width: 640px;
    height: auto;
    aspect-ratio: 1152 / 798;
    flex-shrink: 1;
  }

  /* Article body + sidebar: allow both to shrink instead of forcing overflow */
  .article-container {
    gap: 48px;
  }

  .article-main {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
  }

  .article-sidebar,
  .sidebar-box {
    width: 320px;
  }

  .practice-hero-left,
  .department-box {
    width: 360px;
  }

  /* Note: .hp03-about-image img is intentionally NOT included here \u2014
     that image sits in a fixed-height box (home page About section) and
     needs object-fit: cover to keep filling it; forcing height:auto would
     leave a gap under a shorter image. .about-banner-image (About/Team
     pages) doesn't have that constraint, so it's fine to relax here. */
  .about-banner-image {
    height: auto;
  }
}


/* =============================================================================
   1100px and below — tablet: two-column sections stack, big grids shrink
   ========================================================================= */
@media (max-width: 1100px) {

  /* ---- Home page ---- */
  .hp03-hero-container {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 30px;
  }

  .hp03-hero-content {
    padding-inline-start: 0;
    padding: clamp(16px, 4.359px + 3.104vw, 58px);
  }

  .hp03-hero-image-wrap {
    max-width: 100%;
  }

  .hp03-hero-stats {
    flex-wrap: wrap;
    gap: 40px;
  }

  .hp03-intro-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hp03-about-container {
    flex-direction: column;
    gap: 40px;
  }

  .hp03-about-image {
    width: 100%;
    height: 420px;
  }

  .partners-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .hp03-testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-banner-grid {
    flex-wrap: wrap;
    gap: 32px;
  }

  .contact-col {
    width: calc(50% - 16px);
  }

  /* ---- About page ---- */
  .about-hero-header {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 24px;
  }

  .about-content-container {
    flex-direction: column;
    gap: 40px;
  }

  .about-stats-sidebar {
    width: 100%;
  }

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

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

  /* ---- Practice area / torts pages ---- */
  .practice-hero-container,
  .torts-hero-container {
    flex-direction: column;
  }

  .practice-hero-left {
    width: 100%;
  }

  .torts-hero-banner {
    margin-top: 32px;
  }

  .sub-areas-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .faq-container {
    flex-direction: column-reverse;
    gap: 48px;
  }

  .faq-right {
    width: 100%;
  }

  .pub-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .pub-header-left {
    padding-top: 0;
  }

  /* ---- Articles pages ---- */
  .articles-grid-container {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  .article-card,
  .card-img-wrapper {
    width: 100%;
  }

  .article-container {
    flex-direction: column;
    max-width: 100%;
  }

  .article-sidebar {
    width: 100%;
  }

  .sidebar-box {
    width: 100%;
  }

  /* ---- Generic page hero (articles-grid.html / publications.html) ---- */
  .page-hero-container {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 24px;
    padding: 0 clamp(16px, 4.359px + 3.104vw, 58px);
  }
}


/* =============================================================================
   960px and below — mobile menu + footer accordion breakpoint
   ========================================================================= */
@media (max-width: 960px) {

  /* ---- Header / navigation ---- */
  .main-header-container {
    flex-wrap: wrap;
    align-items: center;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .main-nav {
    display: none;
    width: 100%;
    order: 3;
  }

  .main-nav.mobile-open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 0 24px;
  }

  .main-nav a,
  .main-nav .submenu-toggle {
    padding: 14px 4px;
    min-width: 0;
    justify-content: space-between;
    width: 100%;
  }

  .main-nav a.active::after,
  .main-nav a:hover::after,
  .main-nav .submenu-toggle.active::after,
  .main-nav .submenu-toggle:hover::after,
  .has-mega-menu.open .submenu-toggle::after {
    display: none;
  }

  .has-mega-menu {
    position: static;
  }

  .mega-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 16px;
  }

  .has-mega-menu.open .mega-menu {
    display: block;
  }

  .mega-menu ul {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    max-width: none;
    padding: 0;
  }

  .mega-menu a {
    padding: 10px 14px;
    text-align: right;
  }

  /* ---- Footer accordion ---- */
  .footer-container {
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 0 15px;
  }

  .footer-col {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px 0;
  }

  .col-contact {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .footer-accordion-icon {
    display: block;
  }

  .footer-col.footer-accordion-item .footer-links {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
  }

  .footer-col.footer-accordion-item[data-open="true"] .footer-links {
    max-height: 600px;
    margin-top: 16px;
  }

  /* ---- Remaining grids collapse further ---- */
  .hp03-intro-cards-grid,
  .partners-row,
  .partners-grid {
    grid-template-columns: 1fr;
  }

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

  /* Team subgroups stack on top of each other; the vertical divider
     (now applied to .legal-staff-grid, not .team-subgroup) is removed
     when stacked, since groups are no longer side by side. */
  .team-subgroups-row {
    flex-direction: column;
    gap: 12px;
  }

  .team-subgroup:not(:first-child) .legal-staff-grid {
    border-inline-start: none;
    padding-inline-start: 0;
  }

  .hp03-testimonials-grid,
  .sub-areas-grid,
  .articles-grid-container {
    grid-template-columns: 1fr;
  }

  .contact-col {
    width: 100%;
  }

  .contact-banner-grid {
    flex-direction: column;
    gap: 32px;
  }

  .contact-divider {
    display: none;
  }

  /* ---- Row-style list items stack on smaller tablets ---- */
  .pub-item,
  .pubpage-item {
    flex-wrap: wrap;
  }

  .pub-links,
  .pubpage-links {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    padding-top: 16px;
  }
}


/* =============================================================================
   640px and below — phones
   ========================================================================= */
@media (max-width: 640px) {

  .logo img {
      height: 52px;
  }

  /* ---- Top utility bar: give the always-visible search input room by
     tightening the surrounding elements; wraps to two rows as a last
     resort so nothing clips on very narrow phones. ---- */
  .top-header {
    height: auto;
    min-height: 44px;
  }

  .top-header-container {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 0 clamp(25px, 4.359px + 3.104vw, 58px);
  }

  .top-left-section {
    gap: 12px;
  }

  .social-icons {
    gap: 10px;
  }

  .divider {
    display: none;
  }

  .phone-section {
    gap: 6px;
  }

  .phone-number {
    font-size: 13px;
  }

  /* ---- Stack everything left ---- */
  .stage-item,
  .stages-list .stage-item {
    flex-direction: column;
    gap: 8px;
  }

  .pub-item,
  .pubpage-item {
    flex-direction: column;
    gap: 16px;
  }

  .pub-number,
  .pubpage-number {
    width: auto;
  }

  .pub-links,
  .pubpage-links {
    padding-top: 0;
  }

  .hp03-hero-stats {
    gap: 24px;
  }

  .stat-item {
    padding-inline-start: 12px;
  }

  /* ---- Full-width media on small screens ---- */
  .hp03-about-image,
  .hp03-hero-image-wrap,
  .partner-img-wrapper,
  .team-card-image,
  .hp03-team-card-image,
  .about-banner-image,
  .torts-hero-banner img,
  .banner-img {
    width: 100%;
  }

  .hp03-about-image {
    height: 320px;
  }

  /* ---- Cards / sections that were 2-up now go single column ---- */
  .team-grid,
  .contact-col {
    grid-template-columns: 1fr;
    grid-template-columns: repeat(2, 1fr);
  }

  .partners-row,
  .partners-grid,
  .hp03-intro-cards-grid,
  .hp03-testimonials-grid,
  .sub-areas-grid,
  .articles-grid-container {
    grid-template-columns: 1fr;
    gap: 24px;
    flex-wrap: wrap;
  }

  .footer-bottom-container {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* ---- 404 page ---- */
  .error-actions {
    flex-direction: column;
    width: 100%;
  }

  .error-btn-primary {
    width: 100%;
    justify-content: center;
  }

  /* ---- Search page ---- */
  .search-form {
    flex-direction: column;
  }

  .search-form button {
    padding: 14px 0;
    justify-content: center;
  }

  .search-result-item {
    text-align: right;
  }

  .torts-hero-banner,
  .article-hero-banner {
      aspect-ratio: 16 / 9;
      height: auto;
  }

  .hp03-team-card.hp03-team-card-partner,
  .legal-staff-grid .hp03-team-card.small {
      width: calc(50% - 12px);
  }
  .team-subgroup:first-child .legal-staff-grid {
      justify-content: space-between;
  }
}


/* =============================================================================
   420px and below — small phones, final tightening
   ========================================================================= */
@media (max-width: 420px) {

  .hp03-hero-stats {
    flex-direction: row;
    gap: 16px;
    justify-content: space-between;
  }

  .hp03-team-card-image,
  .team-card-image {
    height: 260px;
    aspect-ratio: 1;
    height: auto;
  }
  .about-content-section {
      padding-top: 0;
  }
  .stats-list {
      flex-direction: row;
      justify-content: space-between;
  }

  .header-search-input{
    display: none;
  }
}