/* ============================================================
   DOWNLOAD GALLERY — LIGHTBOX + DELIVERY MASONRY GRID
   ============================================================ */

/* ======================
   LIGHTBOX OVERLAY
   ====================== */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;                 /* ALWAYS flex — same as main lightbox */
  align-items: center;
  justify-content: center;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  visibility: hidden;

  transition: opacity 240ms ease-out, visibility 0s linear 240ms;
}

.lightbox.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 240ms ease-out;
}




/* ======================
   IMAGE WRAPPER
   ====================== */

.lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ======================
   TOP-RIGHT CONTROLS
   Close (×), Fullscreen (⛶), Download (⤓)
   ====================== */

.lightbox-close,
.lightbox-fullscreen,
.lightbox-download {
  position: absolute;
  top: -2rem;

  background: transparent;
  border: none;
  padding: 0;
  margin: 0;

  color: #f5f5f5;
  line-height: 1;
  cursor: pointer;
  z-index: 10001;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1.3rem;
}

/* Close button: far right */
.lightbox-close {
  right: 0;
}

/* Fullscreen: far left */
.lightbox-fullscreen {
  left: 0;
  font-size: 1.1rem;
  opacity: 0.85;
}
.lightbox-fullscreen:hover {
  opacity: 1;
}

/* ======================
   ARROWS
   ====================== */

.lightbox-arrow {
  position: absolute;
  top: 10%;                         /* avoid the control cluster up top */
  bottom: 0;
  width: 18%;                       /* big hitbox */
  display: flex;
  align-items: center;
  justify-content: center;

  background: none;
  border: none;
  cursor: pointer;

  color: rgba(255, 255, 255, 0.4);
  font-size: 1.6rem;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
  z-index: 9999;
}

.lightbox:hover .lightbox-arrow {
  opacity: 1;
}

.lightbox-arrow:hover {
  color: rgba(255, 255, 255, 0.9);
}

.lightbox-arrow.left {
  left: 0;
}
.lightbox-arrow.right {
  right: 0;
}

/* ======================
   FULLSCREEN MODE
   ====================== */

.lightbox-inner:fullscreen {
  max-width: 100vw;
  max-height: 100vh;
}

.lightbox-inner:fullscreen .lightbox-image {
  max-width: 100vw;
  max-height: 100vh;
}

.lightbox-inner:fullscreen .lightbox-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
}

.lightbox-inner:fullscreen .lightbox-fullscreen {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
}

.lightbox-inner:fullscreen .lightbox-download {
  position: fixed;
  top: 1.5rem;
  right: 4rem;  /* still between fullscreen and close */
}

/* ======================
   DELIVERY MASONRY GRID
   ====================== */

.masonry-grid {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 0.25rem;

  display: block !important;       /* ensure multicolumn works */
  column-count: 4 !important;
  column-gap: 0.5rem;
  width: 100%;
}

.masonry-grid .grid-item {
  display: inline-block !important;
  width: 100%;
  margin: 0 0 0.18rem;
  background: var(--bg-alt);
  border: none;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  break-inside: avoid-column;
}

.masonry-grid .grid-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  cursor: pointer;
}

.masonry-grid.is-building {
  visibility: hidden;
}


/* Inline per-image hover download tag */
.download-tag {
  position: absolute;
  top: 0;
  right: 0;

  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 0.2rem 0.6rem;

  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;

  opacity: 0;
  transition: opacity 140ms ease-out;
  z-index: 2;
}

.grid-item:hover .download-tag {
  opacity: 1;
}

/* Ensure the tile is the positioning context for the absolute download tag */
.grid-item,
.snapgrid-item {
  position: relative;
}

/* Show tag on hover for BOTH systems */
.grid-item:hover .download-tag,
.snapgrid-item:hover .download-tag {
  opacity: 1;
}

/* Optional: allow clicking the tag even if other click handlers exist */
.download-tag {
  pointer-events: auto;
}


/* Responsive breakpoints */
@media (max-width: 960px) {
  .masonry-grid {
    column-count: 2 !important;
  }
}

@media (max-width: 600px) {
  .masonry-grid {
    column-count: 1 !important;
  }
}

/* --- FINAL OVERRIDE: DOWNLOAD ICON BEHAVIOR --- */

.lightbox-download {
  /* Position: pinned near the close button */
  position: absolute !important;
  top: -2rem !important;
  right: 2.4rem !important;
  left: auto !important;
  bottom: auto !important;

  /* Size: tight around the glyph only */
  width: auto !important;
  height: auto !important;

  /* Visuals */
  font-size: 1.2rem;
  line-height: 1;
  color: #f5f5f5;
  text-decoration: none;

  /* Kill any inherited "big box" / arrow styles */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
  cursor: pointer;
  z-index: 10001; /* same layer as close/fullscreen */
}

