:root{
  --bg: #4f4a4a;
  --panel: #111111;
  --text: #f2f2f2;
  --muted: #b9b9b9;
  --accent: #ffd400;
  --border: #ffd400;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

.wrap{max-width:1400px;margin:0 auto;padding:18px; padding-bottom:78px}

/* Header / Nav */
.header{
  position:sticky; top:0; z-index:40;
  background:var(--nav-bg);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}

/* Header colors from theme */
.header{ color:var(--nav-text); }
.header .nav a.active{ color:#fff; }
.header .brand .tag{ color:rgba(242,242,242,.75); }
.brand{padding:14px 18px}
.brand b{color:var(--accent);letter-spacing:.4px}
.brand .tag{color:var(--nav-text);opacity:.78;font-size:12px;margin-top:3px}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding:12px 18px 14px;
}
.nav a, .nav .pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border:1px solid var(--nav-btn-border);
  border-radius:999px;
  background:var(--nav-btn-bg);
  color:var(--nav-btn-text);
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  transition:background .16s ease, border-color .16s ease, transform .08s ease;
}
.nav a.active{
  border-color:var(--nav-btn-active-border);
  background:var(--nav-btn-active-bg);
  color:var(--nav-btn-active-text);
}
.nav a.home-link, .nav a.back-link{
  border:2px solid var(--nav-home-border);
  color:var(--nav-home-text);
  background:var(--nav-home-bg);
}
.nav a.home-link:hover, .nav a.back-link:hover{background:var(--nav-home-hover-bg);color:var(--nav-home-hover-text);text-decoration:none}
.nav .lang a{border:none;background:none;padding:0;font-weight:700;opacity:.95}
.nav .lang a:hover{text-decoration:underline}

@media (max-width:720px){
  .wrap{padding:14px; padding-bottom:110px;}
  .nav{gap:8px;padding:10px 14px 12px}
  .nav a{padding:7px 10px;font-size:12px}
  .brand{padding:12px 14px}
}

