/* ============================================================
   PT INDONESIA SMART SYSTEM
   responsive.css — Responsive Design Breakpoints
   ============================================================ */

/* ============================================================
   BREAKPOINTS REFERENCE
   xs:  < 576px   (mobile portrait)
   sm:  >= 576px  (mobile landscape)
   md:  >= 768px  (tablet)
   lg:  >= 992px  (laptop)
   xl:  >= 1200px (desktop)
   xxl: >= 1400px (large desktop)
   ============================================================ */

/* ============================================================
   1. LARGE DESKTOP (xxl: >= 1400px)
   ============================================================ */
@media (min-width: 1400px) {
  .hero-title {
    font-size: 5.5rem;
  }

  .hero-content {
    padding: 180px 0 120px;
  }

  .section-title {
    font-size: 3rem;
  }
}

/* ============================================================
   2. DESKTOP (xl: 1200px - 1400px)
   ============================================================ */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }

  .navbar-nav-iss {
    gap: 0.125rem;
  }
}

/* ============================================================
   3. LAPTOP (lg: 992px - 1200px)
   ============================================================ */
@media (max-width: 1199.98px) {
  :root {
    --font-size-6xl: 3.25rem;
  }

  .hero-title {
    font-size: clamp(2.25rem, 5.5vw, 4rem);
  }

  .hero-floating-card.card-top-left {
    top: 5%;
    left: 0;
  }

  .hero-floating-card.card-bottom-right {
    bottom: 10%;
    right: 0;
  }

  .section-title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  }

  .tech-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}

/* ============================================================
   4. TABLET (md: 768px - 992px)
   ============================================================ */
@media (max-width: 991.98px) {
  /* Navbar — hide desktop links, show toggler */
  .navbar-nav-iss {
    display: none;
  }

  .navbar-toggler-iss {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .navbar-brand-iss .nav-logo {
    height: 36px;
  }

  /* Hero */
  .hero-content {
    padding: 130px 0 80px;
  }

  .hero-title {
    font-size: clamp(2rem, 6vw, 3.25rem);
  }

  .hero-description {
    font-size: var(--font-size-lg);
  }

  .hero-visual {
    margin-top: var(--space-8);
  }

  .hero-floating-card {
    display: none;
  }

  .hero-stats {
    gap: var(--space-5);
  }

  .hero-stat-number {
    font-size: var(--font-size-2xl);
  }

  /* About */
  #about {
    padding: var(--space-20) 0;
  }

  .about-img-secondary {
    width: 40%;
    right: var(--space-4);
    bottom: calc(-1 * var(--space-4));
  }

  .about-experience-badge {
    bottom: var(--space-4);
    left: var(--space-4);
  }

  /* Sections spacing */
  #solutions, #products, #industries, #why-us,
  #technology, #portfolio, #stats, #clients,
  #testimonials, #news, #contact {
    padding: var(--space-20) 0;
  }

  /* Product cards */
  .product-card-footer {
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
  }

  /* Stats */
  .stat-counter-item::after {
    display: none;
  }

  .stat-number {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  /* Tech grid */
  .tech-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: var(--space-3);
  }

  /* Footer */
  #footer-iss {
    padding: var(--space-16) 0 0;
  }

  .footer-brand p {
    max-width: 100%;
  }

  /* CTA */
  .cta-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }
}

/* ============================================================
   5. MOBILE LANDSCAPE (sm: 576px - 768px)
   ============================================================ */
