/* 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;
}

/* Product collections adapt from one to four cards without leaving items in
   empty fixed tracks. The content shell and 260px minimum cap rows at four. */
.catalog-grid,
.fleet-product-group .catalog-grid,
.category-models .catalog-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  justify-content: center;
  gap: 24px;
}

.catalog-grid > .product-card,
.finder-results .catalog-grid > div {
  width: 100%;
  max-width: 360px;
  justify-self: center;
}

/* 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;
  }
}

/* Mobile multilingual stability pass.
   Translated copy is allowed to define the block height instead of painting
   over the next measured section. The rules live in the last-loaded sheet so
   they also protect fleet, category and interior templates. */
.skip-link:focus:not(:focus-visible) {
  transform: translateY(-150%);
}

@media (max-width: 800px) {
  .featured-group-head,
  .fleet-product-head {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px 18px;
    overflow: visible !important;
  }

  .featured-group-head > a,
  .fleet-product-head > a {
    align-self: start;
    margin-top: 2px !important;
    white-space: nowrap;
  }

  .faq-section,
  .category-faq,
  .contact-faq,
  .price-faq,
  .service-faq,
  .faq-section > .content-shell,
  .category-faq > .content-shell,
  .contact-faq > .content-shell,
  .price-faq > .content-shell,
  .service-faq > .content-shell,
  .faq-list,
  .faq-list details,
  .faq-list details[open] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .faq-list details {
    display: block;
  }

  .faq-list summary {
    height: auto !important;
    min-height: 64px !important;
    padding: 18px 4px !important;
    cursor: pointer;
  }

  .faq-list details > p {
    position: static !important;
    margin: 0;
    padding: 0 36px 22px 4px !important;
  }

  .faq-list details[open] > p {
    display: block;
  }

  .quick-answer,
  .home-page .quick-answer {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .contact-hero-v2,
  .contact-options,
  .contact-request,
  .contact-location,
  .contact-faq,
  .contact-cta {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .contact-hero-v2 {
    padding: 105px 0 64px;
  }

  .contact-hero-v2 > .content-shell {
    padding-top: 0;
  }

  .contact-options,
  .contact-request,
  .contact-location,
  .contact-faq {
    padding: 60px 0;
  }

  .contact-options .content-shell > div:last-child > a,
  .contact-location article {
    min-height: 0 !important;
  }

  .contact-page .fleet-benefits {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 22px 0;
  }

  .contact-request input,
  .contact-request select,
  .contact-request textarea {
    min-height: 44px;
  }

  .contact-cta {
    padding: 54px 0;
  }

  .contact-cta .content-shell {
    justify-items: center;
    text-align: center;
  }

  .contact-cta .primary-button {
    width: min(100%, 310px);
    justify-content: center;
  }

  .site-footer,
  .home-page .site-footer,
  .fleet-page .site-footer,
  .category-page .site-footer,
  .contact-page .site-footer,
  .price-page .site-footer,
  .about-page .site-footer,
  .service-page .site-footer,
  .guide-index-page .site-footer,
  .author-page .site-footer,
  .legal-page .site-footer,
  .article-route-page .site-footer,
  .footer-top,
  .footer-benefits,
  .footer-columns {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .site-footer .footer-shell {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .footer-brand-block p,
  .footer-columns a,
  .footer-columns p,
  .contact-request p,
  .contact-request small,
  .contact-location p,
  .contact-options p {
    overflow-wrap: anywhere;
  }

  .contact-dock {
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  /* The contact page already exposes every channel in the page itself. A
     second fixed copy only covers the phone cards on narrow screens. */
  .contact-page .contact-dock {
    display: none !important;
  }

  .contact-page .site-footer .footer-shell {
    padding-bottom: calc(36px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 560px) {
  .fleet-product-head,
  .featured-group-head {
    grid-template-columns: 1fr !important;
    justify-items: center;
    gap: 8px !important;
    padding-block: 18px;
    text-align: center;
  }

  .fleet-product-head > div,
  .featured-group-head > div {
    width: 100%;
  }

  .fleet-product-head > a,
  .featured-group-head > a {
    justify-self: center;
    margin-top: 2px !important;
    white-space: normal;
    text-align: center;
  }

  .home-page .product-showcase .section-heading,
  .home-page .gallery-heading .section-heading,
  .home-page .process-section .section-heading {
    text-align: center !important;
  }

  .home-page .product-showcase .section-heading > p:last-child,
  .home-page .gallery-heading .section-heading > p:last-child,
  .home-page .process-section .section-heading > p:last-child {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .home-page .featured-group-head,
  .home-page .featured-group:nth-child(2) .featured-group-head,
  .home-page .featured-group:nth-child(3) .featured-group-head {
    position: static;
    height: auto !important;
    min-height: 116px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center;
    justify-items: center;
    gap: 8px;
    padding: 18px 0;
    text-align: center;
  }

  .home-page .featured-group-head > div {
    width: 100%;
    max-width: none;
  }

  .home-page .featured-group-head > a {
    justify-self: center;
    margin-top: 4px !important;
  }

  .home-page .product-benefits small strong {
    display: block;
    margin-bottom: 2px;
  }

  .home-page .gallery-footer {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch !important;
    justify-items: center;
    text-align: center;
  }

  .home-page .gallery-footer p {
    width: 100%;
    margin-inline: auto;
    text-align: center !important;
  }

  .home-page .gallery-footer .secondary-button {
    width: min(100%, 300px);
    min-height: 44px;
    justify-self: center;
  }

  .quick-answer,
  .home-page .quick-answer {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .quick-answer .primary-button,
  .home-page .quick-answer .primary-button {
    width: min(100%, 300px);
    min-height: 48px;
    align-self: center;
    justify-content: center;
  }

  .footer-action-block,
  .home-page .footer-action-block {
    width: 100%;
    max-width: none;
    justify-items: center;
    text-align: center;
  }

  .footer-action-block .primary-button,
  .home-page .footer-action-block .primary-button {
    width: min(100%, 340px);
    justify-content: center;
  }

  .footer-action-block p,
  .footer-action-block a,
  .home-page .footer-action-block p,
  .home-page .footer-action-block a {
    text-align: center !important;
  }

  .contact-hero-v2 ul {
    grid-template-columns: 1fr;
  }

  .contact-hero-v2 aside > div {
    grid-template-columns: 1fr;
  }

  .contact-location .primary-button,
  .contact-location .secondary-button {
    width: 100%;
    margin: 0 0 10px;
    justify-content: center;
  }

  .contact-channel {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  /* Keep every enabled floating contact visible in a right-side stack. */
  .contact-dock {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    backdrop-filter: none;
  }

  .contact-dock-toggle {
    display: none;
  }

  .contact-dock-channels {
    position: static;
    max-width: none;
    max-height: calc(100dvh - 24px);
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }
}