/* ============================================================
   CK Cloth Hangers — Master Responsive Stylesheet
   
   Breakpoints (as per Master Specification):
   1. Large Desktop: 1440px and above
   2. Desktop:       1024px – 1439px
   3. Tablet:        768px – 1023px
   4. Large Mobile:  481px – 767px
   5. Small Mobile:  320px – 480px
   6. Extra Small:   320px – 359px
   ============================================================ */

/* ── Global Fluid & Overflow Guards ───────────────────────── */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Prevent grid/flex children from overflowing parent columns */
.hero__inner > *,
.services-grid > *,
.why-grid > *,
.home-type-grid > *,
.how-steps > *,
.material-cards > *,
.gallery-grid > *,
.footer-grid > *,
.trust-bar__grid > *,
.service-layout > *,
.area-page-layout > *,
.all-services-grid > *,
.locations-index-grid > * {
  min-width: 0;
}

/* Ensure images maintain aspect ratio without distortion */
img, svg, picture {
  max-width: 100%;
  height: auto;
}

/* Ensure interactive elements meet minimum touch target standards */
button,
a.btn,
.mobile-nav-link,
.faq-question,
.mobile-toggle,
.float-btn {
  touch-action: manipulation;
}


/* ============================================================
   TIER 1: LARGE DESKTOP (1440px and above)
   ============================================================ */
@media (min-width: 1440px) {
  .container {
    max-width: var(--container-2xl, 1360px);
    padding-inline: var(--sp-8);
  }

  .hero__inner {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--sp-16);
    padding-block: var(--sp-20);
  }

  .hero__title {
    font-size: var(--fs-5xl);
  }

  .hero__subtitle {
    max-width: 580px;
    font-size: var(--fs-lg);
  }

  .services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
  }

  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
  }

  .footer-grid {
    grid-template-columns: 2.2fr 1.2fr 1.2fr 1.2fr;
    gap: var(--sp-10);
  }
}


/* ============================================================
   TIER 2: STANDARD DESKTOP (1024px to 1439px)
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1439px) {
  .container {
    max-width: var(--container-xl, 1200px);
    padding-inline: var(--sp-6);
  }

  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-10);
    padding-block: var(--sp-16);
  }

  .services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
  }

  .why-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }
}

/* Common Desktop Rules (>= 1024px) */
@media (min-width: 1024px) {
  .mobile-toggle {
    display: none !important;
  }

  .mobile-nav {
    display: none !important;
  }

  .primary-nav {
    display: flex !important;
  }

  .header-cta {
    display: flex !important;
  }
}


/* ============================================================
   TIER 3: TABLET ENVIRONMENT (768px to 1023px)
   ============================================================ */
@media (max-width: 1023px) {
  /* Navigation switch */
  .primary-nav {
    display: none !important;
  }

  .mobile-toggle {
    display: flex !important;
  }

  /* Header CTA adjustments on Tablet */
  .header-cta .header-wa-btn {
    display: none;
  }

  .header-cta .header-call-btn {
    display: flex;
  }

  .container {
    max-width: 100%;
    padding-inline: var(--sp-6);
  }

  /* Tablet Hero Layout (Balanced 2 columns) */
  .hero {
    min-height: auto;
    padding-block: var(--sp-10);
  }

  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--sp-6);
    padding-block: var(--sp-8);
  }

  .hero__title {
    font-size: clamp(2rem, 3.8vw, 2.75rem);
    line-height: 1.22;
  }

  .hero__subtitle {
    font-size: var(--fs-base);
    margin-bottom: var(--sp-6);
  }

  .hero__cta {
    gap: var(--sp-3);
  }

  .hero__cta .btn {
    min-height: 48px;
    padding: var(--sp-3) var(--sp-5);
  }

  .hero__floating-badge {
    padding: var(--sp-2) var(--sp-4);
    min-width: 160px;
    font-size: var(--fs-sm);
  }

  .hero__floating-badge--steel {
    top: -12px;
    right: -12px;
  }

  .hero__floating-badge {
    bottom: -12px;
    left: -12px;
  }

  /* Trust Bar 4-column tablet grid */
  .trust-bar__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
  }

  .trust-stat {
    padding: var(--sp-3) var(--sp-2);
  }

  .trust-stat__number {
    font-size: var(--fs-2xl);
  }

  /* Grids: 2-column or 3-column tablet view */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }

  .home-type-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }

  .how-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
  }

  .how-steps::before {
    display: none;
  }

  .material-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }

  /* Footer 2x2 grid */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }

  /* Service & Area Pages */
  .service-layout,
  .area-page-layout {
    grid-template-columns: 1fr 280px;
    gap: var(--sp-6);
  }

  .feature-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  .related-services {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  .all-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  .locations-index-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }
}


