/* ==========================================================================
   Global Mobile Responsive — All Pages
   Padding, layout, overflow, CTA stacks
   ========================================================================== */

@media (max-width: 960px) {
  :root {
    --container-padding-x: clamp(1.25rem, 4.5vw, 2rem);
  }
}

@media (max-width: 640px) {
  :root {
    --container-padding-x: clamp(1.125rem, 5vw, 1.625rem);
  }

  /* --- Overflow & media --- */
  .rich-text,
  .blog-content,
  .svc-content,
  .story-detail__prose {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .rich-text img,
  .blog-content img,
  .svc-content img,
  .story-detail__prose img,
  .blog-detail__figure img {
    max-width: 100%;
    height: auto;
  }

  .rich-text table,
  .blog-content table,
  .svc-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .rich-text pre,
  .blog-content pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Breadcrumb --- */
  .breadcrumb {
    flex-wrap: wrap;
    row-gap: 4px;
    font-size: 0.8125rem;
  }

  /* --- Page shells --- */
  .about-page,
  .contact-page,
  .appointment-page,
  .blog-page,
  .blog-detail,
  .reviews-page,
  .portfolio-page,
  .services-page,
  .service-detail,
  .story-detail {
    padding-bottom: var(--space-6);
  }

  /* --- Panels --- */
  .svc-panel,
  .about-panel,
  .story-detail__panel,
  .blog-detail__article {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }

  /* --- Section spacing --- */
  .home-section {
    padding-block: var(--space-6);
  }

  .about-page__section,
  .svc-section {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
  }

  .contact-page__hero,
  .appointment-page__hero {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
  }

  /* --- Stats bars --- */
  .home-stats__bar,
  .about-page__stats .review-stats,
  .reviews-stats {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }

  /* --- Split / grid cards --- */
  .about-split__col,
  .contact-card,
  .appt-card,
  .appointment-page__form-card {
    padding: var(--space-3);
  }

  .about-hero__inner,
  .svc-hero {
    margin-bottom: var(--space-4);
  }

  .svc-hero__media {
    max-width: 100%;
    margin-inline: auto;
  }

  .home-hero__aside {
    max-width: 100%;
  }

  .home-hero__media {
    max-width: 100%;
  }

  .home-highlights__media {
    max-width: 100%;
  }

  .about-hero__media {
    max-width: 100%;
  }

  .svc-hero {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .svc-hero__content {
    order: -1;
  }

  .about-hero {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .about-hero__content {
    order: -1;
  }

  .story-detail__compare-grid {
    grid-template-columns: 1fr;
  }

  .story-detail__compare-label {
    font-size: 0.6875rem;
  }

  .contact-page__layout {
    gap: var(--space-3);
  }

  .appointment-page__layout {
    gap: var(--space-3);
  }

  /* --- CTA blocks — stacked full-width buttons --- */
  .about-cta,
  .home-appointment__inner,
  .svc-appointment__inner,
  .services-page__cta,
  .portfolio-page__cta,
  .blog-page__cta,
  .blog-detail__cta,
  .reviews-page__cta,
  .reviews-page__feedback,
  .story-detail__cta,
  .contact-page__cta {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }

  .about-cta__actions,
  .home-appointment__cta,
  .svc-appointment__inner--cta,
  .services-page__cta-actions,
  .portfolio-page__cta-actions,
  .blog-page__cta-actions,
  .blog-detail__cta-actions,
  .reviews-page__cta-actions,
  .story-detail__cta-actions {
    width: 100%;
    flex-direction: column;
  }

  .about-cta__actions .btn,
  .home-appointment__cta .btn,
  .svc-appointment__inner .btn,
  .services-page__cta-actions .btn,
  .portfolio-page__cta-actions .btn,
  .blog-page__cta-actions .btn,
  .blog-detail__cta-actions .btn,
  .reviews-page__cta-actions .btn,
  .story-detail__cta-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* --- Section row headers --- */
  .home-section__head--row,
  .svc-section__head--row,
  .blog-detail__section-head--row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* --- Filters & pills --- */
  .blog-page__filters {
    gap: 6px;
  }

  .blog-pill {
    padding: 7px 12px;
    font-size: 0.75rem;
  }

  /* --- Pagination --- */
  .blog-pagination,
  .portfolio-pagination,
  .reviews-pagination {
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
    justify-content: center;
  }

  /* --- Review / service cards --- */
  .review-card,
  .svc-review,
  .home-reviews__card {
    padding: var(--space-3);
  }

  .home-service-card__body,
  .service-card__body {
    padding: var(--space-3);
  }

  /* --- FAQ --- */
  .faq-item__question {
    padding: var(--space-3);
    font-size: 0.9375rem;
  }

  .faq-item.is-open .faq-item__question {
    padding-bottom: var(--space-2);
  }

  .faq-item__answer,
  .faq-item.is-open .faq-item__answer {
    padding-inline: var(--space-3);
  }

  .faq-item.is-open .faq-item__answer {
    padding-bottom: var(--space-3);
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding-x: clamp(1.25rem, 5.5vw, 1.75rem);
  }

  .home-hero__inner {
    padding-block: var(--space-3);
  }

  .home-hero .container,
  .home-trust .container {
    padding-inline-start: max(
      var(--container-padding-x),
      env(safe-area-inset-inline-start, env(safe-area-inset-right, 0px))
    );
    padding-inline-end: max(
      var(--container-padding-x),
      env(safe-area-inset-inline-end, env(safe-area-inset-left, 0px))
    );
  }

  .home-stats__items {
    gap: var(--space-2);
  }

  .home-stats__item {
    min-width: 72px;
  }

  .appointment-page__form-card {
    padding: var(--space-3);
  }

  .blog-author,
  .story-author {
    padding: var(--space-3);
  }

  .about-bio__card,
  .about-card,
  .about-list__item,
  .about-timeline__item,
  .svc-benefit,
  .svc-step,
  .svc-post {
    padding: var(--space-3);
  }
}

@media (max-width: 360px) {
  .home-hero__title {
    font-size: 1.625rem;
  }

  .home-stats__value {
    font-size: 1.75rem;
  }

  .btn--lg {
    padding: 12px 16px;
    font-size: 0.875rem;
  }
}