/* cc-gallery-section — depends on: casa-christa-design-system */

.cc-gallery {
  padding: 96px var(--cc-section-x) 120px;
  max-width: 1440px;
  margin: 0 auto;
}

/* ── Header ── */

.cc-gallery__header { margin-bottom: 52px; }

.cc-gallery__eyebrow {
  font-family: var(--cc-font-body);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cc-taupe);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.cc-gallery__eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--cc-taupe);
  flex-shrink: 0;
}

.cc-gallery__heading {
  font-family: var(--cc-font-heading);
  font-weight: 300;
  font-size: clamp(40px, 4vw, 60px);
  line-height: 1.07;
  color: var(--cc-dark);
  letter-spacing: -0.01em;
}

.cc-gallery__heading em {
  font-style: italic;
  font-weight: 400;
  color: var(--cc-taupe);
  display: block;
}

/* ── Ornament ── */

.cc-gallery__ornament {
  display: flex;
  align-items: center;
  margin-bottom: 44px;
}

.cc-gallery__ornament-line {
  flex: 1;
  height: 1px;
  background: var(--cc-beige-border);
}

.cc-gallery__ornament-center {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  flex-shrink: 0;
}

.cc-gallery__ornament-diamond {
  width: 5px;
  height: 5px;
  border: 1px solid var(--cc-taupe);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.cc-gallery__ornament-label {
  font-family: var(--cc-font-heading);
  font-size: 13px;
  font-weight: 300;
  font-style: italic;
  color: var(--cc-taupe);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* ── Grid ── */

.cc-gallery__grid {
  display: grid;
  grid-template-areas:
    "main  top1  top2"
    "main  bot1  bot2";
  grid-template-columns: 1.55fr 1fr 0.9fr;
  grid-template-rows: 385px 252px;
  gap: 3px;
}

.cc-gallery__item {
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.cc-gallery__item:nth-child(1) { grid-area: main; }
.cc-gallery__item:nth-child(2) { grid-area: top1; }
.cc-gallery__item:nth-child(3) { grid-area: top2; }
.cc-gallery__item:nth-child(4) { grid-area: bot1; }
.cc-gallery__item:nth-child(5) { grid-area: bot2; }

.cc-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cc-gallery__item:hover .cc-gallery__img { transform: scale(1.055); }

/* Overlay */
.cc-gallery__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(44, 40, 40, 0.85) 0%,
    rgba(44, 40, 40, 0.22) 42%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
}

.cc-gallery__item:hover .cc-gallery__overlay { opacity: 1; }

/* Caption */
.cc-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 26px;
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.45s ease, opacity 0.45s ease;
}

.cc-gallery__item:hover .cc-gallery__caption {
  transform: translateY(0);
  opacity: 1;
}

.cc-caption-tag {
  font-family: var(--cc-font-body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 242, 236, 0.6);
  margin-bottom: 5px;
}

.cc-caption-title {
  font-family: var(--cc-font-heading);
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  color: var(--cc-cream);
  line-height: 1.25;
}

/* Number badge */
.cc-gallery__num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--cc-font-heading);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: transparent;
  transition: color 0.45s ease;
  user-select: none;
  pointer-events: none;
}

.cc-gallery__item:hover .cc-gallery__num { color: rgba(255, 255, 255, 0.42); }

/* Hover border */
.cc-gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  pointer-events: none;
  z-index: 2;
  transition: border-color 0.3s ease;
}

.cc-gallery__item:hover::after { border-color: rgba(168, 149, 122, 0.28); }

/* ── Entrance animation ── */

.cc-gallery .cc-gallery__header,
.cc-gallery .cc-gallery__ornament {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.cc-gallery .cc-gallery__item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.cc-gallery.is-visible .cc-gallery__header {
  opacity: 1;
  transform: translateY(0);
}

.cc-gallery.is-visible .cc-gallery__ornament {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.18s;
}

.cc-gallery.is-visible .cc-gallery__item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }
.cc-gallery.is-visible .cc-gallery__item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.38s; }
.cc-gallery.is-visible .cc-gallery__item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.44s; }
.cc-gallery.is-visible .cc-gallery__item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.50s; }
.cc-gallery.is-visible .cc-gallery__item:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.56s; }

/* ── Lightbox ── */

.cc-lb {
  position: fixed;
  inset: 0;
  background: rgba(30, 26, 26, 0.97);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.cc-lb.is-open {
  opacity: 1;
  pointer-events: all;
}

.cc-lb__img {
  max-width: min(90vw, 1200px);
  max-height: 84vh;
  object-fit: contain;
  display: block;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
  transition: opacity 0.2s ease;
}

.cc-lb__img.is-loading { opacity: 0.4; }

.cc-lb__close {
  position: fixed;
  top: 26px;
  right: 36px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(247, 242, 236, 0.5);
  font-family: var(--cc-font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color 0.2s;
  padding: 8px;
}

.cc-lb__close:hover { color: rgba(247, 242, 236, 0.9); }

.cc-lb__close-x {
  width: 16px;
  height: 16px;
  position: relative;
  flex-shrink: 0;
}

.cc-lb__close-x::before,
.cc-lb__close-x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}

.cc-lb__close-x::before { transform: rotate(45deg); }
.cc-lb__close-x::after  { transform: rotate(-45deg); }

.cc-lb__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 1px solid rgba(168, 149, 122, 0.3);
  color: rgba(247, 242, 236, 0.5);
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: all 0.25s ease;
  font-family: var(--cc-font-body);
}

.cc-lb__nav:hover {
  background: rgba(168, 149, 122, 0.18);
  color: rgba(247, 242, 236, 0.9);
  border-color: rgba(168, 149, 122, 0.55);
}

.cc-lb__prev { left: 28px; }
.cc-lb__next { right: 28px; }

.cc-lb__info {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.cc-lb__caption {
  font-family: var(--cc-font-heading);
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  color: rgba(247, 242, 236, 0.65);
  margin-bottom: 6px;
}

.cc-lb__counter {
  font-family: var(--cc-font-body);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(168, 149, 122, 0.65);
}