@media (max-width: 767.98px) {
  /* Typography */
  .section-title {
    font-size: clamp(1.625rem, 5vw, 2.25rem);
  }

  .section-subtitle {
    font-size: var(--font-size-base);
  }

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

  /* Navbar */
  #navbar-iss {
    padding: 1rem 0;
  }

  #navbar-iss.scrolled {
    padding: 0.75rem 0;
  }

  /* Hero */
  .hero-content {
    padding: 110px 0 70px;
    text-align: center;
  }

  .hero-badge {
    justify-content: center;
  }

  .hero-title {
    font-size: clamp(1.875rem, 7vw, 3rem);
  }

  .hero-description {
    font-size: var(--font-size-base);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
    gap: var(--space-6);
  }

  .hero-stat-item {
    text-align: center;
  }

  .hero-visual {
    margin-top: var(--space-10);
  }

  .hero-scroll-indicator {
    display: none;
  }

  /* About */
  #about {
    padding: var(--space-16) 0;
  }

  .about-img-secondary {
    display: none;
  }

  .about-experience-badge {
    bottom: var(--space-4);
    left: var(--space-4);
    padding: var(--space-4);
  }

  .about-experience-badge .exp-number {
    font-size: var(--font-size-3xl);
  }

  /* Section padding */
  #solutions, #products, #industries, #why-us,
  #technology, #portfolio, #stats, #clients,
  #testimonials, #news, #contact, #cta-section {
    padding: var(--space-16) 0;
  }

  /* Cards grid — single col */
  .solution-card,
  .product-card,
  .industry-card,
  .why-us-card,
  .testimonial-card,
  .news-card {
    margin-bottom: var(--space-4);
  }

  /* Portfolio filters */
  .portfolio-filters {
    gap: var(--space-2);
  }

  .filter-btn {
    font-size: var(--font-size-xs);
    padding: var(--space-2) var(--space-4);
  }

  /* Stats */
  .stat-counter-item {
    padding: var(--space-5) 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .stat-counter-item:last-child {
    border-bottom: none;
  }

  .stat-counter-item::after {
    display: none;
  }

  /* Tech */
  .tech-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }

  /* Contact */
  .contact-form-card {
    padding: var(--space-6);
  }

  /* Footer */
  #footer-iss {
    padding: var(--space-12) 0 0;
    text-align: center;
  }

  .footer-brand {
    margin-bottom: var(--space-8);
  }

  .footer-brand .footer-logo {
    margin: 0 auto var(--space-5);
  }

  .footer-brand p {
    margin: 0 auto var(--space-6);
    max-width: 300px;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-links {
    align-items: center;
  }

  .footer-contact-item {
    justify-content: center;
    text-align: left;
  }

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

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

  /* Buttons */
  .btn-lg-iss {
    padding: 0.875rem 2rem;
    font-size: var(--font-size-base);
  }

  /* CTA */
  #cta-section {
    text-align: center;
  }

  .cta-subtitle {
    max-width: 100%;
    font-size: var(--font-size-base);
  }

  /* Back to top */
  .back-to-top-iss {
    bottom: var(--space-5);
    right: var(--space-5);
    width: 42px;
    height: 42px;
  }
}

/* ============================================================
   6. MOBILE PORTRAIT (xs: < 576px)
   ============================================================ */
@media (max-width: 575.98px) {
  /* Container */
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Typography */
  .section-title {
    font-size: 1.625rem;
    letter-spacing: -0.02em;
  }

  /* Hero */
  .hero-title {
    font-size: 1.875rem;
    letter-spacing: -0.02em;
  }

  .hero-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.75rem;
  }

  .hero-actions {
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  .hero-stats {
    gap: var(--space-4);
  }

  .hero-stat-number {
    font-size: 1.75rem;
  }

  /* Cards */
  .card-iss {
    padding: var(--space-6);
  }

  .solution-card,
  .product-card-body,
  .product-card-header {
    padding: var(--space-5);
  }

  .why-us-card {
    padding: var(--space-6);
  }

  .testimonial-card {
    padding: var(--space-6);
  }

  .contact-info-card,
  .contact-form-card {
    padding: var(--space-5);
  }

  /* Tech */
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .tech-badge {
    padding: var(--space-4) var(--space-3);
  }

  .tech-badge .tech-icon {
    font-size: 1.75rem;
  }

  /* Industries */
  .industry-card {
    padding: var(--space-6) var(--space-4);
  }

  /* Portfolio */
  .portfolio-filters {
    gap: var(--space-1);
  }

  .filter-btn {
    padding: var(--space-1) var(--space-3);
  }

  /* Stats */
  .stat-number {
    font-size: 2.25rem;
  }

  /* Clients marquee */
  .marquee-item img {
    height: 26px;
  }

  /* Navbar brand text on mobile */
  .navbar-brand-iss .nav-logo-text {
    display: none;
  }

  .navbar-brand-iss .nav-logo {
    height: 32px;
  }

  /* Footer */
  .footer-heading {
    margin-top: var(--space-6);
  }

  .footer-links {
    gap: var(--space-2);
  }
}

/* ============================================================
   7. UTILITY RESPONSIVE HELPERS
   ============================================================ */

/* Hide/show at breakpoints */
@media (max-width: 991.98px) {
  .d-lg-show { display: none !important; }
}

@media (min-width: 992px) {
  .d-lg-hide { display: none !important; }
}

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

  .animate-float,
  .animate-float-slow,
  .animate-pulse-glow,
  .animate-rotate-slow {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* High contrast */
@media (prefers-contrast: high) {
  :root {
    --color-gray-400: #555;
    --color-gray-500: #444;
  }

  .card-iss,
  .solution-card,
  .product-card,
  .why-us-card {
    border-width: 2px;
  }
}