/* ═══════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Nameštaj Crni bor
   Svi media query-ji na jednom mestu.
   Mobile-first: base stilovi su za mobilni, ovde proširujemo.
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════
   MOBILE — max 767px (base stilovi + override-ovi)
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
  /* Navbar — mobilni meni */
  .navbar__nav {
    display: none;
  }

  .navbar__toggle {
    display: flex;
  }

  /* Hero */
  .hero__content {
    padding-top: var(--space-9);
    text-align: center;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__scroll {
    display: none;
  }

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

  /* Split layout */
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .split--reverse {
    direction: ltr;
  }

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

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

  /* Visibility */
  .hidden-mobile {
    display: none !important;
  }

  /* Grid overrides */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  /* Page Hero */
  .page-hero {
    min-height: 50vh;
  }

  .page-hero__content {
    padding-top: var(--space-9);
    text-align: center;
  }

  .page-hero__title {
    font-size: var(--text-h2);
  }

  .page-hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  /* Timeline */
  .timeline::before {
    left: 16px;
  }

  .timeline__item {
    padding-left: 52px;
  }

  .timeline__dot {
    left: 8px;
    width: 16px;
    height: 16px;
  }

  .timeline__content {
    padding: var(--space-4);
  }

  /* Material card */
  .material-card {
    padding: var(--space-5);
  }

  /* CTA section */
  .cta-section__phone {
    font-size: var(--text-h4);
  }
}


/* ═══════════════════════════════════════
   TABLET — 768px+
   ═══════════════════════════════════════ */
@media (min-width: 768px) {
  /* Grid */
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

  /* Preporuke */
  .referral__card {
    padding: var(--space-9) var(--space-8);
  }
}


/* ═══════════════════════════════════════
   TABLET ONLY — avoid hero CTA overlap
   ═══════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__scroll {
    display: none;
  }
}


/* ═══════════════════════════════════════
   LAPTOP — 1024px+
   ═══════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Timeline — centered layout */
  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline__item {
    width: 50%;
    padding-left: 0;
    padding-right: var(--space-9);
  }

  .timeline__item .timeline__dot {
    left: auto;
    right: -9px;
  }

  .timeline__item--right {
    margin-left: 50%;
    padding-left: var(--space-9);
    padding-right: 0;
  }

  .timeline__item--right .timeline__dot {
    left: -9px;
    right: auto;
  }

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

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

  /* Stats */
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }

  /* Preporuke — tekst levo, prednosti desno */
  .referral__card {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: var(--space-9);
  }

  /* Visibility */
  .hidden-desktop {
    display: none !important;
  }
}


/* ═══════════════════════════════════════
   DESKTOP — 1280px+
   ═══════════════════════════════════════ */
@media (min-width: 1280px) {
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ═══════════════════════════════════════
   WIDE — 1440px+
   ═══════════════════════════════════════ */
@media (min-width: 1440px) {
  :root {
    --section-padding-x: 6rem;
  }
}


/* ═══════════════════════════════════════
   PRINT
   ═══════════════════════════════════════ */
@media print {
  .navbar,
  .whatsapp-fab,
  .hero__scroll,
  .btn--primary,
  .btn--ghost {
    display: none !important;
  }

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

  a {
    color: #000;
    text-decoration: underline;
  }
}