/* ============================================================
   CASBAH ALGERIA — RESPONSIVE OVERRIDES
   responsive.css — Page-specific responsive rules
   ============================================================ */

/* ============================================================
   CULTURAL TILES STRIP
   ============================================================ */

.cultural-tiles-wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  color: white;
  text-align: center;
}

.cultural-tile {
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1024px) {
  .cultural-tiles-wrap {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .cultural-tile {
    flex: 0 0 auto;
    width: clamp(160px, 50vw, 260px);
    scroll-snap-align: start;
  }
}

@media (max-width: 600px) {
  .cultural-tiles-wrap {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    overflow: visible;
  }
  .cultural-tile {
    width: 100%;
    padding: 1.5rem 1rem;
  }
  /* Last tile spans full width if odd */
  .cultural-tile:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}

/* ============================================================
   ABOUT SECTION GRID
   ============================================================ */

.about-grid {
  align-items: center;
  gap: var(--space-2xl);
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr !important;
  }
  .about-grid .reveal-left {
    min-height: 260px !important;
  }
  .about-grid img {
    min-height: 260px !important;
  }
}

/* ============================================================
   HERO CONTENT — PAGE SPECIFIC OVERRIDES
   ============================================================ */

.hero-content.arch-frame {
  text-align: center;
}

@media (max-width: 768px) {
  .hero-content.arch-frame {
    border-radius: var(--border-radius-md);
  }
}

@media (max-width: 480px) {
  .hero-content.arch-frame {
    border-radius: var(--border-radius-sm);
    width: 95%;
  }
}

/* ============================================================
   ARTS PAGE — MASONRY GRID
   ============================================================ */

@media (max-width: 768px) {
  .grid-masonry {
    columns: 2;
    column-gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  .grid-masonry {
    columns: 1;
  }
}

/* ============================================================
   ACCORDION — MOBILE
   ============================================================ */

@media (max-width: 480px) {
  .accordion-header {
    padding: var(--space-md) !important;
  }
  .accordion-header h3 {
    font-size: var(--text-xl) !important;
  }
}

/* ============================================================
   SECTION TITLE WRAP — MOBILE
   ============================================================ */

@media (max-width: 480px) {
  .section-title-wrap {
    margin-bottom: var(--space-2xl);
  }
  .section-title-wrap h2 {
    font-size: var(--text-2xl);
  }
  .section-title-wrap .arabic-title {
    font-size: var(--text-xl);
  }
  .section-title-wrap .subtitle {
    font-size: var(--text-base);
  }
}

/* ============================================================
   MARQUEE — MOBILE
   ============================================================ */

@media (max-width: 480px) {
  .marquee-item {
    font-size: var(--text-xs);
    gap: var(--space-md);
    padding: 0 var(--space-md);
  }
}

/* ============================================================
   CARD GRID — INDEX PAGE
   ============================================================ */

@media (max-width: 480px) {
  .grid-3 .card .card-body {
    padding: var(--space-md);
  }
  .grid-3 .card .arch-container {
    height: clamp(150px, 45vw, 200px) !important;
  }
}

/* ============================================================
   FLIP CARDS — TOUCH DEVICES
   ============================================================ */

@media (hover: none) {
  .flip-card-container:hover .flip-card-inner {
    transform: none;
  }
  .flip-card-container .flip-card-inner.flipped {
    transform: rotateY(180deg);
  }
}

/* ============================================================
   GALLERY PAGE
   ============================================================ */

@media (max-width: 768px) {
  .gallery-grid {
    columns: 2 !important;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    columns: 1 !important;
  }
}

/* ============================================================
   NAV LOGO — TRUNCATE ON VERY SMALL SCREENS
   ============================================================ */

@media (max-width: 360px) {
  .nav-logo {
    font-size: 1rem !important;
  }
}

/* ============================================================
   FOOTER — EXTRA SMALL
   ============================================================ */

@media (max-width: 360px) {
  .footer-quote {
    font-size: var(--text-sm) !important;
  }
  .footer-bottom {
    font-size: var(--text-xs);
  }
}

/* ============================================================
   GLOBAL IMAGE FIT
   ============================================================ */

.arch-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============================================================
   PREVENT HORIZONTAL OVERFLOW — GLOBAL SAFETY
   ============================================================ */

body {
  overflow-x: hidden;
}

section,
header,
footer,
.container {
  max-width: 100%;
}