/* ============================================
   Miami Clinical Psychotherapy – Responsive Styles
   Mobile-first considerations, breakpoints
   ============================================ */

/* --- Tablet (max 992px) --- */
@media (max-width: 992px) {
  :root {
    --size-h1: 42px;
    --size-h2: 34px;
    --section-padding: 60px;
  }

  /* Hide breadcrumb so header is directly followed by hero/content */
  .breadcrumb {
    display: none;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: left;
  }
  .hero-content { order: 1; }
  .hero-image-wrap { order: 2; }
  .hero-desc { margin-left: 0; margin-right: auto; }
  .hero-buttons { justify-content: flex-start; }
  .hero-stats { justify-content: flex-start; }
  .hero-floating-card { right: 50%; transform: translateX(50%); bottom: -20px; }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .counseling-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .meet-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .meet-image-wrap { order: 1; }
  .meet-content { order: 2; }
  .meet-image { min-height: 400px; max-width: 400px; margin: 0 auto; }

  .testimonial-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .connect-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .booking-card { max-width: 100%; }

  .final-cta-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .final-cta-content { order: 1; }
  .final-cta-image-wrap { order: 2; }
  .final-cta-image { min-height: 300px; }

  .page-hero-title { font-size: 42px; }
  .about-bio-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-bio-image-wrap { order: 1; }
  .about-bio-content { order: 2; }
  .about-bio-image { min-height: 400px; }
  .credentials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .philosophy-quote { font-size: 18px; }

  .contact-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact-info-col { order: 1; }
  .contact-form-col { order: 2; }
  .contact-book-card {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    text-align: center;
  }
  .contact-book-visual { order: -1; }
  .contact-book-calendar-icon { font-size: 48px; }

  /* --- Tablet/mobile: contact page cards – icon above text, center-aligned --- */
  .contact-section .contact-cards {
    align-items: stretch;
  }
  .contact-section .contact-card {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 12px;
  }
  .contact-section .contact-card-content {
    align-items: center;
    text-align: center;
  }

  /* --- Tablet/mobile: contact page form – left-align labels and fields --- */
  .contact-section .contact-form-card,
  .contact-section .contact-form {
    text-align: left;
  }
  .contact-section .contact-form-field label,
  .contact-section .contact-form-field-radio legend {
    text-align: left;
  }
  .contact-section .contact-form-field input,
  .contact-section .contact-form-field textarea {
    text-align: left;
  }
  .contact-section .contact-form-radios {
    justify-content: flex-start;
  }
  .contact-section .contact-form-title {
    text-align: left;
  }
  .contact-section .contact-form-note,
  .contact-section .contact-faq-link {
    text-align: left;
  }

  .service-row {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 72px;
  }
  .service-row-alt .service-row-content { order: 1; }
  .service-row-alt .service-row-image { order: 2; }
  .service-row-content { padding: 0; }
  .service-row-image { order: 2; }
  .service-row-header {
    justify-content: center;
    text-align: center;
  }
  .img-placeholder { height: 320px; }
  .approaches-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .approach-card:nth-child(4),
  .approach-card:nth-child(5),
  .approach-card:nth-child(6) {
    grid-column: auto;
  }

  .pricing-card {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 32px;
  }
  .pricing-card-right { order: 2; }
  .pricing-card-left { order: 1; }
  .pricing-card-left {
    text-align: center;
  }
  .pricing-card-price {
    justify-content: center;
  }
  .pricing-card-period {
    text-transform: capitalize;
  }
  .pricing-card-amount { font-size: 64px; }
  .insurance-cards { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }

  .blog-hero { padding: 80px 0; }
  .blog-hero-title { font-size: 42px; }
  .blog-featured-card {
    grid-template-columns: 1fr;
  }
  .blog-featured-image { min-height: 320px; }
  .blog-featured-image img { min-height: 320px; }
  .blog-featured-content { padding: 32px 24px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .home-blogs-grid { grid-template-columns: repeat(2, 1fr); }

  /* --- Tablet/mobile: blog page – center featured card and grid cards --- */
  .blog-featured-section .blog-featured-content {
    text-align: center;
    align-items: center;
  }
  .blog-featured-section .blog-featured-content .blog-badge {
    align-self: center;
  }
  .blog-featured-section .blog-featured-meta {
    justify-content: center;
  }
  .blog-featured-section .btn-featured-cta {
    align-self: center;
  }
  .blog-grid-section .blog-card-body {
    text-align: center;
  }
  .blog-grid-section .blog-card-body .blog-badge {
    display: inline-block;
  }
  .blog-grid-section .blog-card-link {
    display: inline-block;
  }
  .blog-contact-social {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .blog-contact-social-label {
    display: block;
    margin-bottom: 8px;
  }
  .blog-contact-section .blog-social-list {
    justify-content: center;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand { grid-column: 1 / -1; }

  /* --- Tablet/mobile: center page text (exclude hero sections, meet-therapist, and bullets) --- */
  #main-content section:not(.hero):not([class*="page-hero"]):not(.blog-hero):not(.blog-post-hero):not(.meet-therapist) {
    text-align: center;
  }
  #main-content section:not(.hero):not([class*="page-hero"]):not(.blog-hero):not(.blog-post-hero):not(.meet-therapist) ul,
  #main-content section:not(.hero):not([class*="page-hero"]):not(.blog-hero):not(.blog-post-hero):not(.meet-therapist) ol {
    text-align: left;
  }
  /* Keep section subtitles and block content centered; lists stay left */
  #main-content section:not(.hero):not([class*="page-hero"]):not(.blog-hero):not(.blog-post-hero):not(.meet-therapist) .section-subtitle,
  #main-content section:not(.hero):not([class*="page-hero"]):not(.blog-hero):not(.blog-post-hero):not(.meet-therapist) .section-cta {
    text-align: center;
  }

  /* --- Tablet/mobile: Connect section – center all content --- */
  .connect-section .section-label,
  .connect-section .section-title,
  .connect-section .connect-desc,
  .connect-section .connect-follow-label {
    text-align: center;
  }
  .connect-section .connect-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .connect-section .social-icons {
    justify-content: center;
  }
  .connect-section .connect-content {
    text-align: center;
  }
  .connect-section .booking-card {
    margin-left: auto;
    margin-right: auto;
  }

  /* --- Tablet/mobile: Quick Inquiry form – left-align labels and fields --- */
  .connect-section .inquiry-form-wrap,
  .connect-section .inquiry-form-card {
    text-align: left;
  }
  .connect-section .inquiry-form label,
  .connect-section .inquiry-form input,
  .connect-section .inquiry-form textarea {
    text-align: left;
  }
  .connect-section .inquiry-form .btn-full {
    text-align: left;
  }
  .connect-section .inquiry-confidential {
    text-align: left;
  }

  /* --- Tablet/mobile: footer center-aligned --- */
  .site-footer .footer-grid {
    text-align: center;
  }
  .site-footer .footer-col {
    text-align: center;
  }
  .site-footer .footer-brand {
    text-align: center;
  }
  .site-footer .footer-brand .footer-logo {
    display: inline-block;
  }
  .site-footer .footer-tagline,
  .site-footer .footer-badge,
  .site-footer .footer-heading,
  .site-footer .footer-social-label {
    text-align: center;
  }
  .site-footer .footer-tagline {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .site-footer .footer-social {
    text-align: center;
  }
  .site-footer .footer-social-list {
    justify-content: center;
  }
  .site-footer .footer-links,
  .site-footer .footer-contact {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .site-footer .footer-links li,
  .site-footer .footer-contact li {
    text-align: center;
  }
  .site-footer .footer-bottom {
    text-align: center;
  }
  .site-footer .footer-bottom-inner {
    justify-content: center;
    align-items: center;
  }
  .site-footer .footer-bottom-left {
    text-align: center;
    align-items: center;
  }
  .site-footer .footer-legal {
    justify-content: center;
  }
}

/* --- Mobile nav: show hamburger --- */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 100%);
    height: 100vh;
    background: #0a0e14;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    flex-direction: column;
    align-items: stretch;
    padding: 80px 24px 24px;
    gap: 24px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .nav-close {
    display: flex;
  }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-list .nav-link {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .nav-cta {
    flex-direction: column;
    align-items: stretch;
    margin-top: 16px;
  }
  .nav-phone { justify-content: flex-start; }
  .header-inner { padding: 12px 24px; }

  /* --- Tablet/mobile: logo centered in header --- */
  .header-inner {
    justify-content: center;
    position: relative;
  }
  .header-inner .logo {
    margin: 0;
  }
  .header-inner .nav-toggle {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* --- Mobile (max 768px) --- */
@media (max-width: 768px) {
  :root {
    --size-h1: 36px;
    --size-h2: 28px;
    --size-h3: 20px;
    --section-padding: 48px;
  }

  .container { padding: 0 20px; }

  .hero { padding-top: 40px; }
  .hero-title { font-size: 36px; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn { width: 100%; text-align: left; }
  .hero-stats { flex-direction: column; align-items: flex-start; }
  .hero-image { min-height: 300px; }
  .hero-floating-card {
    position: relative;
    right: auto;
    bottom: auto;
    transform: none;
    margin-top: 20px;
    max-width: 100%;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .counseling-cards-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .section-cta .btn { width: 100%; text-align: center; }

  .meet-image { min-height: 340px; max-width: 100%; }
  .meet-floating-badge { right: 16px; bottom: 16px; padding: 12px 16px; }
  .meet-languages { max-width: 100%; }

  .testimonial-card { padding: 24px; }
  .testimonial-quote { font-size: 36px; }

  .accordion-trigger { padding: 16px 20px; font-size: 15px; }
  .accordion-panel-inner { padding: 0 20px 16px 20px; }

  .connect-inner { gap: 32px; }
  .final-cta { margin-left: 20px; margin-right: 20px; }
  .final-cta-buttons { flex-direction: column; }
  .final-cta-buttons .btn { width: 100%; text-align: center; }
  .final-cta-image { min-height: 260px; }

  .page-hero-title { font-size: 32px; }
  .page-hero-subtitle { font-size: var(--size-small); }
  .about-bio-image { min-height: 340px; }
  .about-bio-buttons { flex-direction: column; }
  .about-bio-buttons .btn { width: 100%; text-align: center; }
  .credentials-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .philosophy-quote { font-size: 17px; padding: 0 16px; }

  .contact-form-row-two {
    grid-template-columns: 1fr;
  }
  .contact-crisis-notice { padding: 12px 16px; margin-bottom: 24px; }
  .contact-crisis-inner { flex-wrap: wrap; }
  .contact-expect-steps { flex-direction: column; align-items: stretch; gap: 12px; }
  .contact-expect-arrow { transform: rotate(90deg); }
  .contact-expect-step { flex-direction: row; min-width: auto; gap: 12px; justify-content: flex-start; }
  .contact-expect-label { text-align: left; }
  .contact-book-card { padding: 24px 20px; }

  .service-row { margin-bottom: 56px; }
  .service-row-title { font-size: 26px; }
  .img-placeholder { height: 280px; }
  .approaches-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .approach-card:nth-child(4),
  .approach-card:nth-child(5),
  .approach-card:nth-child(6) {
    grid-column: auto;
  }
  .approach-card-icon { position: static; margin-bottom: 12px; }
  .approach-card-title { margin-left: 0; margin-top: 0; }
  .conditions-tag { padding: 8px 16px; font-size: 13px; }

  .insurance-hero { padding: 80px 0; }
  .insurance-hero-title { font-size: 42px; }
  .pricing-card-section { padding-bottom: 56px; }
  .pricing-card { padding: 24px 20px; border-radius: 16px; }
  .pricing-card-amount { font-size: 56px; }
  .pricing-card-period { font-size: 18px; }
  .insurance-info-title { font-size: 32px; }
  .benefits-grid { grid-template-columns: 1fr; }
  .benefits-title { font-size: 32px; margin-bottom: 32px; }
  .insurance-faq-title { font-size: 32px; }
  .insurance-faq-a { padding-left: 0; }
  .insurance-cta-title { font-size: 28px; }
  .insurance-cta-buttons { flex-direction: column; }
  .insurance-cta-buttons .btn { width: 100%; }

  .blog-hero-title { font-size: 36px; }
  .blog-featured-title { font-size: 26px; }
  .blog-featured-content { padding: 24px 20px; }
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .home-blogs-grid { grid-template-columns: 1fr; }
  .blog-card-image { height: 180px; }
  .blog-cta-title { font-size: 28px; }
  .blog-cta-buttons { flex-direction: column; }
  .blog-cta-buttons .btn { width: 100%; }

  .blog-contact-section { padding: 56px 0; }
  .blog-contact-title { font-size: 28px; }
  .blog-contact-row { flex-direction: column; gap: 32px; }
  .blog-contact-info { flex-direction: column; gap: 16px; }
  .blog-contact-social {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .blog-contact-social-label {
    display: block;
    margin-bottom: 8px;
  }
  .blog-contact-section .blog-social-list {
    justify-content: center;
  }

  .blog-post-title { font-size: 28px; }
  .blog-post-body { padding: 32px 20px 0; }
  .blog-post-cta { padding: 24px 20px; }
  .blog-post-cta-buttons { flex-direction: column; }
  .blog-post-cta-buttons .btn { width: 100%; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 32px;
  }
  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }
  .footer-legal { justify-content: center; }
}

/* --- Small mobile (max 480px) --- */
@media (max-width: 480px) {
  .logo-text { font-size: 14px; }
  .logo-cred { display: block; margin-top: 2px; }
  .hero-badge { font-size: 12px; padding: 6px 12px; }
  .btn { padding: 12px 24px; font-size: 15px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .main-nav { transition: none; }
  .service-card { transition: none; }
  .accordion-panel { transition: none; }
  .accordion-item.is-open .accordion-panel { transition: none; }
}