/* ============================================
   ART Gallery — widget styles
   Mirrors html/gallery.html page-specific CSS.
   Tokens from art-styles.css :root are assumed.
   ============================================ */

/* ---- Featured hero slider ---- */
.gallery-featured { background: var(--sand); padding-block: var(--section-y); }
.gallery-featured .section-head { max-width: none; margin-bottom: 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.gallery-featured .section-head > div:first-child { max-width: 640px; }
.gallery-featured .section-head h2 { margin-bottom: 0; }

.art-gallery-slider-wrap {
  position: relative;
}
.art-gallery-slider-wrap .slider {
  overflow: hidden;
  border-radius: 10px;
  background: var(--maroon-dark);
  box-shadow: 0 20px 52px rgba(26,24,20,.14), 0 2px 8px rgba(26,24,20,.06);
}
.art-gallery-slider-wrap .slider-track {
  display: flex;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.art-gallery-slider-wrap .slide {
  min-width: 100%;
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--maroon-dark);
}
@media (max-width: 720px) {
  .art-gallery-slider-wrap .slide { aspect-ratio: 4 / 3; }
}
.art-gallery-slider-wrap .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}
.art-gallery-slider-wrap:hover .slide.is-active img {
  transform: scale(1.025);
}
.art-gallery-slider-wrap .slide-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 48px 36px 28px;
  background: linear-gradient(to top, rgba(26,24,20,.82) 0%, rgba(26,24,20,.4) 60%, transparent 100%);
  color: var(--bone);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.art-gallery-slider-wrap .slide-caption h3 {
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 500;
  color: var(--bone);
  margin: 0 0 6px;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.art-gallery-slider-wrap .slide-caption p {
  font-size: 13.5px;
  color: rgba(250,247,241,.72);
  margin: 0;
  letter-spacing: .04em;
}
.art-gallery-slider-wrap .slide-counter {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--bone);
  font-weight: 400;
  letter-spacing: -.01em;
  white-space: nowrap;
  opacity: .6;
  flex-shrink: 0;
}
.art-gallery-slider-wrap .slide-counter em {
  font-size: 14px;
  font-style: normal;
  font-family: var(--sans);
  opacity: .7;
}

/* Slider arrows */
.art-gallery-slider-wrap .slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(250,247,241,.92);
  color: var(--maroon);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(26,24,20,.18);
  transition: background .18s, color .18s, transform .18s;
  backdrop-filter: blur(4px);
}
.art-gallery-slider-wrap .slider-btn:hover { background: var(--bone); color: var(--maroon-dark); transform: translateY(-50%) scale(1.08); }
.art-gallery-slider-wrap .slider-btn svg { pointer-events: none; }
.art-gallery-slider-wrap .slider-prev { left: -20px; }
.art-gallery-slider-wrap .slider-next { right: -20px; }
@media (max-width: 720px) {
  .art-gallery-slider-wrap .slider-prev { left: 10px; }
  .art-gallery-slider-wrap .slider-next { right: 10px; }
}

/* Slider dots */
.art-gallery-slider-wrap .slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  list-style: none;
  padding: 0;
}
.art-gallery-slider-wrap .slider-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 0;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s, width .2s;
}
.art-gallery-slider-wrap .slider-dots button.active {
  background: var(--maroon);
  width: 24px;
  border-radius: 4px;
}

