/* Gallery (v20) — cards + modal viewer */
.gal3{ padding-top: 10px; }

.gal3-hero-surface{ overflow:hidden; }
.gal3-hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items: stretch;
}

.gal3-hero-left{ padding: 10px 8px 6px; }

.gal3-kicker{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 12px;
}

.gal3-kicker-label{
  font-family: "Unbounded", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #007ccf;
}

.gal3-dot{
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #007ccf;
  box-shadow: 0 0 0 6px rgba(0,124,207,.12);
}

.gal3-title{
  font-family: "Unbounded", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  line-height: 1.06;
}

.gal3-lead{ margin: 0; max-width: 68ch; opacity: .92; }

.gal3-hero-right{
  border-radius: 18px;
  border: 1px solid rgba(0,124,207,.16);
  background:
    radial-gradient(700px 380px at 20% 25%, rgba(0,124,207,.22), rgba(0,124,207,0) 60%),
    radial-gradient(600px 320px at 85% 80%, rgba(0,124,207,.16), rgba(0,124,207,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    url('../img/gallery/kolonshchyna-2025-zahalnyi__thumb.webp');
  background-size: cover;
  background-position: center;
  min-height: 220px;
  position: relative;
  overflow:hidden;
}

.gal3-hero-right:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.12));
  pointer-events:none;
}

.gal3-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.gal3-head h2{
  font-family: "Unbounded", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
}

.gal3-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.gal3-card{
  width: 100%;
  text-align: left;
  padding: 0;
  border: 1px solid rgba(0,124,207,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  cursor: pointer;
  overflow: hidden; overflow-x: hidden; overflow-y: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.gal3-card:hover{ transform: translateY(-2px); border-color: rgba(0,124,207,.28); background: rgba(0,124,207,.03); }

.gal3-img{
  position: relative;
  aspect-ratio: 16/10;
  background: rgba(0,0,0,.10);
  overflow: hidden; overflow-x: hidden; overflow-y: hidden;
}
.gal3-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.gal3-body{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
}

.gal3-meta h3{
  font-family: "Unbounded", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.gal3-meta p{ margin: 0; opacity: .86; }

.gal3-open{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,124,207,.22);
  background: rgba(0,124,207,.10);
  color: #eaf6ff;
  font-weight: 800;
  white-space: nowrap;
}

/* MODAL */
.gal3-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  background: transparent;
  /* без подложки: модалка не перекрывает страницу */
  pointer-events: none;
}

.gal3-modal.is-open{ display:block; }

/* backdrop intentionally removed */

.gal3-dialog{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1600px, calc(100vw - 12px));
  max-height: 97vh;
  border-radius: 20px;
  border: 1px solid rgba(0,124,207,.18);
  background: rgba(12,16,18,.92);
  box-shadow: 0 30px 90px rgba(0,0,0,.60);
  overflow: hidden; overflow-x: hidden; overflow-y: hidden;
  display:flex;
  flex-direction: column;
  pointer-events: auto;
}

.gal3-topbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.gal3-modal-title{
  font-family: "Unbounded", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.gal3-close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,124,207,.18);
  background: rgba(0,124,207,.10);
  color: #eaf6ff;
  font-size: 18px;
  cursor: pointer;
}

.gal3-view{
  position: relative;
  display:flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  flex: 1;
  min-height: 0;
}

.gal3-stage{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.16);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden; overflow-x: hidden; overflow-y: hidden;
  
}

.gal3-stage img{
  max-width: auto;
  max-height: auto;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  will-change: transform;
}

.gal3-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,124,207,.20);
  background: rgba(0,124,207,.12);
  color: #eaf6ff;
  font-size: 26px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gal3-nav.prev{ left: 16px; }
.gal3-nav.next{ right: 16px; }

.gal3-thumbs{
  display:flex;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  overflow-x: auto;
}

/* Responsive (mobile) */
@media (max-width: 980px){
  .gal3-hero-grid{ grid-template-columns: 1fr; }
  .gal3-hero-right{ min-height: 190px; }

  .gal3-head{ flex-direction: column; align-items: flex-start; }

  .gal3-grid{ grid-template-columns: 1fr; }
  .gal3-body{ padding: 6px; }
  .gal3-open{ max-width: none; }

  .gal3-dialog{ width: min(1040px, calc(100vw - 18px)); max-height: calc(100vh - 18px); }
  .gal3-view{ padding: 0; }
  .gal3-stage{  }
  .gal3-nav{ width: 42px; height: 42px; border-radius: 14px; }
  .gal3-nav.prev{ left: 10px; }
  .gal3-nav.next{ right: 10px; }

  /* On touch screens it is easier to swipe/scroll the stage — hide arrows */
  .gal3-nav{ display:none; }
  .gal3-stage{  }
}

