/* ==========================================================================
   Jane Here — Clarify Tarot
   Responsive Stylesheet: responsive.css
   Semantic Media Queries for Desktop, Tablet, and Mobile Breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large Tablet & Small Laptop (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --nav-height: 70px;
  }

  .site-nav {
    gap: 20px;
  }

  .hero-grid,
  .process-split-grid,
  .product-layout-grid,
  .contact-layout-grid {
    gap: 40px;
  }

  .hero-photo-wrapper img {
    height: 440px;
  }

  .readings-grid,
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-boundaries-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .boundary-card.col-6,
  .boundary-card.col-4 {
    grid-column: span 1;
  }

  .domain-pills-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-brand-col {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   Tablet Portrait & Down (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .site-nav,
  .nav-search-btn {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .section-spacious {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .hero-editorial {
    padding-top: 24px;
    padding-bottom: 56px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero-visual-frame {
    order: -1;
  }

  .hero-photo-wrapper img {
    height: 360px;
  }

  .quick-facts-strip {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .scenarios-grid {
    grid-template-columns: 1fr;
  }

  .scenario-card.full-width-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .narrative-cards-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .narrative-card {
    padding: 28px 24px;
  }

  .bento-boundaries-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .boundary-card.col-6,
  .boundary-card.col-4 {
    grid-column: span 1;
  }

  .process-split-grid {
    grid-template-columns: 1fr;
  }

  .process-image-card img {
    height: 320px;
  }

  .process-floating-note {
    position: static;
    max-width: 100%;
    margin-top: 16px;
  }

  .readings-grid,
  .testimonials-grid,
  .deliverables-grid,
  .readiness-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .product-layout-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .product-image-stage {
    position: static;
  }

  .product-image-stage img {
    height: 340px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.col-span-2,
  .addon-checkbox-card,
  .order-summary-row,
  .custom-question-field-wrapper {
    grid-column: span 1;
  }

  .intake-card,
  .wizard-container,
  .contact-card-box {
    padding: 28px 20px;
  }

  .domain-pills-grid {
    grid-template-columns: 1fr;
  }

  .closing-cta-card {
    padding: 40px 24px;
  }

  .contact-layout-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

  .footer-brand-col {
    grid-column: span 1;
  }

  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   Small Mobile Phones (max-width: 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .site-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-headline {
    font-size: 2.1rem;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .btn {
    width: 100%;
  }

  .btn-sm {
    width: auto;
  }

  .product-specs-bar {
    grid-template-columns: 1fr;
  }

  .pricing-top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .recommendation-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Help Me Choose packages and the reading-page depth chooser stack on narrow screens. */
@media (max-width: 768px) {
  .package-choice-grid,
  .depth-chooser-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .personalize-intro,
  .personalize-review {
    padding: 16px;
  }

  .personalize-actions .btn,
  .personalize-controls .btn {
    flex: 1 1 100%;
  }
}