/* ---- Pillar gallery strips ---- */
.art-gallery-strip-section { padding-block: var(--section-y); }
.art-gallery-strip-section.strip-all { background: var(--maroon); }
.art-gallery-strip-section.strip-all .strip-head h2 { color: var(--bone); }
.art-gallery-strip-section.strip-all .strip-head p { color: rgba(250,247,241,.64); }
.art-gallery-strip-section.strip-all .strip-count { color: rgba(250,247,241,.18); }
.art-gallery-strip-section.strip-all .eyebrow { color: var(--gold); }
.art-gallery-strip-section.strip-all .strip-btn { background: rgba(250,247,241,.12); border-color: rgba(250,247,241,.2); color: var(--bone); }
.art-gallery-strip-section.strip-all .strip-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--maroon-dark); }
.art-gallery-strip-section.strip-all .strip-btn:disabled { opacity: .25; }
.art-gallery-strip-section.strip-all .strip-card { border-top: 4px solid var(--gold); background: var(--maroon-dark); }
.art-gallery-strip-section.strip-ge { background: var(--bone); }
.art-gallery-strip-section.strip-ge .eyebrow { color: var(--pillar-ge-dark); }
.art-gallery-strip-section.strip-ge .strip-count { color: var(--pillar-ge); opacity: .4; }
.art-gallery-strip-section.strip-ge .strip-btn:hover { background: var(--pillar-ge); border-color: var(--pillar-ge); color: var(--ink); }
.art-gallery-strip-section.strip-he { background: var(--sand); }
.art-gallery-strip-section.strip-he .eyebrow { color: var(--pillar-he-dark); }
.art-gallery-strip-section.strip-he .strip-count { color: var(--pillar-he); opacity: .55; }
.art-gallery-strip-section.strip-he .strip-btn:hover { background: var(--pillar-he); border-color: var(--pillar-he); color: var(--ink); }
.art-gallery-strip-section.strip-se { background: var(--bone); }
.art-gallery-strip-section.strip-se .eyebrow { color: var(--pillar-se-dark); }
.art-gallery-strip-section.strip-se .strip-count { color: var(--pillar-se); opacity: .55; }
.art-gallery-strip-section.strip-se .strip-btn:hover { background: var(--pillar-se); border-color: var(--pillar-se); color: var(--ink); }

.strip-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.strip-head h2 { margin-bottom: 0; }
.strip-head .strip-count {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
  color: var(--border);
  letter-spacing: -.02em;
  flex-shrink: 0;
}

.strip-slider-wrap { position: relative; }
.strip-slider-inner { position: relative; }
.strip-slider { overflow: hidden; }
.strip-track {
  display: flex;
  gap: 16px;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.strip-card {
  flex: none;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--sand);
  transition: transform .22s ease, box-shadow .22s ease;
  cursor: pointer;
}
.strip-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(26,24,20,.16); }
.strip-ge .strip-card { border-top: 4px solid var(--pillar-ge); }
.strip-he .strip-card { border-top: 4px solid var(--pillar-he); }
.strip-se .strip-card { border-top: 4px solid var(--pillar-se); }
.strip-card .card-img {
  position: absolute;
  inset: 0;
}
.strip-card .card-img img,
.strip-card .card-img svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.strip-card:hover .card-img img { transform: scale(1.05); }

.strip-card .card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 14px 15px;
  background: linear-gradient(to top, rgba(26,24,20,.88) 0%, rgba(26,24,20,.52) 55%, transparent 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
}
.strip-card:hover .card-body,
.strip-card:focus-visible .card-body { opacity: 1; transform: translateY(0); }

.strip-card .card-code {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 4px;
}
.strip-ge .card-code { color: var(--pillar-ge); }
.strip-he .card-code { color: var(--pillar-he); }
.strip-se .card-code { color: var(--pillar-se); }
.strip-card .card-title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--bone);
  line-height: 1.3;
  margin: 0;
}

/* Strip nav */
.strip-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  justify-content: flex-end;
}
.strip-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bone);
  color: var(--maroon);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s, border-color .16s, color .16s;
}
.strip-btn:hover { background: var(--maroon); border-color: var(--maroon); color: var(--bone); }
.strip-btn:disabled { opacity: .3; cursor: default; }
.strip-btn:disabled:hover { background: var(--bone); border-color: var(--border); color: var(--maroon); }

/* Strip progress counter — overlaid bottom-right of image area */
.strip-progress {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 5;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--bone);
  letter-spacing: -.01em;
  white-space: nowrap;
  opacity: .6;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,.65);
}
.strip-progress em {
  font-size: 14px;
  font-style: normal;
  font-family: var(--sans);
  opacity: .7;
}

/* ---- Photo archive grid ---- */
.art-gallery-archive-section {
  background: var(--maroon-dark);
  padding-block: var(--section-y);
}
.archive-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}
.art-gallery-archive-section .eyebrow { color: var(--gold); }
.art-gallery-archive-section h2 { color: var(--bone); margin-bottom: 0; }
.art-gallery-archive-section p { color: rgba(250,247,241,.6); font-size: 15px; margin-top: 8px; }

