/* ==========================================================================
   PEARL SEREEN (لؤلؤة سيرين) — Responsive Breakpoints
   responsive.css
   ========================================================================== */

/* 1. Large Desktops (1440px+) */
@media (min-width: 1440px) {
  :root {
    --container-max: 1440px;
  }

  .hero__portrait-frame {
    width: 460px;
    height: 610px;
  }
}

/* 2. Laptops & Small Desktops (<= 1200px) */
@media (max-width: 1200px) {
  .navbar__menu {
    gap: 1.15rem;
  }

  .navbar__whatsapp-btn span {
    display: none;
  }

  .navbar__whatsapp-btn {
    padding: 0.6rem;
    border-radius: 50%;
  }

  .hero__container {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.25rem;
  }

  .hero__portrait-frame {
    width: 380px;
    height: 500px;
  }

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

  .collection-card {
    min-height: 490px;
  }

  .gallery__masonry {
    grid-auto-rows: 270px;
  }

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

  .footer__grid {
    grid-template-columns: 1.2fr 0.8fr 1fr;
  }
}

/* 3. Tablets & Portrait iPads (<= 992px) */
@media (max-width: 992px) {
  :root {
    --header-height: 80px;
    --header-height-scrolled: 70px;
  }

  .navbar__menu,
  .navbar__whatsapp-btn {
    display: none;
  }

  .navbar__burger {
    display: inline-flex;
  }

  /* Hero Tablet / Mobile Full-Bleed Campaign Framing */
  .hero__swiper {
    height: auto;
    min-height: 100svh;
  }

  .hero-slide {
    min-height: 100svh;
  }

  .hero-slide__bg-img {
    filter: brightness(0.72) saturate(1.05);
    transform: scale(1.03);
    object-position: top center;
  }

  .swiper-slide-active .hero-slide__bg-img {
    transform: scale(1.08);
  }

  .hero-slide__overlay {
    background: linear-gradient(
      180deg,
      rgba(17, 15, 16, 0.55) 0%,
      rgba(17, 15, 16, 0.25) 38%,
      rgba(17, 15, 16, 0.88) 78%,
      rgba(17, 15, 16, 0.96) 100%
    );
  }

  .hero__container {
    grid-template-columns: 1fr;
    align-items: flex-end;
    padding-top: calc(var(--header-height) + 4rem);
    padding-bottom: 6.5rem;
  }

  .hero__visual {
    display: none;
  }

  .hero__content {
    max-width: 640px;
  }

  /* About Section */
  .about__grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .about__visuals {
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
  }

  /* Collections Section */
  .collections__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .collection-card:nth-child(2) {
    margin-top: 0;
  }

  .collection-card:nth-child(3) {
    grid-column: span 2;
    min-height: 440px;
  }

  /* Gallery Masonry */
  .gallery__masonry {
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 260px;
  }

  .gallery-item,
  .gallery-item--tall,
  .gallery-item--feature,
  .gallery-item--compact {
    grid-column: span 4;
    grid-row: span 2;
  }

  /* Lightbox */
  .lightbox__content {
    grid-template-columns: 1fr;
    max-height: 90vh;
    overflow-y: auto;
  }

  .lightbox__media {
    max-height: 52vh;
  }

  .lightbox__img {
    max-height: 50vh;
  }

  .lightbox__details {
    padding: 1.5rem;
  }

  /* Branches */
  .branches__grid {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-inline: auto;
  }

  /* Contact Box */
  .contact__box {
    grid-template-columns: 1fr;
  }

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

/* 4. Mobile Phones (<= 768px) */
@media (max-width: 768px) {
  body {
    padding-bottom: 64px; /* Space for mobile sticky contact bar */
  }

  .navbar__brand-text {
    display: flex;
  }

  .navbar__brand-name {
    font-size: 1.05rem;
  }

  .navbar__brand-sub {
    font-size: 0.62rem;
  }

  .hero__headline {
    font-size: clamp(2.15rem, 8vw, 3rem);
  }

  .hero__description {
    font-size: 0.98rem;
    margin-bottom: 1.75rem;
  }

  .hero__actions {
    width: 100%;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
    padding: 0.88rem 1.35rem;
  }

  .hero__scroll-indicator {
    display: none;
  }

  .hero__bottom-inner {
    justify-content: center;
  }

  .about__pillars {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .about__heritage-badge {
    inset-inline-start: 0.5rem;
    top: 1rem;
    padding: 0.9rem 1.15rem;
  }

  /* Collections Single Column on Mobile */
  .collections__grid {
    grid-template-columns: 1fr;
  }

  .collection-card,
  .collection-card:nth-child(3) {
    grid-column: span 1;
    min-height: 460px;
  }

  /* Gallery 2-Column Editorial Lookbook on Mobile */
  .gallery__masonry {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
    gap: 0.85rem;
  }

  .gallery-item,
  .gallery-item--tall,
  .gallery-item--compact {
    grid-column: span 1;
    grid-row: span 2;
  }

  .gallery-item--feature {
    grid-column: span 2;
    grid-row: span 2;
  }

  .gallery-item__overlay {
    opacity: 1;
    background: linear-gradient(180deg, rgba(23, 23, 23, 0) 50%, rgba(23, 23, 23, 0.82) 100%);
    padding: 0.9rem;
  }

  .gallery-item__title {
    font-size: 0.92rem;
  }

  /* Statement Banner */
  .statement__bg {
    grid-template-columns: 1fr;
  }

  .statement__bg-img:nth-child(2),
  .statement__bg-img:nth-child(3) {
    display: none;
  }

  /* Social Media */
  .social__feed {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  /* Lightbox Navigation on Mobile */
  .lightbox__nav {
    top: auto;
    bottom: 1rem;
    transform: none;
    width: 44px;
    height: 44px;
  }

  /* Floating WhatsApp & Sticky Mobile Bar */
  .floating-whatsapp {
    bottom: 5.2rem;
    inset-inline-end: 1rem;
    padding: 0.75rem;
    border-radius: 50%;
  }

  .floating-whatsapp span {
    display: none;
  }

  .mobile-sticky-bar {
    display: grid;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }
}

/* 5. Small Mobile Screens (<= 480px) */
@media (max-width: 480px) {
  .container {
    padding-inline: 1.1rem;
  }

  .navbar__logo-frame {
    width: 44px;
    height: 44px;
  }

  .lang-switcher {
    padding: 0.35rem 0.65rem;
    font-size: 0.72rem;
  }

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

  .hero__actions .btn {
    width: 100%;
  }

  .about__visuals {
    padding-inline-end: 1.25rem;
    padding-bottom: 2.25rem;
  }

  .about__brand-signature {
    flex-direction: column;
    align-items: flex-start;
  }

  .gallery__masonry {
    grid-template-columns: 1fr;
    grid-auto-rows: 380px;
  }

  .gallery-item,
  .gallery-item--tall,
  .gallery-item--feature,
  .gallery-item--compact {
    grid-column: span 1;
    grid-row: span 1;
  }

  .contact__box {
    padding: 1.75rem 1.25rem;
  }

  .contact__buttons {
    flex-direction: column;
  }

  .contact__buttons .btn {
    width: 100%;
  }

  .social-channel-card {
    width: 100%;
  }
}