.lightbox-download:hover {
  color: #ffffff;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ============================================================
   DELIVERY PAGE HEADER
   ============================================================ */

.delivery-header {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;

  /* center whole block on page*/
  max-width: 960px;
  margin: 1.5rem auto 2.3rem;
  padding-top: 0.5rem;
}

/* Vertical dividing line */
.delivery-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
  height: 100%;
  margin-top: 0.2rem;
}

/* Actions column */
.delivery-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 240px;
}

/* ZIP instructions */
.zip-instructions {
  max-width: 32rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);


  /* pull it up closer to buttons*/
  margin-top: .15rem;
}
  /* tighten paragraph spacing*/
.zip-instructions p {
    margin: 0.2rem 0;
}

/* make the first line hug the top a bit more*/
.zip-instructions p:first-child {
    margin-top: 0;
}

.delivery-intro {
  margin: 0.5rem auto 1.4rem auto;   /* center spacing */
  font-size: 0.92rem;
  text-align: center;                /* center text */
  color: rgba(255, 255, 255, 0.65);
  max-width: 640px;                  /* keeps it readable on wide screens */
  line-height: 1.55;
  letter-spacing: 0.02em;            /* subtle polish */
}

/* ============================
   MINIMAL UTILITY BAR
   ============================ */

.delivery-utility {
  display: flex;
  justify-content: center;
  gap: 2.2rem;
  margin: 0.4rem 0 1.2rem;
}

.utility-link {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;

  color: rgba(255, 255, 255, 0.85);
  border: 0px solid rgba(255, 255, 255, 0.5);

  padding: 0.45rem 1.1rem;
  transition: border-color 120ms ease-out, color 120ms ease-out;
}

.utility-link:hover {
  border-color: rgba(255, 255, 255, 0.9);
  color: #ffffff;
}

/* Base utility buttons */
.utility-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.45rem 0.9rem;
  border: none;

  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;

  transition: border-color 120ms ease-out, color 120ms ease-out;
}

.utility-link:hover {
  border-color: rgba(255, 255, 255, 0.9);
  color: #ffffff;
}

/* Back icon SVG */
.icon-back {
  height: 2.2rem;      /* main scale control */
  width: auto;         /* maintain aspect ratio */
  display: block;
  fill: currentColor;  /* use button color (white on hover, etc.) */
}

/* ZIP icon SVG */
.icon-download {
  height: 2.2rem;      /* keep them visually similar height */
  width: 2.2rem;
  display: block;
  color: rgba(255,255,255,0.85);
  fill: currentColor;
  transition: color 120ms ease, transform 120ms ease;
}

.utility-link:hover {
  color: #ffffff;
  transform: translateY(1px);
}

/* If you want slightly more padding on the ZIP one: */
.utility-link:not(.utility-link--back) .icon-download {
  height: 2.4rem;
}



.delivery-hint {
  text-align: center;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0.2rem 0 1.6rem;
}


/* OS label */
.label-os {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 600;
  margin-right: 0.35rem;
  color: rgba(255, 255, 255, 0.75);
}
.btn-return-gallery,
.btn-zip-download {
  display: inline-block;
  padding: 0.55rem 1.2rem;

  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.0rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);

  text-decoration: none;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}

.btn-return-gallery:hover,
.btn-zip-download:hover {
  border-color: #ffffff;
  color: #ffffff;
}

/* =========================================
   MICRO HOVER ON GRID IMAGES (FOCUS EFFECT)
   ========================================= */

@media (hover: hover) and (pointer: fine) {
  .masonry-grid .grid-item img {
    transition: transform 160ms ease-out, filter 160ms ease-out;
  }

  .masonry-grid .grid-item:hover img {
    transform: scale(1.02);      /* tiny zoom */
    filter: brightness(1.05);    /* slight lift in exposure */
  }
}

/* Clickable grid thumbnails */
.masonry-grid .grid-item,
.masonry-grid .grid-item img,
.masonry-grid .grid-item .download-tag {
  cursor: pointer !important;
}

/* =========================================================
   DELIVERY HERO — KENTUCKY STYLE (CLEAN BASELINE)
   ========================================================= */

/* ----- HERO CONTAINER ----- */
.delivery-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  max-height: 980px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  z-index: 0;
}

@media (max-width: 700px) {
  .delivery-hero {
    height: 100svh;
    min-height: 560px;
  }
}

