/* Round 10 responsive hardening hotfix.
   Purpose: remove mobile/tablet overflow and replace desktop-style horizontal
   rails with true responsive stacked layouts on narrow screens. */

html, body, #root {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body { min-width: 0; }

img, video, canvas, iframe, svg {
  max-width: 100%;
}

section, header, footer, main, .container {
  min-width: 0;
}

@media (max-width: 991px) {
  /* Section headings must stop behaving like desktop two-column headers. */
  .v24-section-head,
  .v34-services-section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: .75rem !important;
    width: 100%;
    margin-bottom: 1.5rem !important;
  }

  .v24-section-head > div,
  .v24-section-head > p,
  .v34-services-section-head > div,
  .v34-services-section-head > p {
    width: 100%;
    max-width: none !important;
    min-width: 0;
  }

  .v24-section-head > p,
  .v34-services-section-head > p {
    margin-top: 0 !important;
  }

  /* Home services: no clipped 80%-width cards on small screens. */
  .v25-service-shell {
    display: block !important;
  }

  .v25-service-shell > .v21-service-arrow {
    display: none !important;
  }

  .v23-service-tabs.v25-service-rail {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    gap: .9rem !important;
    padding: 0 !important;
  }

  .v25-service-rail .v23-service-tab {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    scroll-snap-align: none !important;
  }

  /* Booking steps: real responsive grid, never a partially clipped carousel. */
  .v33-timeline {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    gap: .85rem !important;
  }

  .v33-timeline-step {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
    scroll-snap-align: none !important;
  }

  /* Team: two clean columns on tablet; no forced 4-column min widths. */
  .v34-team-showcase,
  .v34-team-showcase.is-teaser,
  .v34-team-showcase.is-directory {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    gap: 1rem !important;
    scroll-snap-type: none !important;
  }

  .v34-team-showcase .v34-team-card,
  .v34-team-showcase.is-teaser .v34-team-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    scroll-snap-align: none !important;
  }

  .v21-team-cta .container {
    gap: 1rem;
  }

  /* Inner CMS pages. */
  .v34-services-hero-grid,
  .v34-service-detail-grid,
  .v34-service-detail-body-grid,
  .v34-team-page-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .v34-services-hero-grid,
  .v34-service-detail-grid,
  .v34-team-page-hero-grid {
    gap: 2rem !important;
  }

  .v34-services-hero-visual,
  .v34-service-detail-media,
  .v34-team-page-visual {
    width: 100%;
    min-width: 0;
  }

  /* Prevent offcanvas from ever exceeding the viewport. */
  .v24-offcanvas,
  .v34-offcanvas {
    width: min(380px, 92vw) !important;
    max-width: 92vw !important;
  }
}

