/* TamilPSD: home "Browse by category" group cards (see js/browse-cats.js, data/browse-groups.json). */

/* FLAG: the legacy "All categories" pill section (.top-cats-section) is HIDDEN, not deleted.
   To show it again add  data-all-cats="on"  to the <html> tag in index.html (or delete this rule). */
html:not([data-all-cats="on"]) .top-cats-section{display:none!important}

/* FLAG: the separate home sections that duplicate the group cards are HIDDEN, not deleted:
   #photo-album (Photo Album tiles = Studio PSD card) and #cdr (CDR section added by the 3axis branch = CDR Files card).
   To show them again add  data-dup-sections="on"  to the <html> tag in index.html (or delete this rule). */
html:not([data-dup-sections="on"]) section#photo-album,
html:not([data-dup-sections="on"]) section#cdr{display:none!important}

#browse-cats{scroll-margin-top:90px}
.bc-root{min-height:420px}
.bc-fallback{display:flex;flex-wrap:wrap;gap:10px}
.bc-fallback a{padding:8px 14px;border:1px solid var(--b1);border-radius:999px;color:var(--t1);font-weight:700;font-size:14px}

.bc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.bc-card{--ac:#e8b65a;--ac2:#f6d58e;--acg:rgba(232,182,90,.30);
  position:relative;border-radius:22px;padding:16px;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)) ,var(--bg1,#13100c);
  border:1.5px solid color-mix(in srgb,var(--ac) 55%,transparent);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 26px -6px var(--acg),inset 0 0 30px -18px var(--acg);
  transition:box-shadow .4s ease,transform .4s ease,border-color .3s}
.bc-card:hover,.bc-card.is-open{box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 40px -4px var(--acg),inset 0 0 36px -16px var(--acg);border-color:var(--ac)}
.bc-gold{--ac:#e8b65a;--ac2:#f6d58e;--acg:rgba(232,182,90,.38)}
.bc-purple{--ac:#a77bff;--ac2:#cdb4ff;--acg:rgba(160,110,255,.40)}
.bc-green{--ac:#3fd28a;--ac2:#9df0c4;--acg:rgba(50,200,130,.36)}

.bc-head{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;border-radius:16px}
.bc-head:focus-visible{outline:2px solid var(--ac);outline-offset:4px}
.bc-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.bc-icon{flex:none;width:46px;height:46px;color:var(--ac);filter:drop-shadow(0 0 8px var(--acg))}
.bc-icon svg{width:100%;height:100%;display:block}
.bc-titles{flex:1;min-width:0}
.bc-title{display:block;font:700 21px/1.15 var(--pm-disp,'Fraunces',serif);color:var(--ac2);letter-spacing:-.01em}
.bc-tag{display:block;margin-top:3px;font-size:13px;color:var(--t2,#a99c88);font-weight:500}
.bc-chev{flex:none;width:26px;height:26px;color:var(--ac);transition:transform .35s ease}
.bc-card.is-open .bc-chev{transform:rotate(180deg)}

.bc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bc-th{position:relative;display:block;aspect-ratio:16/11;border-radius:12px;overflow:hidden;background:var(--bg2,#1a1611);border:1px solid rgba(255,255,255,.06)}
.bc-th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.bc-head:hover .bc-th img{transform:scale(1.06)}
.bc-th-ph{display:flex;align-items:center;justify-content:center;color:var(--ac);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--ac) 18%,transparent),var(--bg2,#1a1611) 70%)}
.bc-th-ph svg{width:38%;height:auto;opacity:.75}

/* accordion (animated height via grid rows; links not focusable while closed) */
.bc-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .4s ease,visibility 0s linear .4s}
.bc-card.is-open .bc-panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .4s ease,visibility 0s}
.bc-panel-in{overflow:hidden;min-height:0}
.bc-panel-in>*:first-child{margin-top:12px}
.bc-subh{margin:10px 0 8px;font:800 13px/1 var(--pm-sans,'Manrope',sans-serif);text-transform:uppercase;letter-spacing:.08em;color:var(--ac)}
.bc-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bc-link{display:inline-block;padding:8px 13px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--t1,#e9e1d4);
  background:rgba(255,255,255,.04);border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);transition:background .2s,border-color .2s,color .2s}
.bc-link:hover,.bc-link:focus-visible{color:var(--ac2);border-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent)}
.bc-empty{margin:12px 0 0;font-size:14px;color:var(--t2,#a99c88)}

.bc-all{display:block;width:100%;border:0;cursor:pointer;font-family:inherit;margin-top:14px;padding:11px 16px;border-radius:12px;text-align:center;font-weight:800;font-size:14.5px;
  color:#120e09;background:linear-gradient(180deg,var(--ac2),var(--ac));box-shadow:0 8px 22px -10px var(--acg);transition:filter .2s,transform .2s}
.bc-all:hover{filter:brightness(1.08);transform:translateY(-1px)}

@media (max-width:980px){.bc-cards{grid-template-columns:1fr 1fr}}
@media (max-width:680px){
  .bc-root{min-height:0}
  .bc-cards{grid-template-columns:1fr;gap:16px}
  .bc-title{font-size:19px}
  .bc-card{padding:14px}
}
@media (prefers-reduced-motion:reduce){.bc-panel,.bc-chev,.bc-th img,.bc-card{transition:none!important}}
.bc-all:focus-visible{outline:2px solid var(--ac2);outline-offset:3px}
/* /group/<id>/ page: sub-category chips above the feed */
.bc-group-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 20px}
.bc-group-chips .bc-link{display:inline-block}

/* FLAG: the home hero (section#hero: badge, H1, subtitle, big search, Popular chips, stats, collage) is HIDDEN, not deleted.
   SEO: its H1 stays in the DOM as the page's single H1, visually hidden with the standard sr-only technique
   (NOT display:none), so crawlers and screen readers still get it. Everything else in the hero is display:none,
   and the collage <img>s use data-src so they are not downloaded. The top-nav search (css/nav-search.css) replaces the hero search.
   To show the hero again add  data-hero="on"  to the <html> tag in index.html (or delete these rules). */
html:not([data-hero="on"]) section#hero{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
html:not([data-hero="on"]) section#hero::before,html:not([data-hero="on"]) section#hero::after,
html:not([data-hero="on"]) section#hero .pm-hero-inner>div>:not(h1),
html:not([data-hero="on"]) section#hero .pm-collage{display:none!important}

/* FLAG: the old mobile-only search row under the header (#mobile-search-bar) is HIDDEN; the header search icon replaces it.
   To show it again add  data-msb="on"  to the <html> tag in index.html. */
html:not([data-msb="on"]) #mobile-search-bar{display:none!important}
/* with the hero hidden, Browse by category is the first section: give it breathing room under the header on small screens */
@media (max-width:640px){html:not([data-hero="on"]) section#browse-cats{padding-top:20px!important}}