.archive-grid {
  /* Grid where a portrait card spans two rows — exactly double a landscape
     card's height — so cards pack into clean, aligned rows with no gaps. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  grid-auto-flow: row dense;
}
@media (max-width: 960px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .archive-grid { grid-template-columns: 1fr; } }

.archive-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--maroon);
  border-top: 4px solid var(--gold);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}
.archive-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.archive-img {
  position: absolute;
  inset: 0;
}
.archive-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.archive-card:hover .archive-img img { transform: scale(1.05); }
/* Portrait photos: give the card a portrait frame and show the whole image,
   centred on white, instead of cropping it to the 16:9 landscape frame */
.archive-card.is-portrait {
  grid-row: span 2;       /* exactly twice the height of a landscape card */
  aspect-ratio: 16 / 18;  /* fallback ratio = two stacked 16:9 cards */
}
.archive-card.is-portrait .archive-img { background: #fff; }
.archive-card.is-portrait .archive-img img { object-fit: contain; }
.archive-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 16px 16px;
  background: linear-gradient(to top, rgba(26,24,20,.88) 0%, rgba(26,24,20,.5) 55%, transparent 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease;
}
.archive-card:hover .archive-caption,
.archive-card:focus-visible .archive-caption { opacity: 1; transform: translateY(0); }
.archive-code {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 4px;
}
.archive-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--bone);
  line-height: 1.3;
  margin: 0;
}

/* ---- Shared lightbox ---- */
.art-lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(26,24,20,.95);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  backdrop-filter: blur(8px);
}
.art-lightbox.open { opacity: 1; visibility: visible; }
.art-lightbox .lightbox-inner {
  position: relative;
  max-width: min(88vw, 1040px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.art-lightbox .lightbox-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.art-lightbox .lightbox-img-frame {
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: 100%;
  /* `art-has-brand-overlay` applies `container-type: inline-size`, which
     would zero out an inline-block element's width since it can't be sized
     from its descendants. Disable containment here so the frame can shrink
     to fit the lightbox image. */
  container-type: normal;
  border-radius: 6px;
  box-shadow: 0 24px 56px rgba(0,0,0,.55);
}
.art-lightbox .lightbox-img-frame > img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.art-lightbox .lightbox-caption {
  text-align: center;
  padding: 0 8px;
}
.art-lightbox .lightbox-code {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 6px;
}
.art-lightbox .lightbox-title {
  font-family: var(--serif);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 500;
  color: var(--bone);
  margin: 0;
  line-height: 1.3;
}
.art-lightbox .lightbox-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--serif);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  opacity: .75;
  transition: opacity .18s;
}
.art-lightbox .lightbox-link:hover { opacity: 1; }
.art-lightbox .lightbox-link[hidden] { display: none !important; }
.art-lightbox .lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(250,247,241,.22);
  background: rgba(250,247,241,.10);
  color: var(--bone);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, transform .18s;
  z-index: 201;
  backdrop-filter: blur(4px);
}
.art-lightbox .lightbox-nav:hover { background: rgba(250,247,241,.24); }
.art-lightbox .lightbox-nav svg { pointer-events: none; }
.art-lightbox .lightbox-prev { left: 20px; }
.art-lightbox .lightbox-next { right: 20px; }
@media (max-width: 600px) {
  .art-lightbox .lightbox-prev { left: 8px; }
  .art-lightbox .lightbox-next { right: 8px; }
}
.art-lightbox .lightbox-counter {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--bone);
  letter-spacing: -.01em;
  opacity: .6;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,.65);
}
.art-lightbox .lightbox-counter em {
  font-size: 14px;
  font-style: normal;
  font-family: var(--sans);
  opacity: .7;
}
.art-lightbox .lightbox-close {
  position: fixed;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(250,247,241,.12);
  border: 1px solid rgba(250,247,241,.24);
  color: var(--bone);
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s;
  line-height: 1;
  z-index: 202;
}
.art-lightbox .lightbox-close:hover { background: rgba(250,247,241,.22); }