/* ----- HERO IMAGE ----- */
.delivery-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

/* ----- LIGHT HERO FADE (OPTIONAL, VERY SUBTLE) ----- */
.delivery-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.22) 0%,
    rgba(0,0,0,0.00) 55%
  );
}

/* ----- TOP-LEFT BACK ARROW (UTILITY, NO BOX) ----- */
.hero-back {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 30;

  width: 3.75rem;
  height: 3.75rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;
  text-decoration: none;

  color: rgba(255,255,255,0.55);

  transition: color 140ms ease, transform 120ms ease;
}

.hero-back:hover {
  color: rgba(255,255,255,0.95);
  transform: translateY(1px);
}

.hero-back:focus-visible {
  outline: 2px solid rgba(255,255,255,0.75);
  outline-offset: 3px;
}

.icon-back {
  width: 2.8rem;
  height: 2.8rem;
  display: block;
  fill: currentColor;
}

/* ----- STRONG BOTTOM BANNER ----- */
.delivery-hero__banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;

  padding-inline: clamp(1rem, 3vw, 2.75rem);
  padding-block: 1.4rem 1.6rem;

  text-align: left;
  color: rgba(255,255,255,0.92);

  /*background: linear-gradient(
    to top,
    rgba(0,0,0,0.94) 0%,
    rgba(0,0,0,0.78) 30%,
    rgba(0,0,0,0.52) 45%,
    rgba(0,0,0,0.18) 78%,
    rgba(0,0,0,0.00) 100%
  ); 
background: linear-gradient(
  to top,
  rgba(0,0,0,0.96) 0%,
  rgba(0,0,0,0.82) 28%,
  rgba(0,0,0,0.56) 55%,
  rgba(0,0,0,0.22) 80%,
  rgba(0,0,0,0.00) 100%
);
background: linear-gradient(
  to top,
  rgba(0,0,0,0.94) 0%,
  rgba(0,0,0,0.78) 32%,
  rgba(0,0,0,0.52) 62%,
  rgba(0,0,0,0.18) 85%,
  rgba(0,0,0,0.00) 100%
);
*/
background: linear-gradient(
  to top,
  rgba(0,0,0,0.94) 0%,
  rgba(0,0,0,0.80) 36%,
  rgba(0,0,0,0.55) 68%,
  rgba(0,0,0,0.20) 90%,
  rgba(0,0,0,0.00) 100%
);

}

/* ----- SUBTLE BLUR THAT FADES IN (NO HARD EDGE) ----- */
.delivery-hero__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  background: rgba(0,0,0,0.18);

  mask-image: linear-gradient(
    to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.9) 25%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0.2) 65%,
    rgba(0,0,0,0.0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.9) 25%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0.2) 65%,
    rgba(0,0,0,0.0) 100%
  );
}

/* ----- META BLOCK (LEFT-ALIGNED, CONSTRAINED) ----- */
.delivery-hero__meta {
  width: min(1200px, 100%);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ----- DATE ABOVE TITLE ----- */
.delivery-hero__date {
  margin: 0 0 0.35rem 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.78);
}

/* ----- TITLE ----- */
.delivery-hero__title {
  margin: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: clamp(2.0rem, 4vw, 3.2rem);
  line-height: 1.02;

  text-shadow:
    0 1px 2px rgba(0,0,0,0.35),
    0 4px 14px rgba(0,0,0,0.45);
}

/* ----- SUBLINE (ZIP ON RIGHT) ----- */
.delivery-hero__subline {
  margin-top: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* ----- ZIP BUTTON ----- */
.hero-zip {
  margin-left: auto;

  width: 3.0rem;
  height: 3.0rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: rgba(255,255,255,0.85);
  text-decoration: none;

  transition: transform 120ms ease, color 120ms ease,
              border-color 120ms ease, background 120ms ease;
}

.hero-zip--inline {
  opacity: 0.7;
}
.hero-zip--inline:hover {
  opacity: 1;
}

.icon-download {
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  fill: currentColor;
}

/* ----- HINT LINE ----- */
.delivery-hero__hint {
  margin: 0.65rem 0 0;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.72);
  max-width: 60ch;
}

/* ----- MOBILE TWEAKS ----- */
@media (max-width: 700px) {
  .delivery-hero__banner {
    padding-inline: 0.9rem;
    padding-block: 1.1rem 1.25rem;
  }

  .hero-back {
    top: 0.9rem;
    left: 0.9rem;
  }
}

