/* ==========================================================================
   Responsive - Breakpoint Overrides & Fine-tuning
   kakuyasu-hp Theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   Extra Small Devices (max-width: 374px)
   Small phones like iPhone SE (320px), Galaxy S5 (360px)
   -------------------------------------------------------------------------- */
@media (max-width: 374px) {
  /* Typography */
  .hero__title {
    font-size: 24px;
  }

  .hero__highlight {
    font-size: 110%;
  }

  .hero__subtitle {
    font-size: var(--fs-sm);
  }

  .hero__stat-number {
    font-size: 28px;
  }

  .hero__stat-label {
    font-size: var(--fs-xs);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  /* Reduce section padding */
  .section {
    padding: var(--sp-48) 0;
  }

  .hero {
    padding: var(--sp-48) 0 var(--sp-32);
  }

  .section__title {
    font-size: var(--fs-lg);
  }

  .section__subtitle {
    font-size: var(--fs-xs);
  }

  /* Cards */
  .problems__card {
    padding: var(--sp-16);
  }

  .features__card {
    padding: var(--sp-24) var(--sp-16);
  }

  /* Price cards */
  .price-card {
    min-width: 240px;
    padding: var(--sp-24) var(--sp-16);
  }

  .price-card__price-number {
    font-size: 28px;
  }

  /* CTA Section */
  .cta-section {
    padding: var(--sp-48) 0;
  }

  .cta-section__title {
    font-size: var(--fs-xl);
  }

  .cta-section__phone {
    font-size: 28px;
  }

  /* Footer */
  .footer-cta {
    padding: var(--sp-48) 0;
  }

  .footer-cta__title {
    font-size: var(--fs-lg);
  }

  .footer-cta__phone {
    font-size: var(--fs-xl);
  }

  /* Container tighter padding */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Navigation */
  .global-nav__link {
    padding: var(--sp-12) 0;
    font-size: var(--fs-sm);
  }

  /* CTA Bar */
  .cta-bar__btn {
    font-size: var(--fs-xs);
    padding: var(--sp-8) var(--sp-4);
  }

  /* Comparison table */
  .comparison__table th,
  .comparison__table td {
    padding: var(--sp-8) var(--sp-8);
    font-size: var(--fs-xs);
  }

  /* Flow steps */
  .flow-steps__item {
    padding-left: 64px;
  }

  .flow-steps__marker {
    width: 44px;
    height: 44px;
    font-size: var(--fs-base);
  }

  .flow-steps__item::before {
    left: 22px;
    top: 44px;
  }

  /* Testimonials */
  .testimonial-card {
    padding: var(--sp-16) var(--sp-16) var(--sp-16) var(--sp-24);
  }

  /* Blog cards */
  .blog-card__body {
    padding: var(--sp-12) var(--sp-16) var(--sp-16);
  }

  /* FAQ */
  .faq-accordion {
    padding: var(--sp-4) var(--sp-16);
  }

  .accordion__question {
    padding: var(--sp-16) 0;
    font-size: var(--fs-sm);
  }
}

/* --------------------------------------------------------------------------
   Small Devices (375px - 767px)
   Default mobile styles - mostly handled by base CSS
   Minor tweaks only
   -------------------------------------------------------------------------- */
@media (min-width: 375px) and (max-width: 767px) {
  /* Hero stats row layout */
  .hero__stats {
    gap: var(--sp-16) var(--sp-32);
  }

  /* Better price card scrolling */
  .price-table__grid {
    scroll-padding-left: 20px;
  }

  /* Works card grid consistency */
  .works-card__body {
    padding: var(--sp-16) var(--sp-16) var(--sp-24);
  }
}

/* --------------------------------------------------------------------------
   Tablet (768px - 1023px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Header */
  .site-header__inner {
    height: 75px;
  }

  /* Hero */
  .hero {
    text-align: center;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__stats {
    justify-content: center;
  }

  /* Price table */
  .price-table__grid {
    flex-wrap: wrap;
    justify-content: center;
  }

  .price-card {
    min-width: 0;
    flex: 0 1 calc(50% - var(--sp-12));
    max-width: 340px;
  }

  /* Features - 2 columns is already handled but ensure spacing */
  .features__grid {
    gap: var(--sp-16);
  }

  .features__card {
    padding: var(--sp-24) var(--sp-16);
  }

  /* Flow steps */
  .flow-steps__timeline {
    max-width: 600px;
  }

  /* Footer grid - 2 columns */
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-24);
  }

  /* Comparison - still may need scroll */
  .comparison__table {
    min-width: 650px;
  }

  /* CTA Section */
  .cta-section__phone {
    font-size: 40px;
  }
}