/* ============================================================
   TIER 4: MOBILE ENVIRONMENT (General: max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --header-height: 64px;
  }

  .container {
    padding-inline: var(--sp-4);
  }

  .section {
    padding-block: var(--sp-12);
  }

  .section--sm {
    padding-block: var(--sp-8);
  }

  .section-header {
    margin-bottom: var(--sp-8);
  }

  .section-header h2 {
    font-size: clamp(1.5rem, 5.5vw, 1.875rem);
  }

  /* Single-column stacked hero */
  .hero {
    min-height: auto;
    padding-block: var(--sp-6) var(--sp-10);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding-block: var(--sp-6);
  }

  .hero__badge {
    font-size: var(--fs-xs);
    padding: var(--sp-1) var(--sp-3);
    margin-bottom: var(--sp-4);
  }

  .hero__title {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    line-height: 1.25;
    margin-bottom: var(--sp-4);
  }

  .hero__subtitle {
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    margin-bottom: var(--sp-6);
    max-width: 100%;
  }

  /* Full-width mobile CTA buttons */
  .hero__cta {
    flex-direction: column;
    width: 100%;
    gap: var(--sp-3);
  }

  .hero__cta .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    font-size: var(--fs-base);
    padding: var(--sp-3) var(--sp-5);
  }

  .hero__features {
    gap: var(--sp-2);
    margin-top: var(--sp-6);
  }

  .hero__feature {
    font-size: var(--fs-xs);
    padding: 6px 12px;
  }

  /* Hero image wrap on mobile */
  .hero__image-wrap {
    display: block;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    margin-top: var(--sp-4);
    position: relative;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .hero__img-card {
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
  }

  /* Badges stay within card on mobile to prevent overflow */
  .hero__floating-badge {
    min-width: auto;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
    box-shadow: var(--shadow-md);
  }

  .hero__floating-badge .badge-icon {
    width: 34px;
    height: 34px;
  }

  .hero__floating-badge .badge-icon svg {
    width: 18px;
    height: 18px;
  }

  .hero__floating-badge--steel {
    top: 4px;
    right: 4px;
  }

  .hero__floating-badge {
    bottom: 4px;
    left: 4px;
  }

  /* Trust Bar (2x2 grid on mobile) */
  .trust-bar__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  .trust-stat {
    padding: var(--sp-3) var(--sp-3);
    background: var(--clr-bg);
    border-radius: var(--radius-md);
    text-align: center;
  }

  .trust-stat__number {
    font-size: var(--fs-2xl);
  }

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

  /* Services Grid on Large Mobile (481px-767px: 2 cols) */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .home-type-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .how-steps {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .how-steps::before {
    display: none;
  }

  .material-cards {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  /* CTA Banner stacked */
  .cta-banner {
    padding-block: var(--sp-8);
  }

  .cta-banner .btn-group {
    flex-direction: column;
    width: 100%;
    gap: var(--sp-3);
  }

  .cta-banner .btn-group .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  /* Footer on mobile */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-3);
  }

  .footer-bottom-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }

  /* Mobile Nav Drawer Full Safe Area Support */
  .mobile-nav {
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    padding: var(--sp-4);
    padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav-link {
    min-height: 44px;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-base);
  }

  .mobile-nav-cta .btn {
    min-height: 48px;
    width: 100%;
    justify-content: center;
  }

  /* Floating Action Buttons safe area & sizing */
  .float-btns {
    bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    right: calc(var(--sp-3) + env(safe-area-inset-right, 0px));
    gap: var(--sp-2);
  }

  .float-btn {
    width: 50px;
    height: 50px;
  }

  .float-btn svg {
    width: 24px;
    height: 24px;
  }

  /* Service Pages Mobile Stack */
  .service-layout,
  .area-page-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .service-sidebar {
    position: static;
    width: 100%;
  }

  .feature-list {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .related-services {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .all-services-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .locations-index-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  /* Form controls full width on mobile */
  .form-control {
    width: 100%;
    min-height: 48px;
    font-size: var(--fs-base);
  }
}


/* ============================================================
   TIER 5: SMALL MOBILE ENVIRONMENT (320px to 480px)
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --header-height: 60px;
  }

  .container {
    padding-inline: var(--sp-3);
  }

  /* Announcement Bar on compact mobile */
  .announcement-bar {
    font-size: 0.725rem;
    padding: var(--sp-1) var(--sp-2);
    line-height: 1.35;
  }

  /* Header compact logo & Call button */
  .logo__mark {
    width: 38px;
    height: 38px;
  }

  .logo__mark svg {
    width: 22px;
    height: 22px;
  }

  .logo__name {
    font-size: 0.95rem;
  }

  .header-call-btn {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-xs);
    min-height: 38px;
  }

  .header-call-btn svg {
    width: 14px;
    height: 14px;
  }

  /* Single Column Services on phones under 480px for optimal readability */
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .locations-index-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .hero__title {
    font-size: clamp(1.6rem, 7.5vw, 1.95rem);
  }

  .hero__features {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__feature {
    width: 100%;
  }

  .faq-question {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
  }

  /* Compact floating badges for small screens */
  .hero__floating-badge {
    padding: 6px 10px;
    gap: var(--sp-2);
  }

  .hero__floating-badge .badge-num {
    font-size: 0.825rem;
  }

  .hero__floating-badge .badge-label {
    font-size: 0.675rem;
  }
}


