/**
 * COLLATERAL KARTEL - RESPONSIVE STYLES
 * Mobile-first and fluid media queries across 320px, 375px, 430px, 768px, 1024px, 1440px.
 */

/* ==========================================================================
   DESKTOP & LARGE SCREENS (1024px - 1440px+)
   ========================================================================== */
@media (min-width: 1200px) and (min-height: 860px) {
  .hero-card-stack {
    height: clamp(380px, 46vh, 440px);
    max-width: clamp(400px, 29vw, 460px);
  }

  .hero-card-1 {
    width: clamp(245px, 18vw, 280px);
    height: clamp(170px, 21vh, 195px);
  }

  .hero-card-2 {
    width: clamp(240px, 17.5vw, 275px);
    height: clamp(165px, 20.5vh, 190px);
    top: 38px;
  }

  .hero-card-3 {
    width: clamp(260px, 19vw, 295px);
    height: clamp(180px, 22vh, 205px);
    bottom: 18px;
    left: clamp(40px, 3.5vw, 55px);
  }

  .display-hero.hero-headline,
  .hero-headline {
    font-size: clamp(2.8rem, 4.2vw, 4.75rem);
  }
}

/* ==========================================================================
   TABLET LANDSCAPE & MEDIUM SCREENS (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --header-height: 76px;
  }

  .header-inner {
    height: 76px;
  }

  .nav-links {
    gap: 20px;
  }

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

  .spotlight-content > div {
    flex-wrap: wrap;
  }

  .spotlight-content .btn {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

}

/* ==========================================================================
   TABLET PORTRAIT & MOBILE (<= 920px)
   ========================================================================== */
@media (max-width: 920px) {
  .header-nav {
    display: none;
  }

  .mobile-nav-toggle {
    display: block;
  }

  .hero-section {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  .hero-container {
    padding-block: 2rem 1.5rem;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .hero-visual-stage {
    margin-top: 20px;
  }

  .hero-card-stack {
    height: 380px;
    max-width: 440px;
    margin: 0 auto;
  }

  .hero-card-1 {
    width: 240px;
    height: 175px;
    top: 10px;
    left: 10px;
  }

  .hero-card-2 {
    width: 235px;
    height: 170px;
    top: 35px;
    right: 10px;
  }

  .hero-card-3 {
    width: 255px;
    height: 185px;
    bottom: 15px;
    left: 40px;
  }

  .spotlight-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .transformation-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .form-grid-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* ==========================================================================
   MOBILE PHONES (<= 640px)
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    --header-height: 70px;
  }
  .header-inner {
    height: 70px;
  }

  .logo-badge-img {
    height: 42px;
  }

  .btn-lg {
    padding-inline: 18px;
  }

  .section {
    padding-block: 3.5rem;
  }

  .hero-card-stack {
    height: 320px;
    max-width: 340px;
    margin: 0 auto;
  }

  .hero-card-1 {
    width: 195px;
    height: 145px;
    top: 5px;
    left: 0;
  }

  .hero-card-2 {
    width: 190px;
    height: 140px;
    top: 30px;
    right: 0;
  }

  .hero-card-3 {
    width: 210px;
    height: 155px;
    bottom: 10px;
    left: 25px;
  }

  .hero-sticker-stamp .sticker-tag {
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group .btn {
    width: 100%;
  }

  .spotlight-content > div {
    flex-wrap: wrap;
  }

  .spotlight-content .btn {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .spotlight-split .btn {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .pillar-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .about-cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .about-cta-group .btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .process-stage-card {
    padding: 20px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .process-stage-card > div:last-child {
    min-width: 0;
  }

  .brief-container .btn {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .make-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .process-conveyor {
    grid-template-columns: minmax(0, 1fr);
  }

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

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

  .pill-selector-grid {
    gap: 8px;
  }

  .pill-label {
    padding: 8px 12px;
    font-size: 0.75rem;
  }

  .statement-section {
    padding-block: 4rem 3.5rem;
    background-image:
      radial-gradient(circle at 50% 50%, rgba(26, 26, 46, 0.95) 0%, rgba(26, 26, 46, 0.82) 65%, rgba(26, 26, 46, 0.6) 100%),
      url('/images/statement-brand-split-bg.jpg');
    background-position: center center;
  }

  .whatsapp-floating-desk {
    bottom: 16px;
    right: 16px;
  }

  .whatsapp-bubble-btn {
    width: 52px;
    height: 52px;
  }

  .whatsapp-bubble-btn svg {
    width: 28px;
    height: 28px;
  }

  .brief-container {
    padding: 24px 18px;
    margin-top: 24px;
  }

  .contact-hero-banner + .section .brief-container {
    margin-top: -24px;
  }
}

/* ==========================================================================
   EXTRA COMPACT SCREENS (<= 360px)
   ========================================================================== */
@media (max-width: 360px) {
  .display-hero {
    font-size: 2.25rem;
  }

  .display-section {
    font-size: 1.85rem;
  }

  .hero-card-stack {
    height: 310px;
    max-width: 300px;
  }

  .hero-card-1 {
    width: 175px;
    height: 130px;
    top: 5px;
    left: 0;
  }

  .hero-card-2 {
    width: 170px;
    height: 125px;
    top: 25px;
    right: 0;
  }

  .hero-card-3 {
    width: 190px;
    height: 140px;
    bottom: 5px;
    left: 20px;
  }
}