/* ============================================================
   MATI BHADRA SAGARA — GALLERY PAGE
   css/pages/gallery.css
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   HERO — text left, quote block right
   ───────────────────────────────────────────────────────────── */

.gallery-hero {
  background-color: var(--color-bg-primary);
}

.gallery-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.gallery-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.gallery-hero__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-size-h1-l);
  line-height: var(--type-lh-h1-l);
  color: var(--color-brand-rust);
}

.gallery-hero__body {
  font-size: var(--type-size-body-m);
  line-height: var(--type-lh-body-m);
  color: var(--color-text-body);
  max-width: 48ch;
}

/* Quote block — red accent on right */
.gallery-hero__quote {
  background-color: var(--color-cta);
  padding: var(--space-8);
}

/* Override base.css blockquote */
.gallery-hero__blockquote {
  border: none;
  padding: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-size-quote-s);
  line-height: var(--type-lh-quote-s);
  color: var(--color-text-white);
  letter-spacing: 0;
}

@media (min-width: 769px) {
  .gallery-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
  }

  .gallery-hero__blockquote {
    font-size: var(--type-size-quote-m);
    line-height: var(--type-lh-quote-m);
  }
}

@media (min-width: 1025px) {
  .gallery-hero__inner {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-11);
  }
}


/* ─────────────────────────────────────────────────────────────
   FILTER TABS
   ───────────────────────────────────────────────────────────── */

.gallery-filter {
  border-bottom: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg-primary);
  position: sticky;
  top: var(--nav-height);
  z-index: var(--z-raised);
}

.gallery-filter__inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           /* Firefox */
}

.gallery-filter__inner::-webkit-scrollbar {
  display: none;                   /* Chrome/Safari */
}

.gallery-filter__tabs {
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  min-width: max-content;          /* prevent wrapping on mobile */
}

.gallery-tab {
  font-family: var(--font-sans);
  font-size: var(--type-size-eyebrow-m);
  letter-spacing: var(--type-ls-eyebrow-s);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tab-inactive-color);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  transition: color var(--transition-fast),
              border-color var(--transition-base);
  white-space: nowrap;
  min-height: 44px;
}

.gallery-tab:hover {
  color: var(--tab-active-color);
}

.gallery-tab--active {
  color: var(--tab-active-color);
  border-bottom-color: var(--color-border-active);
}


/* ─────────────────────────────────────────────────────────────
   GALLERY GRID
   ───────────────────────────────────────────────────────────── */

.gallery-grid-section {
  background-color: var(--color-bg-primary);
  padding-block: var(--space-8);
}

.gallery-grid-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Mobile — 1-col */
.gallery-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* Gallery item */
.gallery-item {
  position: relative;
  overflow: hidden;
}

.gallery-item__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.gallery-item__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.gallery-item:hover .gallery-item__img,
.gallery-item:focus-within .gallery-item__img {
  transform: scale(1.03);
}

/* Caption overlay */
.gallery-item__caption {
  position: absolute;
  inset: 0;
  background: var(--gradient-gallery-hover);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.gallery-item:hover .gallery-item__caption,
.gallery-item:focus-within .gallery-item__caption {
  opacity: 1;
}

/* Always visible on touch devices */
@media (hover: none) {
  .gallery-item__caption {
    opacity: 0.7;
  }
}

.gallery-item__category {
  font-family: var(--font-sans);
  font-size: var(--type-size-eyebrow-m);
  letter-spacing: var(--type-ls-eyebrow-m);
  text-transform: uppercase;
  color: rgba(255, 241, 237, 0.75);
  font-weight: 700;
  display: block;
}

.gallery-item__title {
  font-family: var(--font-display);
  font-size: var(--type-size-h3);
  line-height: var(--type-lh-h3);
  color: var(--color-text-white);
  display: block;
}

/* Hidden items (filtered out) */
.gallery-item[hidden] {
  display: none;
}

/* Filter fade animation */
.gallery-item--fading-out {
  opacity: 0;
  transition: opacity 200ms ease;
}

.gallery-item--fading-in {
  opacity: 0;
  animation: galleryFadeIn 300ms ease forwards;
}

@keyframes galleryFadeIn {
  to { opacity: 1; }
}

/* Tablet — 2-col equal */
@media (min-width: 769px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .gallery-item__img {
    aspect-ratio: 4 / 3;
  }
}

/* Desktop — asymmetric 3-col complex grid */
@media (min-width: 1025px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: var(--space-4);
  }

  /* First image spans 2 rows — large hero item */
  .gallery-item--large {
    grid-row: span 2;
  }

  .gallery-item--large .gallery-item__img {
    aspect-ratio: auto;
    height: 100%;
    object-fit: cover;
    min-height: 480px;
  }

  .gallery-item__img {
    aspect-ratio: 4 / 3;
  }
}


/* ─────────────────────────────────────────────────────────────
   EMPTY STATE
   ───────────────────────────────────────────────────────────── */

.gallery-empty {
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--type-size-body-m);
  color: var(--color-text-muted);
  padding-block: var(--space-10);
}


/* ─────────────────────────────────────────────────────────────
   LOAD MORE / COUNT
   ───────────────────────────────────────────────────────────── */

.gallery-load-more {
  display: flex;
  justify-content: center;
  padding-top: var(--space-4);
}

.gallery-load-more__label {
  font-family: var(--font-sans);
  font-size: var(--type-size-body-s);
  letter-spacing: var(--type-ls-eyebrow-s);
  text-transform: uppercase;
  color: var(--color-text-muted);
  max-width: none;
}