/* ============ MIY GALLERY PAGE — SCOPED STYLES ============
   Ported from gallery_full.html. Everything is scoped under .miy-gallery-page
   so it never leaks into the rest of the theme. Loaded only on /gallery/.
   ============================================================ */
.miy-gallery-page, .miy-gallery-page *, .miy-gallery-page *::before, .miy-gallery-page *::after { box-sizing: border-box; }
.miy-gallery-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1c3d4f;
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
.miy-gallery-page img { max-width: 100%; height: auto; display: block; }
.miy-gallery-page a { color: inherit; text-decoration: none; }
.miy-gallery-page .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* Buttons */
.miy-gallery-page .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 16px 28px; border-radius: 6px;
  font-weight: 700; font-size: 17px; letter-spacing: 0.2px;
  transition: all 0.2s ease; border: 2px solid transparent; text-align: center; cursor: pointer;
}
.miy-gallery-page .btn-primary { background: #f16a4d; color: #fff; }
.miy-gallery-page .btn-primary:hover { background: #e35434; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(241,106,77,0.25); }

/* ============ 1. HERO ============ */
.galp-hero { position: relative; background: linear-gradient(135deg, #1c3d4f 0%, #2a5266 100%); padding: 100px 0; color: #fff; overflow: hidden; }
.galp-hero::before { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(241,106,77,0.18) 0%, rgba(241,106,77,0) 70%); top: -120px; left: -120px; pointer-events: none; }
.galp-hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.galp-hero .eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: #fff; background: #f16a4d; padding: 8px 18px; border-radius: 100px; margin-bottom: 22px; }
.galp-hero h1 { font-weight: 800; font-size: clamp(38px, 5.4vw, 60px); line-height: 1.04; margin: 0 0 20px; color: #fff; letter-spacing: -1px; }
.galp-hero h1 .accent { font-style: italic; font-weight: 800; color: #f16a4d; }
.galp-hero p.lead { font-size: clamp(17px, 1.6vw, 19px); max-width: 540px; margin: 0 0 30px; color: rgba(255,255,255,0.88); line-height: 1.55; }
.galp-hero .hero-stats { display: flex; gap: 36px; flex-wrap: wrap; }
.galp-hero .hero-stat .num { font-weight: 800; font-size: 24px; color: #fff; letter-spacing: -0.4px; line-height: 1; }
.galp-hero .hero-stat .lbl { font-size: 12px; color: rgba(255,255,255,0.65); letter-spacing: 0.6px; margin-top: 6px; font-weight: 600; }
.galp-hero .image-collage { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 460px; }
.galp-hero .image-collage > div { position: relative; border-radius: 16px; overflow: hidden; }
.galp-hero .image-collage img { width: 100%; height: 100%; object-fit: cover; }
.galp-hero .image-collage > div:nth-child(1) { grid-row: 1 / 3; box-shadow: 0 24px 50px rgba(0,0,0,0.35); }
.galp-hero .image-collage > div:nth-child(2) { box-shadow: 0 14px 30px rgba(0,0,0,0.28); }
.galp-hero .image-collage > div:nth-child(3) { box-shadow: 0 14px 30px rgba(0,0,0,0.28); }
.galp-hero .image-collage .floating-badge { position: absolute; bottom: 18px; left: 18px; background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #1c3d4f; padding: 10px 14px; border-radius: 10px; font-weight: 700; font-size: 13px; box-shadow: 0 6px 16px rgba(0,0,0,0.18); }

/* ============ 2. FILTER BAR ============ */
.galp-filter-bar { background: #fff; border-bottom: 1px solid rgba(28,61,79,0.08); padding: 20px 0; position: sticky; top: 0; z-index: 10; }
.galp-filter-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.galp-filter-pill { font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: 100px; background: #faf8f4; color: #1c3d4f; border: 2px solid transparent; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; }
.galp-filter-pill:hover { background: #fff1ec; color: #f16a4d; }
.galp-filter-pill.active { background: #f16a4d; color: #fff; box-shadow: 0 6px 14px rgba(241,106,77,0.22); }
.galp-filter-pill .count { font-size: 12px; font-weight: 700; background: rgba(28,61,79,0.1); padding: 2px 8px; border-radius: 100px; }
.galp-filter-pill.active .count { background: rgba(255,255,255,0.22); color: #fff; }

/* ============ 3. GALLERY GRID ============ */
.galp-gallery-section { padding: 60px 0 90px; background: #faf8f4; }
/* grid-auto-flow: dense backfills the holes left by wide/tall span tiles. */
.galp-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 14px; }
.galp-grid > a { display: block; position: relative; border-radius: 12px; overflow: hidden; background: #ddd; aspect-ratio: 1/1; cursor: zoom-in; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.galp-grid > a.hide { display: none; }
.galp-grid > a:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(28,61,79,0.18); }
.galp-grid > a img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.galp-grid > a:hover img { transform: scale(1.06); }
.galp-grid > a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(28,61,79,0.65) 100%); opacity: 0; transition: opacity 0.3s ease; }
.galp-grid > a:hover::after { opacity: 1; }
.galp-grid > a .gal-cat { position: absolute; bottom: 14px; left: 14px; z-index: 2; font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; }
.galp-grid > a:hover .gal-cat { opacity: 1; transform: translateY(0); }
.galp-grid > a.wide { grid-column: span 2; aspect-ratio: 2/1; }
.galp-grid > a.tall { grid-row: span 2; aspect-ratio: 1/2; }
.galp-empty { text-align: center; padding: 80px 24px; color: #4a6271; font-size: 17px; display: none; }
.galp-empty.show { display: block; }

/* ============ 4. BOTTOM CTA ============ */
.galp-cta { padding: 90px 0; background: linear-gradient(135deg, #1c3d4f 0%, #2a5266 100%); color: #fff; text-align: center; position: relative; overflow: hidden; }
.galp-cta::before { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(241,106,77,0.18) 0%, rgba(241,106,77,0) 70%); bottom: -160px; right: -160px; pointer-events: none; }
.galp-cta-inner { position: relative; z-index: 1; }
.galp-cta h2 { font-weight: 800; font-size: clamp(28px, 4vw, 42px); margin: 0 0 12px; color: #fff; letter-spacing: -0.5px; line-height: 1.1; }
.galp-cta h2 .accent { font-style: italic; font-weight: 800; color: #f16a4d; }
.galp-cta p { font-size: 18px; opacity: 0.85; margin: 0 0 36px; }
.galp-cta .duo { display: grid; grid-template-columns: 1fr 1fr; max-width: 720px; margin: 0 auto; gap: 16px; }
.galp-cta .duo a { background: #fff; color: #1c3d4f; padding: 28px 24px; border-radius: 12px; font-weight: 700; font-size: 17px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: all 0.2s ease; }
.galp-cta .duo a:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,0.25); }
.galp-cta .duo a.install-cta { background: #f16a4d; color: #fff; }
.galp-cta .duo .big { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; }
.galp-cta .duo .small { font-size: 13.5px; font-weight: 500; opacity: 0.85; letter-spacing: 0.3px; }

/* ============ LIGHTBOX BRAND OVERRIDES ============ */
.glightbox-clean .gslide-title { font-weight: 700; font-size: 18px; color: #fff; }
.glightbox-clean .gslide-desc { color: #fff; opacity: 0.85; }
.glightbox-clean .gdesc-inner { background: rgba(28,61,79,0.85); padding: 14px 18px; border-radius: 6px; }
.glightbox-clean .gnext, .glightbox-clean .gprev, .glightbox-clean .gclose { background-color: rgba(241,106,77,0.92); border-radius: 50%; }
.glightbox-clean .gnext:hover, .glightbox-clean .gprev:hover, .glightbox-clean .gclose:hover { background-color: #f16a4d; }
.glightbox-container .gslider { background-color: rgba(28,61,79,0.96); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) { .miy-gallery-page .galp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) {
  .miy-gallery-page .galp-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .miy-gallery-page .galp-hero .image-collage { height: 380px; max-width: 600px; margin: 0 auto; width: 100%; }
}
@media (max-width: 720px) {
  .miy-gallery-page .galp-hero { padding: 60px 0; }
  .miy-gallery-page .galp-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .miy-gallery-page .galp-grid > a.wide { grid-column: span 2; aspect-ratio: 2/1; }
  .miy-gallery-page .galp-grid > a.tall { grid-row: span 1; aspect-ratio: 1/1; }
  .miy-gallery-page .galp-gallery-section { padding: 40px 0 60px; }
  .miy-gallery-page .galp-cta { padding: 60px 0; }
  .miy-gallery-page .galp-cta .duo { grid-template-columns: 1fr; }
  .miy-gallery-page .galp-filter-bar { padding: 14px 0; }
  .miy-gallery-page .galp-filter-pill { padding: 8px 14px; font-size: 13px; }
  .miy-gallery-page .galp-filter-pill .count { display: none; }
}
@media (max-width: 520px) { .miy-gallery-page .btn { width: 100%; } }