/* ===============================
   Kilch Gallery - Fullscreen UI
   =============================== */

/* --------------------------------
   Fullscreen toggle button
--------------------------------- */
.kg-fs-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 2px solid rgba(17,24,39,0.25);
  background: #ffffff;
  color: #111827;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(17,24,39,0.12);
}

.kg-fs-btn:hover{
  border-color: rgba(17,24,39,0.45);
  box-shadow: 0 14px 34px rgba(17,24,39,0.18);
}

.kg-fs-btn:focus{
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

.kg-fs-btn.is-on{
  background: #111827;
  color: #fff;
  border-color: rgba(255,255,255,0.28);
}

.kg-fs-btn--small{
  padding: 10px 12px;
  font-size: 15px;
}

/* --------------------------------
   Fullscreen host
--------------------------------- */
.kg-fullscreen-host:fullscreen,
.kg-fullscreen-host:-webkit-full-screen{
  /* Ensure fullscreen background is ALWAYS the photo backdrop */
  background: none !important;
  background-image: url("/images/Kilch-Gallery-System-Photos/bg.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: scroll !important;

  /* readable dim */
  background-color: rgba(0,0,0,.14) !important;
  background-blend-mode: multiply !important;

  padding: 12px;
  overflow: auto;
}

/* Keep gallery content centered and comfortable in fullscreen */
.kg-fullscreen-host:fullscreen .kilch-gallery,
.kg-fullscreen-host:-webkit-full-screen .kilch-gallery{
  max-width: 1400px;
  margin: 0 auto;
}

/* --------------------------------
   Tip banner (details/summary)
--------------------------------- */
.kg-fs-tip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 2px solid rgba(37,99,235,0.25);
  background: #ebf3f9fc;
  color: #0f172a;
  box-shadow: 0 10px 26px rgba(15,23,42,0.10);
}

.kg-fs-tip__actions{
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.kg-fs-tip__btn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid rgba(15,23,42,0.18);
  background: #fff;
  font-weight: 900;
  cursor: pointer;
}

.kg-fs-tip__btn:hover{
  border-color: rgba(15,23,42,0.32);
}

.kg-fs-tip__summary{
  list-style: none;
  cursor: pointer;
  font-weight: 900;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 12px;
}

.kg-fs-tip__summary::-webkit-details-marker{
  display: none;
}

.kg-fs-tip__summaryText{
  font-weight: 900;
}

.kg-fs-tip__summaryHint{
  font-weight: 800;
  opacity: 0.72;
  font-size: 14px;
}

/* --------------------------------
   Fullscreen-only: hide "Don't show again"
--------------------------------- */
.kg-fullscreen-host:fullscreen details.kg-fs-tip [data-kg-fs-tip-dismiss],
.kg-fullscreen-host:-webkit-full-screen details.kg-fs-tip [data-kg-fs-tip-dismiss]{
  display: none !important;
}

/* --------------------------------
   Normal (non-fullscreen) page background
   (optional - keep your "paper" look)
--------------------------------- */
.kilchgallery-landing,
.kilch-gallery{
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: scroll;
  background-color: transparent !important;
}

/* --------------------------------
   Landing grid layout: cap cards at 350px
--------------------------------- */
#kg-container.kg-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(var(--kg-galleries-cols, 3), minmax(0, 1fr));
  justify-content: stretch;
  justify-items: stretch;
}

#kg-container.kg-grid .kg-card{
  width: 100%;
  max-width: none;
}

/* --------------------------------
   Single gallery photo grids: cap tiles at 350px
--------------------------------- */
.kilch-gallery .kg-photo-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(var(--kg-photos-cols, 4), minmax(0, 1fr));
  justify-content: stretch;
  justify-items: stretch;
}

.kilch-gallery .kg-photo-card{
  width: 100%;
  max-width: none;
}

.kg-fullscreen-host:fullscreen,
.kg-fullscreen-host:-webkit-full-screen{
  background-image: url("/images/Kilch-Gallery-System-Photos/bg.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: scroll !important;

  /* override the normal white paper wash */
  background-color: rgba(0,0,0,.14) !important;
  background-blend-mode: multiply !important;
}

.kg-fullscreen-host:fullscreen details.kg-fs-tip [data-kg-fs-tip-dismiss],
.kg-fullscreen-host:-webkit-full-screen details.kg-fs-tip [data-kg-fs-tip-dismiss]{
  display: none !important;
}

/* Fullscreen: hide the dismiss button ("Don't show again") */
.kg-fullscreen-host:fullscreen button[data-kg-fs-tip-dismiss],
.kg-fullscreen-host:-webkit-full-screen button[data-kg-fs-tip-dismiss]{
  display: none !important;
}

/* Fullscreen: force background blend + color so bg image is visible */
.kg-fullscreen-host:fullscreen,
.kg-fullscreen-host:-webkit-full-screen{
  background-color: rgba(0,0,0,.14) !important;
  background-blend-mode: multiply !important;
}

.kg-fullscreen-host:fullscreen button[data-kg-fs-tip-dismiss]{ display:none !important; }
.kg-fullscreen-host:fullscreen{ background-blend-mode:multiply !important; background-color:rgba(0,0,0,.14) !important; }

/* Fullscreen: toolbar should not paint a wash over the blueprint background */
.kg-fullscreen-host:fullscreen .kg-toolbar,
.kg-fullscreen-host:-webkit-full-screen .kg-toolbar{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Fullscreen: search input background override */
.kg-fullscreen-host:fullscreen input#kg-search,
.kg-fullscreen-host:-webkit-full-screen input#kg-search{
  background: #ebf3f9fc !important;
}
.kg-fullscreen-host:fullscreen .kilchgallery-search,
.kg-fullscreen-host:-webkit-full-screen .kilchgallery-search,
.kg-fullscreen-host:fullscreen .kg-searchwrap,
.kg-fullscreen-host:-webkit-full-screen .kg-searchwrap{
  background: transparent !important;
}

/* Fullscreen: tint the controls bar background */
.kg-fullscreen-host:fullscreen .kg-controls,
.kg-fullscreen-host:-webkit-full-screen .kg-controls{
  background: rgba(235,243,249,0.92) !important;   /* light blue tint */
  border-color: rgba(37,99,235,0.35) !important;
  box-shadow: 0 14px 38px rgba(15,23,42,0.18) !important;
}

.kilch-gallery .kg-photo-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(var(--kg-photos-cols, 4), minmax(0, 1fr));
  justify-content: stretch;
  justify-items: stretch;
  margin-top: 10px;
}

.kilch-gallery .kg-photo-card{
  width: 100%;
  max-width: none;
}