/**
 * The Molar Dental Care — responsive overrides
 * Loaded after the Webflow shared stylesheet on all pages.
 */

/* ── Global ── */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

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

.w-layout-grid,
.w-layout-blockcontainer {
  max-width: 100%;
}

.container,
.container-medium,
.container-small,
.nav-list {
  box-sizing: border-box;
}

/* Long addresses and contact lines */
.address-title,
.footer-contact-title,
.contact-description,
.footer-description {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── Large tablet (≤991px) ── */
@media screen and (max-width: 991px) {
  body {
    --_typography---h1--h1: 3.25rem;
    --_typography---h2--h2: 2.75rem;
    --_typography---h3--h3: 2.5rem;
    --_typography---heading-big--heading-big: 8rem;
    --_layout---spacing--section-spacing-bottom: 5rem;
    --_layout---spacing--section-spacing: 5rem;
    --_layout---spacing--section-spacing-top: 5rem;
  }

  .section-spacing-bottom {
    padding-bottom: 5rem;
  }

  .section-spacing,
  .section-spacing-top {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .grid-footer-center,
  .footer .grid-footer-center {
    grid-template-columns: 1fr 1fr !important;
  }

  .footer-about {
    grid-column: 1 / -1;
  }

  .footer .footer-bg {
    min-height: auto !important;
  }

  .hero-top-content {
    text-align: center;
  }

  .hero-left,
  .hero-right {
    justify-content: center;
  }

  .review-info {
    max-width: 100%;
  }
}

/* ── Tablet (≤767px) ── */
@media screen and (max-width: 767px) {
  body {
    --_typography---h1--h1: 2.75rem;
    --_typography---h2--h2: 2.25rem;
    --_typography---h3--h3: 2rem;
    --_typography---heading-big--heading-big: 6rem;
  }

  .grid-footer-center,
  .footer .grid-footer-center {
    grid-template-columns: 1fr !important;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-social-list {
    justify-content: center;
  }

  .hero-section,
  .hero-bottom {
    overflow: hidden;
  }

  .hero-avatar-list {
    width: min(100%, 420px) !important;
    height: min(100vw, 420px) !important;
    max-width: calc(100vw - 2.5rem);
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    bottom: -280px;
  }

  .avatar-category-item {
    width: 140px !important;
  }

  .hero-bottom-info {
    left: 50%;
    transform: translateX(-50%);
  }

  .grid-contact,
  .grid-contact-info,
  .grid-form-input {
    grid-template-columns: 1fr !important;
  }

  .grid-bento,
  .grid-bento-top,
  .grid-bento-bottom,
  .grid-bento-right,
  .bento-left {
    grid-template-columns: 1fr !important;
  }

  .grid-statistics,
  .grid-team,
  .grid-feature,
  .grid-approach,
  .grid-service,
  .grid-gallery {
    grid-template-columns: 1fr !important;
  }

  .review-ticker,
  .about-gallery-ticker {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .review-ticker::-webkit-scrollbar,
  .about-gallery-ticker::-webkit-scrollbar {
    display: none;
  }

  .review-item {
    width: min(85vw, 320px) !important;
    flex-shrink: 0;
  }

  .service-top {
    grid-template-columns: 1fr !important;
  }

  .cta-content {
    grid-template-columns: 1fr !important;
  }

  .cta-info,
  .cta-button-wrap {
    width: 100%;
  }

  .w-nav-overlay {
    width: 100% !important;
  }

  .nav-menu {
    width: calc(100% - 2.5rem);
  }

  .logo {
    max-width: 130px;
    width: auto;
    height: auto;
  }
}

/* ── Mobile (≤479px) ── */
@media screen and (max-width: 479px) {
  body {
    --_typography---h1--h1: 2.125rem;
    --_typography---h2--h2: 1.875rem;
    --_typography---h3--h3: 1.5rem;
    --_typography---h4--h4: 1.375rem;
    --_typography---heading-big--heading-big: 4.25rem;
    --_layout---container-gutter: 1rem;
    --_layout---container-medium-gutter: 1rem;
    --_layout---container-small-gutter: 1rem;
  }

  .section-spacing-bottom {
    padding-bottom: 4rem;
  }

  .hero-section {
    padding-top: 3rem;
    padding-bottom: 5rem;
  }

  .hero-avatar-list {
    width: min(100%, 300px) !important;
    height: min(78vw, 300px) !important;
    max-width: calc(100vw - 1.5rem);
    bottom: -200px;
  }

  .avatar-category-item {
    width: 120px !important;
    height: 36px !important;
    padding: 0.25rem 0.5rem !important;
  }

  .avatar-category-title {
    font-size: 0.7rem !important;
  }

  .hero-bottom {
    margin-top: 3rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .hero-bottom-content {
    height: auto !important;
    min-height: 240px;
  }

  .hero-bottom-info {
    width: 150px !important;
    height: 150px !important;
    bottom: -70px !important;
  }

  .hero-button-title {
    max-width: 90px;
    font-size: 0.75rem;
  }

  .hero-left-shape,
  .hero-right-shape {
    display: none;
  }

  .grid-nav {
    grid-template-columns: 1fr auto !important;
    padding: 0.5rem 0.75rem !important;
  }

  .brand {
    justify-self: center;
  }

  .logo {
    max-width: 110px;
  }

  .button-primary,
  .appointment-button .button-primary {
    width: 100%;
    text-align: center;
  }

  .button-icon-primary .button-text {
    font-size: 0.8125rem;
  }

  .footer .footer-bg {
    min-height: auto !important;
    padding-top: 4rem;
    padding-bottom: 2rem;
  }

  .footer .footer-map-bg iframe {
    transform: none !important;
    height: 100%;
    min-height: 220px;
  }

  .footer .footer-content {
    padding: 1rem !important;
  }

  .footer-badge-list {
    flex-wrap: wrap;
  }

  .grid-contact {
    padding: 1rem !important;
  }

  .contact-left,
  .contact-right {
    min-width: 0;
  }

  .contact-image,
  .contact-simple-image {
    width: 100%;
    object-fit: cover;
  }

  .appointment-simple-form,
  .contact-hero-content {
    padding-left: 0;
    padding-right: 0;
  }

  .review-item {
    width: min(88vw, 280px) !important;
  }

  .stat-counter-item,
  .grid-statistics > * {
    min-width: 0;
  }

  .team-item,
  .feature-item,
  .service-accordion-item {
    min-width: 0;
  }

  .bento-testimonial-text,
  .hero-description,
  .contact-main-title {
    max-width: 100%;
  }

  .cta-content,
  .cta-simple-info {
    padding: 1.5rem !important;
  }

  .w-form {
    width: 100%;
  }

  .form-input,
  .form-select,
  .contact-input,
  .contact-select,
  .contact-textarea {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ── Very small screens (≤360px) ── */
@media screen and (max-width: 360px) {
  body {
    --_typography---h1--h1: 1.875rem;
    --_typography---h2--h2: 1.625rem;
  }

  .hero-avatar-list {
    width: min(100%, 260px) !important;
    height: 260px !important;
    bottom: -170px;
  }

  .avatar-category-item {
    width: 105px !important;
  }
}

/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse) {
  .nav-link,
  .footer-link,
  .button-sm,
  .menu-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Statistics & benefits: background image must fill a sized container */
.statistics-content {
  min-height: 420px;
}

.statistics-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.grid-statistics,
.stat-overlay {
  z-index: 2;
}

.benefits-left {
  min-height: 480px;
}

.benefits-left-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.benefits-left-content,
.benefits-overlay {
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .statistics-content {
    min-height: 300px;
  }

  .benefits-left {
    min-height: 400px;
  }
}

/* Reduced motion: disable decorative transforms */
@media (prefers-reduced-motion: reduce) {
  .hero-avatar-list,
  .avatar-category {
    transform: none !important;
  }
}