/* --------------------------------------------------------------------------
   Desktop (1024px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Container wider padding */
  .container {
    padding-left: var(--sp-32);
    padding-right: var(--sp-32);
  }

  /* Desktop visibility toggles */
  .u-show-pc-lg {
    display: block !important;
  }

  .u-show-sp-lg {
    display: none !important;
  }

  /* Header adjustments */
  .site-header__inner {
    gap: var(--sp-24);
  }

  /* Hero fine-tuning */
  .hero__inner {
    min-height: 480px;
  }

  .hero__badge {
    margin-bottom: var(--sp-32);
  }

  /* Price table - 3 columns */
  .price-table__grid {
    flex-wrap: nowrap;
    gap: var(--sp-24);
  }

  .price-card {
    flex: 1;
    max-width: 360px;
  }

  /* Flow steps wider */
  .flow-steps__timeline {
    max-width: 800px;
  }

  .flow-steps__content h3 {
    font-size: var(--fs-lg);
  }

  /* Testimonial card padding */
  .testimonial-card {
    padding: var(--sp-32) var(--sp-32) var(--sp-32) var(--sp-48);
  }

  /* Blog card hover effects */
  .blog-card__body {
    padding: var(--sp-24);
  }

  /* Comparison table full width */
  .comparison__table {
    min-width: auto;
  }

  /* Content area wider */
  .content-area {
    padding: var(--sp-80) 20px;
  }

  /* Page header */
  .page-header {
    padding: var(--sp-80) 0;
  }

  .page-header__title {
    font-size: var(--fs-4xl);
  }
}

/* --------------------------------------------------------------------------
   Large Desktop (1280px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  /* Wider hero */
  .hero__inner {
    gap: var(--sp-80);
  }

  .hero__visual {
    flex: 0 0 480px;
  }

  /* Price cards extra space */
  .price-table__grid {
    gap: var(--sp-32);
  }

  .price-card {
    padding: var(--sp-48) var(--sp-32);
  }

  /* Features more breathing room */
  .features__grid {
    gap: var(--sp-32);
  }

  .features__card {
    padding: var(--sp-48) var(--sp-32);
  }
}

/* --------------------------------------------------------------------------
   Extra Large Desktop (1440px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  .hero__title {
    font-size: 56px;
  }

  .hero__stat-number {
    font-size: 56px;
  }
}

/* --------------------------------------------------------------------------
   High DPI / Retina Display Tweaks
   -------------------------------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure thin borders render crisply */
  .accordion__item {
    border-bottom-width: 0.5px;
  }

  .comparison__table td {
    border-bottom-width: 0.5px;
  }

  .flow-steps__item::before {
    width: 1px;
  }
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .card:hover,
  .features__card:hover,
  .blog-card:hover,
  .works-card:hover,
  .price-card:hover {
    transform: none;
  }

  .works-card:hover .works-card__thumb img,
  .blog-card:hover .blog-card__thumb img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */
@media print {
  /* Hide non-essential elements */
  .site-header,
  .global-nav,
  .hamburger,
  .cta-bar,
  .site-footer,
  .footer-cta,
  .cta-section,
  .site-header__cta-btn,
  .site-header__phone,
  .section-btn-wrap,
  [data-animate] {
    display: none !important;
  }

  /* Reset backgrounds and colors */
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
    line-height: 1.5;
  }

  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Show URLs for links */
  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 10pt;
    color: #666 !important;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: '';
  }

  /* Simplify layout */
  .container {
    max-width: 100%;
    padding: 0;
  }

  .hero {
    padding: 20pt 0;
    page-break-after: avoid;
  }

  .hero__title {
    font-size: 24pt;
    color: #000 !important;
  }

  .section {
    padding: 15pt 0;
    page-break-inside: avoid;
  }

  .section__title {
    font-size: 16pt;
    page-break-after: avoid;
  }

  /* Cards and grids stack */
  .features__grid,
  .problems__grid,
  .testimonials__grid,
  .works-gallery__grid,
  .blog-latest__grid {
    display: block;
  }

  .features__card,
  .problems__card,
  .testimonial-card,
  .works-card,
  .blog-card {
    page-break-inside: avoid;
    margin-bottom: 10pt;
    border: 1px solid #ccc;
  }

  /* Price cards */
  .price-table__grid {
    display: block;
  }

  .price-card {
    page-break-inside: avoid;
    margin-bottom: 10pt;
    border: 1px solid #ccc;
    min-width: auto;
  }

  /* Comparison table */
  .comparison__table {
    min-width: auto;
    font-size: 10pt;
  }

  /* Flow steps */
  .flow-steps__item {
    page-break-inside: avoid;
  }

  /* Images */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Page breaks */
  h2, h3 {
    page-break-after: avoid;
  }

  p {
    orphans: 3;
    widows: 3;
  }
}