/* ===== DELIVERY HERO: FORCE LEFT ALIGN (OVERRIDE) ===== */
.delivery-hero .delivery-hero__banner {
  display: block !important;
  justify-content: flex-start !important; /* in case something set it to flex */
  text-align: left !important;
}

.delivery-hero .delivery-hero__meta {
  margin: 0 !important;
  width: min(1200px, 100%) !important;
  text-align: left !important;
}

.delivery-hero .delivery-hero__title,
.delivery-hero .delivery-hero__date,
.delivery-hero .delivery-hero__hint {
  text-align: left !important;
}

/* Make the whole meta a predictable vertical stack */
.delivery-hero__meta{
  display: flex;
  flex-direction: column;
  gap: 0.45rem;          /* controls spacing between date/title/zip/hint */
}

/* Let meta gap handle spacing */
.delivery-hero__subline{ margin-top: 0; }
.delivery-hero__hint{ margin-top: 0.35rem; }

.delivery-hero__date{ margin-bottom: 0.1rem; }
.delivery-hero__title{ margin-top: 0; }

.delivery-hero__banner{
  min-height: 32vh; /* adjust 28–38vh depending on how strong you want it */
  display: flex;
  align-items: flex-end; /* anchors the meta near the bottom like Kentucky */
}

.delivery-hero__subline{
  display: flex;
  align-items: center;
  justify-content: flex-start; /* no space-between vibe */
  gap: 0.8rem;
}

/* Replace the big "auto" gulf with a small controlled push */
.hero-zip{
  margin-left: 0;
}

/* DELIVERY PAGE: only the GLOBAL header overlays the hero */
.page-delivery > header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;

  background: transparent;
  border-bottom: none;
}

/* Make sure the hero header is NOT fixed */
.page-delivery .delivery-hero {
  position: relative;
  z-index: 0;
}

/* Delivery pages: header overlays hero and starts transparent */
.page-delivery > header {
  background: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.page-delivery main.delivery-page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.page-delivery > header .nav-inner {
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
/* ===== DELIVERY PAGE: KILL THE BLACK BAR SOURCE (HEADER + INNER + OFFSET) ===== */

/* 0) Apply to the GLOBAL header only (avoid your hero header) */
.page-delivery header:not(.delivery-hero) {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 2000 !important;

  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 1) If the black is coming from nav-inner / wrappers, make THEM transparent too */
.page-delivery header:not(.delivery-hero) .nav-inner,
.page-delivery header:not(.delivery-hero) nav,
.page-delivery header:not(.delivery-hero) .nav-links {
  background: transparent !important;
  background-color: transparent !important;
}

/* 2) If a pseudo-element is painting the bar, nuke it */
.page-delivery header:not(.delivery-hero)::before,
.page-delivery header:not(.delivery-hero)::after,
.page-delivery header:not(.delivery-hero) .nav-inner::before,
.page-delivery header:not(.delivery-hero) .nav-inner::after {
  background: transparent !important;
  content: none !important;
}

/* 3) Remove any "make room for sticky header" offset so hero starts at top */
.page-delivery body,
body.page-delivery {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.page-delivery main,
body.page-delivery main,
.page-delivery .delivery-page {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 4) Ensure hero is actually at the top of the viewport */
.page-delivery .delivery-hero {
  margin-top: 0 !important;
}

.delivery-hero__title-row{
  display:flex;
  align-items:flex-end;
  gap:0.9rem;
}

.hero-zip--inline{
  margin-left:0;
  width:2.6rem;
  height:2.6rem;
}

/* Anchor hero meta into the dark zone */
.delivery-hero__banner {
  display: flex;
  align-items: flex-end;
}

.delivery-hero__banner {
  min-height: 20vh; /* adjust 30–40vh to taste */
}

.delivery-hero__banner {
  min-height: clamp(18vh, 20vh, 24vh);
}

@media (max-width: 700px) {
  .delivery-hero__banner {
    min-height: 26vh;
  }
}

/* hide download buttons on mobile */ 
@media (max-width: 768px) {
  .download-tag,
  .lightbox-download {
    display: none !important;
  }
}

.mobile-download-hint {
  display: none;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6); /* adjust for your theme */
  text-align: left;
  margin: 0.75rem 0 1rem;
}

/* Show helper text only on mobile */
@media (max-width: 768px) {
  .mobile-download-hint {
    display: block;
  }
}

/* Download galleries: hide the X ONLY in fullscreen mode */
#lightbox .lightbox-inner:fullscreen .lightbox-close {
  display: none !important;
}
/* WebKit/Safari fallback */
#lightbox .lightbox-inner:-webkit-full-screen .lightbox-close {
  display: none !important;
}