/* ==========================================================================
   EFIMART ESTUDIO - RESPONSIVE STYLES
   ========================================================================== */

/* Tablet & Large Mobile Devices (under 1024px) */
@media (max-width: 1024px) {
  :root {
    --header-height-large: 80px;
  }

  .header-container {
    padding: 0 24px;
  }

  /* Hero Section */
  .hero-title {
    font-size: 48px;
  }

  /* Services/Methodology Section */
  .methodology-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

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

  /* Contact Page */
  .contact-half h2 {
    font-size: 40px;
  }

  /* Detail Page Gallery */
  .detail-gallery-grid {
    gap: 20px;
  }

  /* Footer */
  .footer-top {
    flex-direction: column;
    gap: 40px;
  }

  .footer-nav {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
  }
}

/* Small Mobile Devices (under 768px) */
@media (max-width: 768px) {
  :root {
    --header-height-large: 70px;
    --header-height-small: 60px;
  }

  /* Typography */
  body {
    font-size: 15px;
  }

  .hero-title {
    font-size: 36px;
    letter-spacing: 0;
  }

  .hero-subtitle {
    font-size: 16px;
    letter-spacing: 2px;
  }

  section {
    padding: 60px 0;
  }

  /* Sticky Header Logo Size */
  .logo-text {
    font-size: 20px;
  }

  /* Agency Section: Convert columns to stack with lines */
  .agency-columns {
    flex-direction: column;
    gap: 10px;
  }

  .agency-col {
    font-size: 22px;
    padding: 10px 0;
  }

  .agency-divider {
    width: 60px;
    height: 1px;
    margin: 10px auto;
  }

  /* Services Grid */
  .methodology-timeline {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .methodology-step {
    padding: 30px 20px;
  }

  /* Works Grid Portfolio */
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .flip-box {
    height: 220px;
  }

  .flip-box-front h3 {
    font-size: 18px;
  }

  .flip-box-back h3 {
    font-size: 16px;
  }

  .flip-box-back p {
    display: none; /* Hide description on mobile back-faces to save space */
  }

  /* Detail Page Gallery */
  .detail-gallery-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .detail-hero h1 {
    font-size: 36px;
  }

  .detail-hero p {
    font-size: 14px;
    letter-spacing: 2px;
  }

  /* Contact page split screen: stacked layout */
  .contact-split-container {
    flex-direction: column;
    height: auto;
    margin-top: var(--header-height-large);
  }

  .contact-half {
    width: 100%;
    height: 50vh;
    padding: 30px;
  }

  .contact-half h2 {
    font-size: 32px;
  }

  .contact-half p {
    margin-bottom: 24px;
  }

  .contact-arrow-icon {
    width: 60px;
    height: 60px;
  }

  .contact-arrow-icon img {
    width: 24px;
    height: 24px;
  }

  /* Cookie banner notice layout adjustment */
  .cookie-notice-banner {
    flex-direction: column;
    padding: 20px;
    align-items: flex-start;
    gap: 16px;
  }

  .cookie-notice-buttons {
    width: 100%;
    justify-content: flex-end;
  }

  /* Modal Dialog card */
  .modal-card {
    padding: 30px 20px;
    border-radius: var(--border-radius-md);
  }

  .modal-card h2 {
    font-size: 24px;
    margin-bottom: 16px;
  }
}

/* Extra Small Screens (under 480px) */
@media (max-width: 480px) {
  .works-grid {
    grid-template-columns: 1fr;
  }

  .flip-box {
    height: 250px;
  }

  .footer-nav {
    flex-direction: column;
    gap: 30px;
  }
}