/* P9: Mobile polish (iPhone-first) */
@media (max-width:480px){
  body{font-size:16px;}
  .card{padding:14px;}

  .hero{padding:22px 10px 8px;}
  .hero h1{font-size:30px;}
  .hero .sub{font-size:15px;line-height:1.45;}

  .nav a, .nav .pill{min-height:36px;}

  .page-body{font-size:16px;line-height:1.65;}
  .page-body p{margin:0 0 12px;}
  .page-body li{margin:0 0 8px;}

  .ggrid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (min-width: 768px){
  .ggrid{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; }
}
@media (min-width: 1100px){
  .ggrid{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (min-width: 1400px){
  .ggrid{ grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 380px){
  .ggrid{ grid-template-columns:1fr; }
}
  .gitem img{height:230px;}
  .gcap{font-size:13px;line-height:1.45;}

  .page-gallery{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px){
  .page-gallery{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; }
}
@media (min-width: 1100px){
  .page-gallery{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (min-width: 1400px){
  .page-gallery{ grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 380px){
  .page-gallery{ grid-template-columns:1fr; }
}
  .pg-item img{height:220px;}
  .pg-cap{font-size:13px;line-height:1.45;}
}

/* Cards / Panels */
.card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.muted{color:var(--muted)}

/* Home hero */
.hero{
  text-align:center;
  padding:36px 12px 18px;
}
.hero h1{margin:0;font-size:34px;letter-spacing:.2px}
.hero .sub{margin-top:8px;color:var(--muted);font-size:16px}

/* Home hero logo */
.hero-logos{margin:12px auto 18px;max-width:1100px;}
.hero-logos .banner{border-radius:14px;}

/* Home hero logo */
.hero-logos{margin:12px auto 18px;max-width:1100px;}
.hero-logos .banner{border-radius:14px;}

.hero-logo{display:flex;justify-content:center;align-items:center;margin:12px 0 22px 0;}
/* Home hero logo: dominant branding (never crop). */
/* IMPORTANT: force a target width so small source images still render large. */
.hero-logo img{
  display:block;
  width:min(480px, 92vw);
  max-width:100%;
  height:auto;
  object-fit:contain;
  max-height:260px;
}
@media (max-width: 900px){
  .hero-logo img{width:min(360px, 86vw);max-height:210px;}
}
@media (max-width: 480px){
  .hero-logo img{width:min(260px, 88vw);max-height:160px;}
}

/* Category grid */
.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (min-width: 768px){
  /* iPad & desktop: more columns, less empty space */
  .grid{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }
}
@media (min-width: 1100px){
  .grid{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
}
@media (min-width: 1400px){
  .grid{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 520px){
  .grid{ grid-template-columns:1fr; }
}
@media (max-width:960px){ .grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:640px){ .grid{grid-template-columns:1fr;} }

.cat{
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
}
.cat:hover{transform:translateY(-1px)}
.cat .thumb{height:180px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center}
.cat .thumb img{width:100%;height:100%;object-fit:contain;display:block}
.cat .body{padding:14px 14px 16px}
.cat .title{font-weight:900;letter-spacing:.2px}
.cat .desc{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.35}
.badge{display:inline-block;margin-top:10px;font-size:12px;opacity:.9;border:1px solid rgba(255,255,255,.14);padding:4px 8px;border-radius:999px}

/* Gallery */
.gallery-head{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:12px;flex-wrap:wrap}
.gallery-title{font-weight:900;font-size:18px}

.ggrid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (min-width:720px){ .ggrid{grid-template-columns:repeat(3, minmax(0,1fr));} }

.gitem{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
}
.gitem img{width:100%;height:190px;object-fit:contain;display:block}
.gcap{padding:10px 10px 12px;font-size:12px;color:var(--muted);line-height:1.35;word-break:break-word}

/* Pages P7: simple hero cover (no codes) */
.hero.hero-page{ padding:18px 12px 8px; }

.page-hero{
  position:relative;
  margin: 10px 0 10px;
  border:1px solid rgba(212,175,55,.38);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(0,0,0,.25);
}
.page-hero-img{
  width:100%;
  height: clamp(200px, 38vw, 420px);
  object-fit: cover;
  display:block;
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.72));
  pointer-events:none;
}
.page-hero-text{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 14px 14px 12px;
  z-index:2;
}
.page-hero-text .title{
  margin:0;
  font-size: clamp(22px, 5.2vw, 36px);
  text-shadow: 0 6px 16px rgba(0,0,0,.65);
}
.page-hero-text .sub{
  margin-top:8px;
  color: rgba(255,255,255,.86);
  font-size: 14px;
  line-height: 1.35;
  text-shadow: 0 6px 16px rgba(0,0,0,.65);
}

/* Back-compat: older markup */
.page-cover{
  margin: 10px 0 14px;
  border:1px solid rgba(212,175,55,.35);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(0,0,0,.25);
}
.page-cover img{
  width:100%;
  height: clamp(180px, 34vw, 360px);
  object-fit: cover;
  display:block;
}
.page-body img{
  max-width:100%;
  height:auto;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
}
.page-gallery{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 720px){
  .page-gallery{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pg-item{
  border-radius: 14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  display:block;
}
.pg-item img{width:100%;height:170px;object-fit:contain;display:block}
.pg-cap{margin-top:6px;font-size:12px;opacity:.85;line-height:1.35;word-break:break-word}

/* Modal */
.modal{
  position:fixed; inset:0; z-index:80;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.78);
  padding:18px;
}
.modal.open{display:flex}
.modal img{max-width:min(1100px, 94vw);max-height:82vh;border-radius:18px;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.modal .hint{margin-top:10px;color:rgba(255,255,255,.85);font-size:14px;text-align:center}



.modal .modal-count{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  background:rgba(0,0,0,.58);
  color:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.22);
  padding:7px 12px;
  border-radius:999px;
  font-size:16px;
  line-height:1;
  letter-spacing:.4px;
  user-select:none;
  pointer-events:none;
}
.modal .modal-count:empty{display:none}

.modal.loading img{filter:blur(10px); transform:scale(1.02)}
.modal.loading .hint{opacity:1}
/* Footer */
.footer{
  margin-top:26px;
  padding:18px 0 10px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

/* Footer bottom row: centered copyright + discreet admin entry on the left */
.footer-bottom{
  position:relative;
  margin-top:8px;
  padding-top:2px;
}
.footer-copy{
  text-align:center;
}
.footer-admin{
  position:absolute;
  left:0;
  top:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  font-size:14px;
  line-height:1;
  color:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  text-decoration:none;
  opacity:.75;
  -webkit-tap-highlight-color: transparent;
}
.footer-admin:hover{ opacity:1; color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.18); text-decoration:none; }

/* Footer pages: render like top-nav buttons (requested) */
.footer-pages{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin:0 0 10px;
}
.footer-page-btn{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  font-weight:800;
  font-size:13px;
  color:var(--nav-text, var(--text));
  text-decoration:none;
  opacity:.95;
}
.footer-page-btn:hover{ text-decoration:none; border-color:var(--accent); }

@media (max-width:720px){
  .footer-page-btn{ padding:7px 10px; font-size:12px; }
}

/* Modal close button (Gallery + Places) */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.92); z-index:9999; }
.modal.open{ display:flex; }
.modal img{ max-width:92vw; max-height:86vh; border-radius:12px; }
.modal .hint{ display:none !important; }
.modal-close{
  position:fixed; top:14px; right:14px;
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:30px;
  line-height:42px;
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}


@media (min-width:768px){ .card{padding:12px;} }



/* === Responsive grids for Places (iPad/desktop) === */
.grid.places-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.grid.place-images-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

/* iPad + desktop: auto-fill more columns, reduce empty space */
@media (min-width: 768px){
  .grid.places-grid{
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:14px;
  }
  .grid.place-images-grid{
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:14px;
  }
  /* let the layout breathe on larger screens */
  /*
    Generic centered container used by Places (and a few other pages).
    Previously it only had max-width, which caused left-alignment on wide screens
    (big empty space on the right). Keep it responsive and centered.
  */
  .container{
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 18px;
    padding-right: 18px;
    box-sizing: border-box;
  }
}

/* large desktop: slightly wider cards */
@media (min-width: 1200px){
  .grid.places-grid{ grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }
  .grid.place-images-grid{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
}


/* Home thumbnails: make Places + Gallery same smaller size */
.home-item img.thumb{
  width:100%;
  height:110px;
  /* Never crop thumbnails inside cards (Home + Gallery category cards).
     Use contain to preserve the full image and keep the page light.
  */
  object-fit:contain;
  object-position:center;
  display:block;
  background:rgba(0,0,0,.25);
}


/* Home category cards: show category/subcategory name above the photo (with count) */
.home-item{ position:relative; overflow:hidden; }
.home-item .caption{
  position:absolute;
  left:10px; right:10px; top:10px;
  padding:8px 10px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
}
.home-item .caption .cat{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:800;
  font-size:14px;
  line-height:1.2;
}
.home-item .caption .cat .cat-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-item .caption .cat .cat-count{ opacity:.85; }
.home-item .caption .cta{
  margin-top:4px;
  font-size:12px;
  opacity:.85;
}
@media (max-width:480px){
  .home-item img.thumb{height:120px;}
}



.home-item .thumb.placeholder{
  width:100%;
  height:110px;
  background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.08);
}


/* P14_40: Masonry layout for Gallery photos (fills vertical gaps) */
.grid.gallery{
  /* override generic .grid (CSS Grid) with a masonry-style column layout */
  display:block;
  column-count:2; /* iPhone default */
  column-gap:12px;
}
@media (min-width: 768px){
  .grid.gallery{ column-count:4; } /* iPad */
}
@media (min-width: 1280px){
  .grid.gallery{ column-count:6; } /* desktop */
}
.grid.gallery > .card.gallery-item{
  display:inline-block;
  width:100%;
  margin:0 0 12px;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
}
/* Let photos keep their natural aspect ratio (no crop) */
.card.gallery-item img.thumb{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
  display:block;
  background:rgba(0,0,0,.18);
}
/* Reduce inner padding a bit so the masonry feels tighter */
.card.gallery-item{
  padding:10px;
}



/* =========================
   PHASE 2.7 FIX (VISIBLE)
   Purpose: make changes impossible to miss.
   ========================= */

/* HOME (portal) – make category cards feel like a photo wall */
.hero h1{ letter-spacing:.5px; }
.hero{ margin-bottom:10px !important; }

/* Use a tighter, photo-first grid on home */
.grid{
  gap:6px !important;
}
/* Category cards on home */
a.card.home-item{
  height:220px;
  padding:0 !important;
  overflow:hidden;
  border-radius:18px !important;
  position:relative;
  box-shadow: 0 14px 40px rgba(0,0,0,.55) !important;
}
a.card.home-item img.thumb{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}
a.card.home-item .caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:12px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
}
a.card.home-item .caption .cat{
  font-size:1.05rem !important;
  font-weight:800 !important;
}
a.card.home-item .caption .name,
a.card.home-item .caption .desc{ display:none !important; }

/* GALLERY – CINEMA MODE: tighter gaps, darker panels, remove heavy card look */
body{ background: var(--bg) !important; }
.card.gallery-item{
  background:transparent !important;
  box-shadow:none !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:14px !important;
  overflow:hidden;
}
.card.gallery-item img.thumb{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}
/* Make photo wall tighter on gallery pages too */
.grid{
  gap:8px !important;
}

/* Modal: force pure black background */
.modal, .lightbox, .viewer, .overlay{
  background:#000 !important;
}





/* =========================
   PHASE 2.9 VISIBLE (HOME A+B + GALLERY CINEMA)
   This is intentionally obvious.
   ========================= */

/* HOME: make portal cards photo-first */
.home .grid, .home-portal, .portal-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap:10px !important;
}

/* If home uses link cards */
a.card.home-item, a.card.portal-card, .portal-card, .home-card{
  position:relative !important;
  height:240px !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:18px !important;
  border:1px solid rgba(212,175,55,.35) !important; /* gold */
  box-shadow: 0 16px 44px rgba(0,0,0,.55) !important;
  background:#000 !important;
}

a.card.home-item img, a.card.home-item img.thumb,
a.card.portal-card img, .portal-card img, .home-card img,
a.card.home-item picture img, a.card.portal-card picture img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  transform:scale(1.03);
}

a.card.home-item::after, a.card.portal-card::after, .portal-card::after, .home-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.90), rgba(0,0,0,0));
}

