/* ============================================================
   DIREKSI THEME — RESPONSIVE CSS
   Mobile-first breakpoints
   xs: <480px | sm: 480px | md: 768px | lg: 1024px | xl: 1200px
   ============================================================ */

/* ─── Large Desktop (1200px+) ───────────────────────────────── */
@media (min-width: 1280px) {
  :root {
    --container-pad: 2rem;
  }

  .companies-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .companies-grid--featured {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─── Tablet Landscape (1024px) ─────────────────────────────── */
@media (max-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .archive-layout {
    grid-template-columns: 240px 1fr;
    gap: var(--space-6);
  }

  .single-company-layout {
    grid-template-columns: 1fr 300px;
  }

  .companies-grid--related {
    grid-template-columns: repeat(3, 1fr);
  }

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

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

/* ─── Tablet Portrait (768px) ───────────────────────────────── */
@media (max-width: 768px) {
  /* Root adjustments */
  :root {
    --container-pad: 1rem;
  }

  /* Typography */
  .section-title {
    font-size: var(--text-2xl);
  }

  .hero-section__title {
    font-size: 2rem;
  }

  /* Header - Mobile Nav */
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-white);
    padding: var(--space-6) var(--space-4);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    z-index: var(--z-overlay);
    border-top: 1px solid var(--color-border);
  }

  .site-nav.is-open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  .nav-menu {
    flex-direction: column;
    gap: var(--space-2);
  }

  .nav-menu li a {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
  }

  .site-header__actions .btn--ghost {
    display: none;
  }

  /* Hero */
  .hero-search-form__inner {
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: visible;
    background: transparent;
    box-shadow: none;
    gap: var(--space-3);
  }

  .hero-search-form__field {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.3);
    overflow: hidden;
  }

  .hero-search-form__field:first-child {
    border: none;
  }

  .hero-search-form__field input {
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.95);
    padding: 0.9rem 1rem 0.9rem 2.75rem;
  }

  .hero-search-form__field select {
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-lg);
    padding: 0.9rem 1rem 0.9rem 2.75rem;
  }

  .hero-search-form__inner .btn--search {
    width: 100%;
    margin: 0;
    border-radius: var(--radius-lg);
    padding: 1rem;
    font-size: var(--text-base);
  }

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

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

  /* Archive */
  .archive-layout {
    grid-template-columns: 1fr;
  }

  .archive-sidebar {
    position: static;
    order: -1;
  }

  .filter-panel {
    display: none;
  }

  .filter-panel.is-open {
    display: block;
    margin-bottom: var(--space-4);
  }

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

  .archive-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Single Company */
  .single-company-layout {
    grid-template-columns: 1fr;
  }

  .single-company-sidebar {
    position: static;
    order: 2; /* sidebar di bawah konten pada layar kecil */
    width: 100%;
  }

  .company-header__inner {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .company-header__cta {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .company-header__cover {
    height: 180px;
  }

  .company-header__logo,
  .company-header__logo-placeholder {
    width: 80px;
    height: 80px;
    margin-top: -40px;
  }

  /* Companies Grid */
  .companies-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

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

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

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  /* CTA Register */
  .cta-register__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .cta-visual-card {
    display: none;
  }

  /* Footer */
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

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

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

  /* Section header */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Reviews */
  .reviews-summary {
    flex-direction: column;
  }

  /* Products grid */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* About stats */
  .company-about__stats {
    gap: var(--space-6);
  }
}

/* ─── Mobile Portrait (480px) ───────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --container-pad: var(--space-4);
  }

  /* Hero */
  .hero-section {
    padding: var(--space-10) 0 var(--space-10);
  }

  .hero-badge {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
  }

  .hero-section__subtitle {
    font-size: var(--text-base);
  }

  .hero-quick-tags {
    display: none;
  }

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

  /* Grid - single col on mobile */
  .companies-grid {
    grid-template-columns: 1fr;
  }

  .companies-grid--related {
    grid-template-columns: 1fr;
  }

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

  /* Footer */
  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .footer-legal {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }

  /* Section */
  .section {
    padding: var(--space-10) 0;
  }

  .section-title {
    font-size: var(--text-xl);
  }

  /* Single company */
  .company-section {
    padding: var(--space-5);
  }

  .company-header__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

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

  .company-about__stats {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

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

  /* Archive toolbar */
  .archive-page__title {
    font-size: var(--text-2xl);
  }

  /* CTA */
  .cta-register__title {
    font-size: var(--text-2xl);
  }

  .cta-register__actions {
    flex-direction: column;
  }

  /* Page 404 */
  .page-404__code {
    font-size: 5rem;
  }

  .page-404__actions {
    flex-direction: column;
  }
}

/* ─── Print ──────────────────────────────────────────────────── */
@media print {
  .site-header,
  .site-footer,
  .archive-sidebar,
  .company-header__cta,
  .contact-card__cta,
  .btn,
  .review-form-wrap,
  .contact-card__form-toggle {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .company-section {
    break-inside: avoid;
  }
}