/* ==========================================================================
   temple.dinamalar.com — temple listing / collection page (templelist.php)
   --------------------------------------------------------------------------
   Mobile-first and widens; no max-width media queries. Shares the token names
   used by the temple page so the dark-mode block in dmr-responsive.css
   recolours this page too without needing its own overrides.
   ========================================================================== */

.tl{
  --tp-brand:#af002d;
  --tp-ink:#1c1b19;
  --tp-body:#3a3835;
  --tp-muted:#6d6963;
  --tp-line:#e2ded6;
  --tp-surface:#fffdf9;
  --tp-sunk:#f6f2ea;

  font-family:"Mukta Malar","Noto Sans Tamil","Nirmala UI",sans-serif;
  color:var(--tp-body);
  background:var(--tp-surface);
  font-size:16px; line-height:1.65;
  padding-bottom:24px;
}
.tl *{box-sizing:border-box}
.tl img{max-width:100%; height:auto; display:block}
.tl-wrap{max-width:1080px; margin:0 auto; padding:0 16px}

/* ---------------------------------------------------------- breadcrumbs */
.tl-crumbs{
  font-size:14px; color:var(--tp-muted); padding:12px 0 4px;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.tl-crumbs a{color:var(--tp-brand); text-decoration:none}
.tl-crumbs a:hover,.tl-crumbs a:focus-visible{text-decoration:underline}

/* ----------------------------------------------------------------- head */
.tl-head{padding:6px 0 12px; border-bottom:1px solid var(--tp-line); margin-bottom:14px}
.tl h1{
  font-family:"Anek Tamil","Noto Sans Tamil","Nirmala UI",sans-serif;
  font-size:27px; line-height:1.25; font-weight:600; color:var(--tp-ink);
  margin:0 0 4px; text-wrap:balance;
}
.tl-count{margin:0; font-size:15px; color:var(--tp-muted)}

/* -------------------------------------------------------------- filters */
/* Horizontal scroll rather than wrap: with 14 deity collections and 16
   districts, wrapping pushed the first temple card two screens down on a
   phone. Scrolling keeps the list one row and the content above the fold. */
.tl-filters{margin:0 0 14px}
.tl-filters h2{
  font-family:"Anek Tamil","Noto Sans Tamil","Nirmala UI",sans-serif;
  font-size:15px; font-weight:600; color:var(--tp-muted);
  margin:0 0 8px; text-transform:none;
}
.tl-filters ul{
  list-style:none; margin:0; padding:0 0 4px;
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tl-filters ul::-webkit-scrollbar{display:none}
.tl-filters li{flex:0 0 auto}
.tl-filters a{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  min-height:38px; padding:0 13px; border-radius:999px;
  border:1px solid var(--tp-line); background:var(--tp-sunk);
  color:var(--tp-ink); text-decoration:none; font-size:14px;
}
.tl-filters a span{color:var(--tp-muted); font-size:12px}
.tl-filters a:hover,.tl-filters a:focus-visible{border-color:var(--tp-brand)}
.tl-filters a.is-on{background:var(--tp-brand); border-color:var(--tp-brand); color:#fff}
.tl-filters a.is-on span{color:rgba(255,255,255,.8)}

/* ----------------------------------------------------------- temple grid */
.tl-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px; grid-template-columns:1fr;
}
@media (min-width:560px){ .tl-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .tl-grid{grid-template-columns:repeat(3,1fr)} }
.tl-grid a{
  display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:center;
  min-height:88px; border:1px solid var(--tp-line); border-radius:8px;
  overflow:hidden; background:var(--tp-surface); text-decoration:none;
  color:var(--tp-ink);
}
.tl-grid a:hover,.tl-grid a:focus-visible{border-color:var(--tp-brand)}
.tl-grid a:focus-visible{outline:2px solid var(--tp-brand); outline-offset:2px}
.tl-grid img,.tl-noimg{
  width:96px; height:88px; object-fit:cover; background:var(--tp-sunk); display:block;
}
.tl-body{padding:8px 12px 8px 0; min-width:0}
.tl-name{display:block; font-size:16px; font-weight:600; line-height:1.35}
.tl-loc{display:block; font-size:14px; color:var(--tp-muted); margin-top:1px}
.tl-deity{display:block; font-size:13px; color:var(--tp-muted); margin-top:1px}

/* ---------------------------------------------------------------- pager */
.tl-pager{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  padding:22px 0 4px;
}
.tl-pager a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 12px;
  border:1px solid var(--tp-line); border-radius:6px;
  color:var(--tp-brand); text-decoration:none; font-size:15px;
  background:var(--tp-surface);
}
.tl-pager a:hover,.tl-pager a:focus-visible{border-color:var(--tp-brand); background:var(--tp-sunk)}
.tl-pager a[aria-current="page"]{
  background:var(--tp-brand); border-color:var(--tp-brand); color:#fff; font-weight:600;
}

.tl-empty{padding:32px 0; color:var(--tp-muted)}
.tl-empty a{color:var(--tp-brand)}

@media (prefers-reduced-motion:reduce){
  .tl *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ---------------------------------------------------------- search form */
.tl-search{display:flex; gap:8px; margin:0 0 16px}
.tl-search input[type=text]{
  flex:1 1 auto; min-width:0; min-height:48px; padding:0 14px; font-size:16px;
  font-family:"Mukta Malar","Noto Sans Tamil","Nirmala UI",sans-serif;
  border:1px solid var(--tp-line); border-radius:6px; background:#fff; color:var(--tp-ink);
}
.tl-search input[type=text]:focus-visible{outline:2px solid var(--tp-brand); outline-offset:1px}
.tl-search button{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  min-height:48px; padding:0 18px; border:0; border-radius:6px;
  background:var(--tp-brand); color:#fff; font-size:16px; font-weight:600;
  font-family:"Mukta Malar","Noto Sans Tamil","Nirmala UI",sans-serif; cursor:pointer;
}
.tl-search button:hover{background:#8a0024}
html.dark-mode .tl-search input[type=text]{background:#232323; color:#f0ece6; border-color:#333}
.tl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* headings lead with an icon */
.tl h1,.tl-filters h2{display:flex; align-items:center; gap:9px}