@media (max-width: 767px) {
  .container {
    --bs-gutter-x: 1.5rem;
  }

  .v24-section-head,
  .v34-services-section-head {
    gap: .55rem !important;
    margin-bottom: 1.15rem !important;
  }

  .v24-section-head h2,
  .v34-services-section-head h2 {
    margin-bottom: .55rem !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
  }

  .v24-section-head h2 br,
  .v34-services-section-head h2 br {
    display: none;
  }

  .v24-section-head > p,
  .v34-services-section-head > p {
    font-size: .78rem !important;
    line-height: 1.9 !important;
  }

  /* Home services become one proper column, fully within the viewport. */
  .v23-service-tabs.v25-service-rail {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .v25-service-rail .v23-service-tab {
    min-height: 0 !important;
  }

  /* Team: one full-width card per row. */
  .v34-team-showcase,
  .v34-team-showcase.is-teaser,
  .v34-team-showcase.is-directory {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .v34-team-card {
    border-radius: 22px !important;
  }

  .v34-team-portrait {
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
    max-height: 340px;
  }

  .v34-team-nameplate {
    padding: 1rem 1.05rem 1.1rem !important;
  }

  .v34-team-nameplate h3 {
    font-size: 1.15rem !important;
  }

  .v34-team-content {
    padding: 1rem 1.05rem 1.1rem !important;
  }

  .v34-team-card-footer {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .v34-team-highlight {
    max-width: 100% !important;
  }

  .v21-team-cta .container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .v21-team-cta a {
    width: 100%;
    justify-content: center;
  }

  /* Booking steps stack vertically instead of showing clipped next cards. */
  .v33-timeline {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-top: 1.5rem !important;
  }

  .v33-timeline-step {
    min-height: 0 !important;
  }

  /* Services / service detail: mobile-first proportions. */
  .v34-services-hero,
  .v34-service-detail-hero,
  .v34-team-page-hero {
    padding-top: 5.8rem !important;
    padding-bottom: 3rem !important;
  }

  .v34-services-hero-copy h1,
  .v34-service-detail-copy h1,
  .v34-team-page-copy h1 {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
  }

  .v34-services-hero-copy > p,
  .v34-service-detail-copy > p,
  .v34-team-page-copy > p {
    font-size: .78rem !important;
    line-height: 1.9 !important;
  }

  .v34-services-hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .v34-services-hero-actions > a,
  .v34-services-hero-actions > button,
  .v34-primary-btn,
  .v34-ghost-btn {
    width: 100%;
    min-width: 0;
  }

  .v34-services-hero-visual,
  .v34-service-detail-media,
  .v34-team-page-visual {
    min-height: 300px !important;
    max-height: 420px;
    border-radius: 24px !important;
  }

  .v34-services-hero-card {
    right: 14px !important;
    left: 14px !important;
    bottom: 14px !important;
    padding: 1rem !important;
  }

  .v34-services-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .v34-services-card {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    min-width: 0;
    border-radius: 22px !important;
  }

  .v34-services-card-media {
    min-height: 220px !important;
  }

  .v34-services-card-body {
    padding: 1.2rem !important;
  }

  .v34-service-detail-body {
    padding: 3rem 0 !important;
  }

  .v34-service-detail-body article,
  .v34-service-detail-body aside {
    padding: 1.3rem !important;
    border-radius: 22px !important;
  }

  .v34-services-closing .container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .v34-services-closing a {
    width: 100%;
    justify-content: center;
  }

  /* Legacy/inner page two-column content is always stacked on phones. */
  .v29-th-layout,
  .v29-th-layout-reverse,
  .v29-sb-layout,
  .v29-of-grid,
  .v24-about-grid,
  .v24-contact-grid,
  .v24-auction-grid,
  .v24-offers-stage {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Homepage hero content stays inside the viewport. */
  .v24-hero,
  .v24-hero-container {
    min-height: 720px !important;
  }

  .v24-hero-content {
    width: 100% !important;
    max-width: none !important;
    padding-top: 4.5rem !important;
    padding-bottom: 12rem !important;
  }

  .v24-hero-content h1 {
    overflow-wrap: anywhere;
  }

  .v24-hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .v24-hero-actions > a,
  .v24-hero-actions > button {
    width: 100%;
    justify-content: center;
  }

  .v24-visit-card,
  .v24-visit-card-compact {
    right: 0 !important;
    left: 0 !important;
    bottom: 1rem !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Footer/content rows should never remain side-by-side on phones. */
  .v24-footer-top,
  .v24-footer-bottom {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .commerce-cart-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 575px) {
  .v34-brand span {
    min-width: 0;
  }

  .v34-brand strong {
    font-size: .72rem !important;
    line-height: 1.45;
  }

  .v34-brand small {
    display: none !important;
  }

  .v34-brand img {
    width: 44px !important;
    height: 44px !important;
  }

  .v34-team-portrait {
    aspect-ratio: 4 / 3 !important;
    max-height: 300px;
  }

  .v34-team-content > p {
    font-size: .7rem !important;
    line-height: 1.8 !important;
  }

  .v34-team-tags span,
  .v34-team-highlight,
  .v34-team-profile-link,
  .v34-team-proof {
    font-size: .58rem !important;
  }

  .v34-services-hero-visual,
  .v34-service-detail-media,
  .v34-team-page-visual {
    min-height: 250px !important;
  }

  .v24-hero,
  .v24-hero-container {
    min-height: 700px !important;
  }

  .commerce-cart-item {
    grid-template-columns: 44px minmax(0, 1fr) 32px !important;
    gap: .55rem !important;
  }

  .commerce-cart-item-icon {
    width: 44px !important;
    height: 44px !important;
  }
}