/* Place title on image */
a.card.home-item .caption, a.card.portal-card .caption, .portal-card .caption, .home-card .caption{
  position:absolute !important;
  left:0; right:0; bottom:0;
  padding:12px 14px !important;
  z-index:2;
}

a.card.home-item .caption .cat, a.card.portal-card .caption .cat, .portal-card .caption .cat, .home-card .caption .cat{
  font-size:1.05rem !important;
  font-weight:900 !important;
  letter-spacing:.2px !important;
  color:#fff !important;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}

/* Hide secondary texts if present */
a.card.home-item .caption .desc, a.card.home-item .caption .name,
a.card.portal-card .caption .desc, a.card.portal-card .caption .name,
.portal-card .caption .desc, .portal-card .caption .name,
.home-card .caption .desc, .home-card .caption .name {
  display:none !important;
}

/* Subtle hover/touch */
a.card.home-item:active, a.card.portal-card:active, .portal-card:active, .home-card:active{
  transform:scale(.985);
}

/* GALLERY: cinema wall (tighter gaps, darker cards) */
body{ background: var(--bg) !important; }

.gallery .grid, .gallery-grid, .grid.gallery-grid, .photos-grid{
  gap:6px !important;
}

.card.gallery-item, a.card.gallery-item{
  background:rgba(255,255,255,.02) !important;
  box-shadow:none !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

.card.gallery-item img, .card.gallery-item img.thumb,
a.card.gallery-item img, a.card.gallery-item img.thumb{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Modal: force pure black */
.modal, .lightbox, .viewer, .overlay{
  background:#000 !important;
}


/* =========================
   HOME PHOTO-FIRST (premium portfolio)
   ========================= */

.home-photofirst .home-top{ margin: 18px 0 14px; }
.home-photofirst .home-title{ margin:0; font-size: 42px; letter-spacing:.5px; }
.home-photofirst .home-sub{ margin:8px 0 0; opacity:.85; }

.home-photofirst .chips{
  margin-top:14px;
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:6px;
  -webkit-overflow-scrolling: touch;
}
.home-photofirst .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.35);
  background: rgba(255,255,255,.03);
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  font-weight:800;
  letter-spacing:.2px;
  font-size:13px;
}
.home-photofirst .chip.on{
  background: rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.8);
}
.home-photofirst .chip.clear{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.02);
  opacity:.9;
}
.home-photofirst .chip-count{ opacity:.75; font-weight:900; }