@media (max-width: 520px){
  .gal3-hero-left{ padding: 8px 0 4px; }
  .gal3-kicker{ flex-wrap: wrap; row-gap: 8px; }

  .gal3-grid{ gap: 12px; }

  /* Mobile cards (≈300–520px):
     On narrow screens (300–400px) the image preview could look like a small
     square because the layout compresses. We enforce a clear preview height
     and let the image fully cover the media area. */
  .gal3-img{
    aspect-ratio: 16/10;
    height: auto;
  }
  .gal3-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
  }

  .gal3-nav{ width: 40px; height: 40px; font-size: 24px; }
  .gal3-close{ width: 38px; height: 38px; }
  .gal3-stage{ border-radius: 14px; }
  .gal3-thumbs{ padding: 10px 12px 12px; }

  .gal3-thumb img{ object-fit: contain; }

/* Keep layout stable on 518px and below */
  .gal3-grid{ grid-template-columns: 1fr !important; }
  .gal3-card{ width: 100%; }
}

/* <=500px: harden card layout (some devices start wrapping/compacting the media block) */
@media (max-width: 500px){
  .gal3-grid{ grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Make the button behave like a real block card (prevents inline-button quirks) */
  .gal3-card{ display: flex; flex-direction: column; width: 100%; max-width: auto; }

  /* Ensure the preview always has a stable height on very small widths */
  .gal3-img{ aspect-ratio: auto; height: clamp(160px, 55vw, 240px); }
  .gal3-img img{ width: 100%; height: 100%; object-fit: cover; }

  .gal3-body{ padding: 14px 14px 16px; }
  .gal3-open{ width: 100%; max-width: none; }
}


.gal3-thumb{
  flex: 0 0 auto;
  width: 120px;
  height: 76px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  overflow: hidden; overflow-x: hidden; overflow-y: hidden;
  cursor: pointer;
  opacity: .78;
}
.gal3-thumb.is-active{ opacity: 1; border-color: rgba(0,124,207,.32); }

.gal3-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }


/* FIX: text size steps for 300 / 400 / 500px to prevent image squeeze */

/* ≤300px */
@media (max-width: 300px){
  .gal3-body h3{ font-size: 13px !important; line-height: 1.2 !important; }
  .gal3-body p{ font-size: 11px !important; line-height: 1.25 !important; }
  .gal3-open{ font-size: 11px !important; padding: 5px 9px !important; }
}

/* 301–400px */
@media (min-width: 301px) and (max-width: 400px){
  .gal3-body h3{ font-size: 14px !important; line-height: 1.25 !important; }
  .gal3-body p{ font-size: 12px !important; line-height: 1.3 !important; }
  .gal3-open{ font-size: 12px !important; padding: 6px 10px !important; }
}

/* 401–500px */
@media (min-width: 401px) and (max-width: 500px){
  .gal3-body h3{ font-size: 15px !important; line-height: 1.3 !important; }
  .gal3-body p{ font-size: 13px !important; line-height: 1.4 !important; }
  .gal3-open{ font-size: 13px !important; padding: 7px 12px !important; }
}


/* FIX: safety layout for small tablets/large phones */
@media (max-width: 600px){
  .gal3-grid{ grid-template-columns: 1fr; }
}

/* PC modal landscape fix: no scroll, fit to viewport */
.gal3-stage{height:auto;}
.gal3-stage img{
  max-width: auto;
  max-height: auto;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  will-change: transform;
}

/* === FIX (PC): ONLY viewer image positioning (no card design changes) === */
.gal3-dialog{ overflow: hidden; }
.gal3-topbar{ flex: 0 0 auto; }
.gal3-thumbs{ flex: 0 0 auto; }

\.gal3-view{
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gal3-stage{
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
}

.gal3-stage img{
  max-width: auto;
  max-height: auto;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  will-change: transform;
}



/* === FIX (PC): hide navigation arrows in modal === */
.gal3-nav{ display:none !important; }

/* === FIX (PC): hard-center viewer (prevent image drifting down) === */
.gal3-dialog{
  height: calc(100vh - 26px);
}

.gal3-view{
  align-items: center;
  justify-content: center;
}

.gal3-stage{
  align-items: center;
  justify-content: center;
}


.gal3-stage img{
  max-width: auto;
  max-height: auto;
}


/* Gallery (modal) — bigger open image (override) */
.gal3-view{ padding: 6px !important; }
.gal3-stage{ width: 100% !important; height: 100% !important; }
.gal3-stage img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}


/* Override: remove 100% limits, use auto everywhere */
.gal3-stage img{
  max-width: auto !important;
  max-height: auto !important;
  width: auto !important;
  height: auto !important;
}


/* Fix hero title overflow */
.hero-title-small{font-size:20px;line-height:1.2;max-width:100%;white-space:normal;overflow-wrap:anywhere;}