/* ============================================================
   TIER 6: EXTRA SMALL PHONES (320px to 359px — iPhone SE / Fold)
   ============================================================ */
@media (max-width: 359px) {
  .logo__tagline {
    display: none;
  }

  .header-call-btn .btn-text {
    display: none;
  }

  .header-call-btn {
    padding: 8px;
    border-radius: var(--radius-full);
  }

  .trust-bar__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }

  .hero__title {
    font-size: 1.5rem;
  }

  .hero__floating-badge--steel {
    display: none;
  }
}


/* ============================================================
   ACCESSIBILITY & PREFERENCES
   ============================================================ */

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

  .btn::after,
  .btn-shine-auto::after,
  .hero__badge::after,
  .logo__mark::after,
  .announcement-bar::after,
  .cta-banner::before,
  .float-btn::after,
  .service-card::before,
  .badge--steel::after {
    animation: none !important;
    display: none !important;
  }

  .hero__floating-badge,
  .hero__floating-badge--steel {
    animation: none !important;
  }

  .text-shine,
  .accent-word {
    animation: none !important;
  }
}

/* Print Stylesheet */
@media print {
  .site-header,
  .announcement-bar,
  .site-footer,
  .float-btns,
  .mobile-toggle,
  .mobile-nav,
  .hero__cta,
  .cta-banner,
  .skip-link {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
  }

  .hero {
    background: none !important;
    color: black !important;
    min-height: auto;
    padding: 10pt 0;
  }

  .hero__title,
  .hero__subtitle,
  .accent-word {
    color: black !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: none !important;
  }

  .hero__image-wrap {
    display: none !important;
  }

  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}