/* Masonry feed (responsive columns)
   - iPhone: 2 columns
   - iPad: 4 columns
   - Desktop: 6 columns
*/
.home-photofirst .masonry{
  margin-top:16px;
  column-gap:12px;
  column-count: 2; /* mobile default */
}
@media (min-width: 768px){
  .home-photofirst .masonry{ column-count: 4; }
}
@media (min-width: 1280px){
  .home-photofirst .masonry{ column-count: 6; }
}
@media (max-width: 620px){
  .home-photofirst .home-title{ font-size: 34px; }
  .home-photofirst .masonry{ column-gap:10px; }
}
.home-photofirst .masonry{ column-count: 2; column-gap:10px; }
}

.home-photofirst .brick{
  display:inline-block;
  width:100%;
  margin:0 0 12px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  position:relative;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:#0a0a0a;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  text-decoration:none;
}
.home-photofirst .brick img{
  width:100%;
  height:auto;
  display:block;
  background:#0f0f0f;
}
.home-photofirst .brick::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0) 45%);
  opacity:.85;
  pointer-events:none;
}
.home-photofirst .brick-meta{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.home-photofirst .brick-cat{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(212,175,55,.35);
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
  color:#fff;
}

.home-photofirst .brick:active{ transform: scale(.99); }

.home-photofirst .home-note{
  margin:14px 0 4px;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  opacity:.85;
}
.home-photofirst .build-tag{
  font-size:12px;
  padding:4px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.home-photofirst .hint-mini{ font-size:12px; }

/* =========================
   COLS 6/4/2 FIX (2026-01)
   - Prevent overlap/embolado
   - Force expected column counts:
     desktop=6, iPad=4, iPhone=2
   - Keep subcategory bar visible
   ========================= */

/* SUBCATEGORIES: never hide */
.subcat-title{ display:block !important; }
.subcatbar{ display:flex !important; flex-wrap:wrap; gap:8px; }

/* HOME feed masonry (Photo-First) */
.masonry{
  column-count:2 !important; /* iPhone */
  column-gap:10px !important;
}
@media (min-width: 768px){
  .masonry{ column-count:4 !important; } /* iPad */
}
@media (min-width: 1200px){
  .masonry{ column-count:6 !important; } /* desktop */
}
.masonry .brick{
  display:inline-block !important;
  width:100% !important;
  margin:0 0 10px !important;
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
}
.masonry .brick img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  object-fit:cover !important;
}

/* GALLERY photo wall */
.grid.gallery{
  display:block !important;
  column-count:2 !important; /* iPhone */
  column-gap:10px !important;
}
@media (min-width: 768px){
  .grid.gallery{ column-count:4 !important; } /* iPad */
}
@media (min-width: 1200px){
  .grid.gallery{ column-count:6 !important; } /* desktop */
}
.grid.gallery > a.card.gallery-item,
.grid.gallery > .card.gallery-item{
  display:inline-block !important;
  width:100% !important;
  margin:0 0 10px !important;
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  padding:0 !important;
  background:transparent !important;
}
.grid.gallery > a.card.gallery-item img.thumb,
.grid.gallery > .card.gallery-item img.thumb{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:cover !important;
  display:block !important;
}


/* =========================
   PHASE 3.2 – HOME NO BLACK GAP (TRUE DENSE GRID)
   Reason: CSS columns "masonry" creates empty bottom space when one photo is very tall.
   Fix: switch HOME feed to CSS Grid dense layout (still 6/4/2 columns) with controlled tile heights.
   ========================= */

.home-photofirst .masonry{
  /* override column-masonry */
  column-count: unset !important;
  column-gap: unset !important;

  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* iPhone */
  gap:10px !important;
  grid-auto-rows: 140px;              /* base tile height */
  grid-auto-flow: dense;              /* fill gaps */
  margin-top:16px !important;
}

@media (min-width: 768px){
  .home-photofirst .masonry{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* iPad */
    grid-auto-rows: 150px;
  }
}
@media (min-width: 1200px){
  .home-photofirst .masonry{
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important; /* desktop */
    grid-auto-rows: 160px;
  }
}

.home-photofirst .brick{
  /* grid item */
  break-inside: unset !important;
  -webkit-column-break-inside: unset !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  position:relative !important;
}

/* Make images cover the tile (no weird tall bricks) */
.home-photofirst .brick img{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  display:block !important;
  background:#111;
}

/* Add a premium variety pattern WITHOUT creating black gaps */
.home-photofirst .brick:nth-child(7n+1){
  grid-row: span 2;
}
.home-photofirst .brick:nth-child(11n+3){
  grid-column: span 2;
}
@media (max-width: 620px){
  /* On small phones keep it simple */
  .home-photofirst .brick:nth-child(11n+3){
    grid-column: span 1;
  }
}

/* Keep category pill readable */
.home-photofirst .brick-meta{
  position:absolute !important;
  left:0; right:0; bottom:0;
  padding:10px 10px 12px !important;
  display:flex !important;
  justify-content:flex-start;
  align-items:flex-end;
}


/* ===== Dynamic overrides from Settings ===== */
.home-photofirst .masonry{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 768px){
  .home-photofirst .masonry{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
.ggrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px){
  .ggrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Image fit (public cards) */
.home-photofirst img,
.gitem img,
.card img,
.pg-item img{ object-fit: cover; }

/* =========================================
   Layout (Settings) — apply cols + limits
   - Home photo-first masonry uses CSS columns
   - Gallery category page uses CSS columns (.grid.gallery)
   ========================================= */

@media (max-width: 767px){
  .home-photofirst .masonry{ column-count: 2; }
  .grid.gallery{ column-count: 2; }

  /* limits */
  .home-photofirst .masonry > .brick:nth-child(n+9){ display:none !important; }
  .grid.gallery > a.gallery-item:nth-child(n+31){ display:none !important; }
}

@media (min-width: 768px){
  .home-photofirst .masonry{ column-count: 4; }
  .grid.gallery{ column-count: 4; }

  /* limits */
  .home-photofirst .masonry > .brick:nth-child(n+13){ display:none !important; }
  .grid.gallery > a.gallery-item:nth-child(n+49){ display:none !important; }
}


/* =========================================
   Layout override (force) — Gallery columns must win
   ========================================= */
@media (max-width: 767px){
  .grid.gallery{
    display:block !important;
    column-count: 2 !important;
    column-gap:12px !important;
  }
}
@media (min-width: 768px){
  .grid.gallery{
    display:block !important;
    column-count: 4 !important;
    column-gap:12px !important;
  }
}

/* Modal counter: overlay (no layout space), always visible */
#imgModal{position:fixed;}
#imgModalCount{display:block!important;position:absolute!important;top:10px;left:50%;transform:translateX(-50%);z-index:9999;pointer-events:none;margin:0!important;padding:7px 12px!important;line-height:1!important;border-radius:999px;font-size:16px;font-weight:700;}
@media (max-width:480px){#imgModalCount{top:8px;font-size:14px;padding:6px 10px!important;}}


/* Modal arrows (PC only) */
#imgModalArrowLeft, #imgModalArrowRight{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  z-index: 10010;
}
#imgModalArrowLeft{ left: 14px; }
#imgModalArrowRight{ right: 14px; }
@media (hover:none){
  #imgModalArrowLeft, #imgModalArrowRight{ display:none; }
}



/* =========================
   Banner CTA button overlay
   ========================= */

/* Ensure the banner image wrapper is the positioning context */
.banner-media, .banner-image, .cat-cover, .cat-thumb {
  position: relative;
}

/* The inner wrapper is the *actual* positioning context for the CTA.
   This keeps the View button attached to the banner media even when the
   banner box is wider than the image (no more button "floating" on the side). */
.banner-media-inner{
  position: relative;
  width: 100%;
  /* Let the banner's height be driven by the media itself.
     This avoids huge empty vertical space when the banner image is small/square,
     especially on mobile. */
  height: auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Wrap the actual rendered media so the CTA anchors to the visible image box
   (instead of the full banner container). */
.banner-media-fit{
  position:relative;
  display:inline-block;
  max-width:100%;
  max-height:42vh;
}

/* Ensure banner images fill the banner box so the CTA aligns to the image edge
   (prevents CTA floating in the empty right area on iPad/desktop when the image is narrower). */
/* Images and HTML inside the inner wrapper should fill the banner box
   (still no-crop thanks to object-fit:contain). */
.banner-media-inner > img.banner-img,
.banner-media-fit > img.banner-img{
  display:block;
  max-width:100%;
  max-height:42vh;
  width:auto;
  height:auto;
  object-fit: contain;
}

.banner-media-inner > .banner-html{
  width:100%;
  height:100%;
}

/* Make the whole banner clickable but keep the CTA above it */
.banner-link-fill{
  position:absolute;
  inset:0;
  z-index:1;
}

.banner-media-inner{ z-index:2; }

/* =========================
   Banner height cap (Option A)
   No crop: keep object-fit: contain
   ========================= */

/* =========================
   Ads slot (banners)
   Goals:
   - "Smart" max banners per row by viewport
   - First banner auto-featured
   - Wide/hero banners forced full-row
   - Keep NO-CROP (object-fit: contain)
   ========================= */

.ads-slot{
  margin: 18px 0 22px;
  text-align: center;
}
.ads-slot-head{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.32);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 auto 10px;
}

/* Home banners container */
.home-banners{
  --bGap: 12px;
  --bCols: 3; /* desktop default */
  display:flex;
  flex-wrap:wrap;
  gap: var(--bGap);
  justify-content:center;
  align-items:flex-start;
}
@media (max-width: 980px){
  .home-banners{ --bCols: 2; }
}
@media (max-width: 600px){
  .home-banners{ --bCols: 1; --bGap: 10px; }
}

/* Smart limit per row: cap "normal" banners to N columns (1/2/3)
   while still allowing natural widths. */
.home-banners > .banner-item{
  flex: 1 1 calc((100% - (var(--bCols) - 1) * var(--bGap)) / var(--bCols));
  max-width: calc((100% - (var(--bCols) - 1) * var(--bGap)) / var(--bCols));
}

/* Featured (first) banner gets highlight and full-row by default */
.home-banners > .banner-item.is-featured{
  flex-basis: 100%;
  max-width: 100%;
}

/* Wide banners take the full row, small ones wrap to the next line */
.home-banners > .banner-item.is-wide{
  flex-basis: 100%;
  max-width: 100%;
}

.home-banners .banner{ width: 100%; max-width: 100%; }

/* If a banner image is 'large/wide', let it span the full row (flex layout) */
.home-banners .banner.banner--wide{ width: 100%; }

/* Subtle featured styling */
.home-banners .banner.banner--featured{
  border: 1px solid rgba(255,215,0,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

/* Desktop/tablet default: 42vh = 42% of the viewport height */
.banner-media{
  /* IMPORTANT: do NOT force a fixed height.
     Fixed heights create huge empty vertical space for square/small banners.
     We only cap the maximum height. */
  height: auto;
  max-height: 42vh;
  overflow: hidden; /* keep layout stable */
}

/* (moved to .banner-media-inner > img.banner-img) */

@media (max-width: 600px){
  .banner-media{
    height: auto;
    max-height: 42vh;
  }
}

@media (max-width: 767px){
  /* Slightly smaller on phones so the home doesn't look "taken over" */
  .banner-media{ height: auto; max-height: 42vh; }
}

/* Reserve room for caption below (layout stable) */
.banner{ --capH:84px; }
.banner-cap{ min-height: var(--capH); }

/* CTA button sits ON TOP of the image (bottom-right) */
.banner-cta{
  position:absolute;
  right:12px;
  left:auto;
  bottom: 12px;
  top:auto;
  z-index:6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.55);
  color:#fff;
  font-weight:800;
  text-decoration:none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.banner-cta:active{ transform: translateY(1px); }

/* If the banner card has a caption below, keep CTA inside the image area */
.banner-main{ position:relative; display:block; }

@media (min-width: 768px){
  .banner{ --capH:72px; }
  .banner-cta{ right:14px; left:auto; bottom: 14px; padding:10px 16px; }
}