/* ============================================
   Realistic Sketch — Responsive Styles
   ============================================ */

/* Large tablets & small desktops */
@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .hero {
    min-height: auto;
  }

  .blog-card-featured {
    grid-template-columns: 1fr;
  }
}

/* Tablets */
@media (max-width: 768px) {
  :root {
    --header-height: 4rem;
  }

  .nav-desktop {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Split hero stacks on tablet/mobile */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-media-side {
    order: -1;
    min-height: 280px;
    max-height: 360px;
  }

  .hero-media-side::after {
    background: linear-gradient(to top, rgba(28, 25, 23, 0.5) 0%, transparent 50%);
  }

  .hero-content-side {
    padding: var(--space-2xl) var(--space-lg);
  }

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

  .hero-actions .btn {
    width: 100%;
    max-width: 280px;
  }

  .section {
    padding-block: var(--space-2xl);
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-md);
  }

  .cookie-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-actions {
    justify-content: stretch;
  }

  .cookie-actions .btn {
    flex: 1;
  }

  .article-content {
    padding-inline: var(--space-md);
  }

  .page-hero {
    padding-block: var(--space-2xl);
  }

  .blog-card-featured .card-body {
    padding: var(--space-xl);
  }
}

/* Mobile phones */
@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-md);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

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

  .hero-media-side {
    min-height: 240px;
    max-height: 300px;
  }

  .hero-content-side h1 {
    font-size: 1.9rem;
  }

  .card-body {
    padding: var(--space-md);
  }

  .category-card {
    min-height: 220px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

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

  .btn-lg {
    padding: 0.95rem 1.5rem;
    font-size: 1rem;
  }

  .back-to-top {
    bottom: 1.25rem;
    right: 1.25rem;
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .logo {
    font-size: 1.25rem;
  }
}

/* Large desktops */
@media (min-width: 1440px) {
  :root {
    --container: 80rem;
  }
}