/* Content-safety layer for fields controlled by the operations dashboard.
   Existing measured heights remain the visual baseline; JavaScript applies
   .layout-auto-height only when live content would otherwise be clipped. */
.layout-auto-height {
  height: auto !important;
  min-height: var(--layout-safe-min-height, 0px) !important;
  max-height: none !important;
}

/* Long Vietnamese labels, URLs and operator-entered copy must wrap instead of
   forcing a card or footer column beyond the viewport. */
.section-heading h1,
.section-heading h2,
.section-heading p,
.product-card h3,
.product-card p,
.product-card span,
.guide-grid h3,
.guide-grid article > div > span,
.footer-brand-block p,
.footer-columns a,
.footer-columns p,
.footer-bottom,
.faq-list summary,
.faq-list p {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* If configured desktop navigation no longer fits, switch to the existing
   accessible menu rather than allowing labels to collide. */
@media (min-width: 1024px) {
  .site-header.nav-content-overflow .header-shell {
    width: 100%;
    height: 63px;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding-inline: 16px;
    transform: none;
  }

  .site-header.nav-content-overflow .desktop-nav,
  .site-header.nav-content-overflow .header-cta {
    display: none;
  }

  .site-header.nav-content-overflow .menu-button {
    display: flex;
  }

  .site-header.nav-content-overflow .mobile-menu {
    top: 63px;
  }

  .home-page .site-header.nav-content-overflow .menu-button,
  .fleet-page .site-header.nav-content-overflow .menu-button,
  .category-page .site-header.nav-content-overflow .menu-button,
  .service-page .site-header.nav-content-overflow .menu-button,
  .article-route-page .site-header.nav-content-overflow .menu-button {
    color: white;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .25);
  }

  .home-page .site-header.nav-content-overflow.scrolled .menu-button,
  .home-page .site-header.nav-content-overflow.menu-open .menu-button,
  .fleet-page .site-header.nav-content-overflow.scrolled .menu-button,
  .fleet-page .site-header.nav-content-overflow.menu-open .menu-button,
  .category-page .site-header.nav-content-overflow.scrolled .menu-button,
  .category-page .site-header.nav-content-overflow.menu-open .menu-button,
  .service-page .site-header.nav-content-overflow.scrolled .menu-button,
  .service-page .site-header.nav-content-overflow.menu-open .menu-button,
  .article-route-page .site-header.nav-content-overflow.scrolled .menu-button,
  .article-route-page .site-header.nav-content-overflow.menu-open .menu-button {
    color: var(--ink);
    background: white;
    border-color: var(--line);
  }
}

/* At compact desktop widths the decorative three-card scooter compositions
   do not fit their second grid column. Keep the booking copy fully usable and
   remove the decorative column until the full desktop composition fits. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .fleet-hero > .content-shell,
  .price-hero > .content-shell {
    grid-template-columns: 1fr;
  }

  .fleet-hero-bikes,
  .price-hero aside {
    display: none;
  }
}

/* Archive cards previously used a 1236px measured reference grid at every
   desktop width. Make that grid fluid on compact desktops so the third column
   remains visible instead of being clipped by the viewport. */
@media (min-width: 801px) and (max-width: 1235px) {
  .author-posts > .content-shell {
    width: calc(100% - 40px);
  }

  .author-posts .guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
  }

  .author-posts .guide-grid article {
    width: auto;
  }

  .author-posts .guide-pagination {
    padding-left: 0;
  }
}