/*
 * Nexora - responsive.css
 * Breakpoint chinh: mobile-first.
 * mobile:  < 640px
 * tablet:  640px - 1023px
 * desktop: >= 1024px
 */

/* ---------- Tablet & below ---------- */
@media (max-width: 1023px) {
  .single-layout,
  .layout-with-sidebar,
  .contact-grid,
  .page-hero--split,
  .featured-trio__grid,
  .section-curator__grid,
  .hero-dark__grid {
    grid-template-columns: 1fr;
  }

  .site-main--categories .categories-hero__topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-main--categories .categories-hero__main {
    grid-template-columns: 1fr;
  }

  .site-main--categories .categories-hero__quote {
    max-width: 32rem;
  }

  .site-main--category .category-hero__topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-main--category .category-hero__main {
    grid-template-columns: 1fr;
  }

  .site-main--category .category-hero__quote {
    max-width: 32rem;
  }

  .single-post__main,
  .single-post__sidebar {
    order: initial;
  }

  .single-post__sidebar {
    position: static;
    display: flex;
    gap: 0.65rem;
    max-height: none;
    overflow: visible;
  }

  .single-post__related {
    position: static;
    margin-top: 0;
  }

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

  .side-story {
    flex-direction: row;
  }

  .trending-row {
    flex-wrap: wrap;
  }

  .trending-row__stats {
    width: 100%;
    justify-content: space-between;
    padding-left: calc(3rem + var(--space-5));
  }

  .hero-feature__grid {
    grid-template-columns: 1fr;
  }

  .hero-feature__media {
    min-height: 240px;
  }

  .hero-feature__frame {
    min-height: 360px;
  }

  .post-grid--3,
  .category-grid,
  .value-grid,
  .team-grid,
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-brand,
  .about-teaser,
  .newsletter-cta,
  .standards-grid {
    grid-template-columns: 1fr;
  }

  .contact-hero-facts {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-4);
  }

  .split-heading {
    align-items: flex-start;
  }

  .hero-brand__media {
    order: -1;
    aspect-ratio: 16 / 9;
  }

  .site-main--category .layout-with-sidebar {
    grid-template-columns: 1fr;
  }

  .site-main--categories .layout-with-sidebar > .widget-stack {
    position: static;
  }

  .site-main--search .layout-with-sidebar {
    grid-template-columns: 1fr;
  }

  .categories-hub__grid {
    grid-template-columns: 1fr;
  }

  .site-main--home .hero-feature {
    margin-inline: calc(-1 * var(--space-4));
  }

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

  .stat-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-5);
  }

  .site-branding__dateline {
    display: none;
  }
}

@media (max-width: 1023px) {
  .site-main--contact {
    padding-top: 2.5rem;
  }

  .contact-intro__title {
    max-width: 52rem;
  }

  .site-main--contact .contact-hero-facts {
    margin-top: 2.75rem;
  }
}

/* ---------- Mobile navigation ---------- */
@media (max-width: 900px) {
  .main-navigation {
    display: none;
    flex-basis: 100%;
    order: 3;
    padding-block: var(--space-3);
    border-top: 1px solid var(--color-accent-soft);
  }

  .main-navigation.is-open {
    display: block;
    width: 100%;
  }

  .main-navigation > ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .main-navigation > ul > li {
    width: 100%;
  }

  .main-navigation a {
    width: 100%;
    padding-block: var(--space-2);
    border-bottom: none;
  }

  .main-navigation ul ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding-left: var(--space-4);
    display: none;
  }

  .main-navigation li:hover > ul,
  .main-navigation li:focus-within > ul {
    display: block;
  }

  .site-header__inner {
    flex-wrap: wrap;
  }

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

  .site-branding {
    flex: 1;
  }

  .lang-switcher--desktop {
    display: none;
  }

  .lang-switcher--mobile {
    display: inline-flex;
    margin-top: var(--space-3);
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 639px) {
  .post-grid,
  .post-grid--3,
  .category-grid,
  .value-grid,
  .team-grid,
  .stat-row,
  .category-chip-grid,
  .faq-grid,
  .contact-hero-facts {
    grid-template-columns: 1fr;
  }

  .newsletter-cta__form {
    flex-direction: column;
  }

  .river-item {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .post-nav {
    grid-template-columns: 1fr;
  }

  .post-nav--next {
    text-align: left;
  }

  .error-404__code {
    font-size: 3.5rem;
  }

  .page-hero__banner {
    aspect-ratio: 4 / 3;
  }

  .site-main--contact {
    padding-top: 1.75rem;
  }

  .site-main--contact > .container {
    padding-inline: 1.25rem;
  }

  .contact-intro__eyebrow {
    align-items: flex-start;
    font-size: 0.62rem;
  }

  .contact-intro__title {
    font-size: clamp(2.35rem, 11vw, 3.4rem);
    line-height: 1.1;
  }

  .contact-intro__break {
    display: none;
  }

  .contact-intro__lede {
    font-size: 1rem;
    line-height: 1.65;
  }

  .site-main--contact .contact-hero-facts {
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-bottom: 1.5rem;
  }

  .site-main--category .layout-with-sidebar .post-grid {
    grid-template-columns: 1fr;
  }

  .site-main--categories .layout-with-sidebar > div > .post-grid {
    grid-template-columns: 1fr;
  }

  .single-post__sidebar {
    gap: 0.65rem;
  }

  .single-post__sidebar .toc-box {
    padding: 0.75rem 0.9rem;
  }

  .single-post__sidebar .toc-box ol {
    gap: 0.35rem;
  }

  .single-post__sidebar .toc-box a {
    line-height: 1.3;
  }

  .single-post__sidebar .font-size-control {
    padding: 0.55rem 0.8rem;
  }

  .single-post__sidebar .single-post__share-label {
    margin-block: 0.5rem 0.35rem;
  }

  .single-post__sidebar .single-post__share--vertical {
    gap: 0.3rem;
  }

  .single-post__sidebar .single-post__share--vertical .icon-action {
    min-height: 2rem;
    padding: 0.25rem 0.45rem;
  }

  .site-main--search .layout-with-sidebar > .post-grid .post-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "thumb"
      "meta"
      "title"
      "excerpt"
      "footer";
  }

  .site-main--search .search-hero__form {
    flex-direction: column;
  }

  .site-main--home .hero-feature__frame {
    min-height: 520px;
  }

  .site-main--home .featured-trio__side .side-story {
    flex-direction: column;
  }

  .site-main--home .featured-trio__side .side-story__thumb {
    width: 100%;
  }
}