/* ═══════════════════════════════════════════════════════════════
   Nasij — Gallery Collection Theme
   معرض التصاميم - مجموعة الإلهام
   Exact style applied: cream, ember, ink, bone colors
   Font: Rakkas, Limelight, Tajawal, Work Sans
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cream: #f7f1e3;
  --cream-deep: #ede4ce;
  --ink: #14143a;
  --ember: #e8744d;
  --bone: #e8dfca;
  --muted-ink: #6b6b89;
  --font-display: 'Rakkas', 'Limelight', serif;
  --font-body: 'Tajawal', 'Work Sans', sans-serif;
}

/* ── Gallery Section Container ──────────────────────────────── */
#gallery,
.gallery-collection,
section[id="gallery"] {
  border-top: 2px solid rgba(20, 20, 58, 0.15) !important;
  background: var(--cream-deep) !important;
  padding: 96px 24px !important;
}

@media (min-width: 768px) {
  #gallery,
  .gallery-collection,
  section[id="gallery"] {
    padding: 96px 40px !important;
  }
}

/* ── Inner container max-width ──────────────────────────────── */
#gallery > div,
.gallery-collection > div,
section[id="gallery"] > div {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ── Gallery Header / Title Section ──────────────────────────── */
.gallery-header,
#gallery > div > div:first-child,
section[id="gallery"] > div > div:first-child {
  text-align: center;
  margin-bottom: 48px !important;
}

/* Top label - الإيبرو النصوص */
.gallery-eyebrow,
#gallery p:first-of-type,
section[id="gallery"] p:first-of-type {
  font-size: 12px !important;
  letter-spacing: 0.4em !important;
  color: var(--ember) !important;
  margin-bottom: 16px !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  text-transform: none !important;
}

/* Main title */
.gallery-title,
#gallery h2,
section[id="gallery"] h2 {
  font-family: var(--font-display) !important;
  font-size: 40px !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  text-wrap: balance !important;
}

@media (min-width: 768px) {
  .gallery-title,
  #gallery h2,
  section[id="gallery"] h2 {
    font-size: 56px !important;
  }
}

@media (min-width: 1280px) {
  .gallery-title,
  #gallery h2,
  section[id="gallery"] h2 {
    font-size: 64px !important;
  }
}

/* Latin word inside title (like "of") */
#gallery h2 span,
section[id="gallery"] h2 span,
.gallery-title span {
  color: var(--ember) !important;
  font-style: italic !important;
  font-family: 'Limelight', serif !important;
  margin: 0 12px !important;
  font-weight: 400 !important;
  font-size: inherit !important;
}

/* Subtitle / Description */
.gallery-subtitle,
#gallery p:nth-of-type(2),
section[id="gallery"] > div > div:first-child > p:last-child {
  margin-top: 24px !important;
  color: rgba(20, 20, 58, 0.7) !important;
  line-height: 1.6 !important;
  max-width: 448px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* ── Filter Buttons Container ────────────────────────────────– */
.gallery-filters,
.filter-buttons,
#gallery > div > div:nth-child(2),
section[id="gallery"] > div > div:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px !important;
  margin-bottom: 56px !important;
}

/* Filter Button */
.filter-btn,
.gallery-filters button,
#gallery button[type="button"]:not([class*="load"]):not([class*="more"]),
section[id="gallery"] button[type="button"]:not([class*="load"]):not([class*="more"]) {
  padding: 7px 13px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  border: 1px solid rgba(20, 20, 58, 0.15) !important;
  background: var(--cream) !important;
  color: var(--ink) !important;
  cursor: pointer;
  transition: all 0.25s ease !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.filter-btn:hover,
.gallery-filters button:hover,
#gallery button[type="button"]:not([class*="load"]):hover:not([class*="more"]),
section[id="gallery"] button[type="button"]:not([class*="load"]):hover:not([class*="more"]) {
  background: var(--ink) !important;
  color: var(--cream) !important;
  border-color: var(--ink) !important;
}

.filter-btn.active,
.gallery-filters button.active,
#gallery button.active,
section[id="gallery"] button.active {
  background: var(--ember) !important;
  color: var(--cream) !important;
  border-color: var(--ember) !important;
}

/* ── Gallery Grid ────────────────────────────────────────────– */
.gallery-grid,
.gallery-collection-grid,
#gallery > div > div:nth-child(3),
section[id="gallery"] > div > div:nth-child(3) {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 56px !important;
}

@media (max-width: 1280px) {
  .gallery-grid,
  .gallery-collection-grid,
  #gallery > div > div:nth-child(3),
  section[id="gallery"] > div > div:nth-child(3) {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 768px) {
  .gallery-grid,
  .gallery-collection-grid,
  #gallery > div > div:nth-child(3),
  section[id="gallery"] > div > div:nth-child(3) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .gallery-grid,
  .gallery-collection-grid,
  #gallery > div > div:nth-child(3),
  section[id="gallery"] > div > div:nth-child(3) {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* ── Gallery Card ────────────────────────────────────────────– */
.gallery-item,
article.gallery-item,
#gallery article,
section[id="gallery"] article {
  background: var(--cream) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  border: 1px solid rgba(20, 20, 58, 0.06) !important;
  transition: border-color 0.25s ease !important;
  display: flex;
  flex-direction: column;
}

.gallery-item:hover,
article.gallery-item:hover,
#gallery article:hover,
section[id="gallery"] article:hover {
  border-color: var(--ember) !important;
}

/* ── Card Image Container ────────────────────────────────────– */
.gallery-image-wrapper,
.gallery-thumb,
#gallery article > div:first-child,
section[id="gallery"] article > div:first-child {
  position: relative;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden;
  background: var(--cream-deep) !important;
}

.gallery-image,
#gallery img,
section[id="gallery"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.7s ease !important;
}

.gallery-item:hover .gallery-image,
article.gallery-item:hover img,
#gallery article:hover img,
section[id="gallery"] article:hover img {
  transform: scale(1.05) !important;
}

/* ── Float Tag on Image ──────────────────────────────────────– */
.gallery-tag,
.gallery-item span[class*="tag"],
#gallery span[class*="tag"],
section[id="gallery"] span[class*="tag"],
#gallery article span:not(:last-child),
section[id="gallery"] article span:not(:last-child) {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(247, 241, 227, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: var(--ink) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  z-index: 1;
}

/* ── Card Footer ────────────────────────────────────────────– */
.gallery-content,
.gallery-footer,
#gallery article footer,
#gallery article > div:last-child,
section[id="gallery"] article > div:last-child {
  padding: 24px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px !important;
  flex: 1;
}

/* Card Title */
.gallery-item-title,
#gallery article h3,
section[id="gallery"] article h3 {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  color: var(--ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  flex: 1;
}

/* Arrow Icon */
.gallery-arrow,
#gallery article span:last-child,
section[id="gallery"] article span:last-child {
  color: var(--ember) !important;
  font-size: 20px !important;
  font-family: 'Limelight', serif !important;
  font-weight: 400 !important;
  transition: transform 0.3s ease !important;
  flex-shrink: 0;
}

.gallery-item:hover .gallery-arrow,
#gallery article:hover span:last-child,
section[id="gallery"] article:hover span:last-child {
  transform: translateX(-4px) !important;
}

/* ── Load More Button ────────────────────────────────────────– */
.gallery-load-more,
.load-more-section,
#gallery > div > div:last-child,
section[id="gallery"] > div > div:last-child {
  display: flex;
  justify-content: center;
  margin-top: 56px !important;
}

.load-more-btn,
#gallery button[class*="load"],
#gallery button[class*="more"],
section[id="gallery"] button[class*="load"],
section[id="gallery"] button[class*="more"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream) !important;
  border: 2px solid var(--ember) !important;
  color: var(--ember) !important;
  padding: 16px 40px !important;
  border-radius: 9999px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  cursor: pointer;
  transition: all 0.25s ease !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.load-more-btn:hover,
#gallery button[class*="load"]:hover,
#gallery button[class*="more"]:hover,
section[id="gallery"] button[class*="load"]:hover,
section[id="gallery"] button[class*="more"]:hover {
  background: var(--ember) !important;
  color: var(--cream) !important;
}

/* ── Responsive adjustments ──────────────────────────────────– */
@media (max-width: 640px) {
  #gallery,
  .gallery-collection,
  section[id="gallery"] {
    padding: 64px 16px !important;
  }

  .gallery-title,
  #gallery h2,
  section[id="gallery"] h2 {
    font-size: 32px !important;
  }

  .gallery-subtitle,
  #gallery p:nth-of-type(2),
  section[id="gallery"] > div > div:first-child > p:last-child {
    font-size: 13px !important;
  }

  .gallery-content,
  #gallery article > div:last-child,
  section[id="gallery"] article > div:last-child {
    padding: 16px !important;
  }

  .gallery-item-title,
  #gallery article h3,
  section[id="gallery"] article h3 {
    font-size: 18px !important;
  }

  .gallery-arrow,
  #gallery article span:last-child,
  section[id="gallery"] article span:last-child {
    font-size: 18px !important;
  }
}

/* ── Ensure no conflicts with existing styles ──────────────── */
.gallery-item,
article.gallery-item,
#gallery article,
section[id="gallery"] article {
  box-shadow: none !important;
  background-color: var(--cream) !important;
  border-color: rgba(20, 20, 58, 0.06) !important;
}

.gallery-item:hover,
article.gallery-item:hover,
#gallery article:hover,
section[id="gallery"] article:hover {
  box-shadow: none !important;
  border-color: var(--ember) !important;
  transform: none !important;
}