/* ==========================================================================
   temple.dinamalar.com — temple profile page (/temple?id=N)
   --------------------------------------------------------------------------
   This page is written as semantic HTML, not the nested tables used across the
   rest of the site, so it is responsive on its own terms. Nothing here is
   inside a max-width media query: the layout is mobile-first and widens.
   dmr-responsive.css only supplies the viewport, the Tamil face and the nav.
   ========================================================================== */

.tp{
  --tp-brand:#af002d;
  --tp-ink:#1c1b19;
  --tp-body:#3a3835;
  --tp-muted:#6d6963;
  --tp-line:#e2ded6;
  --tp-surface:#fffdf9;
  --tp-sunk:#f6f2ea;
  --tp-tamil:"Mukta Malar","Noto Sans Tamil","Nirmala UI",sans-serif;

  max-width:760px;
  margin:0 auto;
  padding:0 16px 40px;
  font-family:var(--tp-tamil);
  color:var(--tp-body);
  font-size:17px;
  line-height:1.7;
  background:var(--tp-surface);
  box-sizing:border-box;
}
.tp *{box-sizing:border-box}
.tp img{max-width:100%;height:auto;display:block}

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

/* ----------------------------------------------------------------- hero */
.tp-hero{margin:8px 0 0; border-radius:6px; overflow:hidden; background:var(--tp-sunk)}
.tp-hero img{width:100%; aspect-ratio:16/9; object-fit:cover}
.tp-hero figcaption{
  font-size:14px; color:var(--tp-muted); padding:8px 12px; background:var(--tp-sunk);
}

/* ----------------------------------------------------------------- head */
.tp-head{padding:16px 0 4px; border-bottom:1px solid var(--tp-line)}
.tp h1{
  font-family:var(--tp-tamil); font-size:30px; line-height:1.25; font-weight:600;
  color:var(--tp-ink); margin:0 0 6px; text-wrap:balance;
}
.tp-loc{margin:0 0 4px; font-size:16px; color:var(--tp-muted)}
.tp-deity{margin:0; font-size:16px}
.tp-deity strong{color:var(--tp-ink)}

/* -------------------------------------------------------------- actions */
/* Sticky on mobile so directions and share stay reachable while reading a
   long temple history. It sits above the bottom nav, not over it. */
.tp-actions{
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:12px 0; scrollbar-width:none;
}
.tp-actions::-webkit-scrollbar{display:none}
.tp-act{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:0 16px; border-radius:999px;
  background:var(--tp-brand); color:#fff; text-decoration:none;
  font-size:15px; font-weight:500; white-space:nowrap;
}
.tp-act:hover,.tp-act:focus-visible{background:#8a0024}
.tp-act:focus-visible{outline:2px solid var(--tp-ink); outline-offset:2px}

.tp-btn{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
  border:1px solid var(--tp-brand); border-radius:4px;
  color:var(--tp-brand); text-decoration:none; font-size:15px;
}
.tp-btn:hover,.tp-btn:focus-visible{background:var(--tp-brand); color:#fff}

/* --------------------------------------------------------------- blocks */
.tp h2{
  font-family:var(--tp-tamil); font-size:22px; line-height:1.3; font-weight:600;
  color:var(--tp-ink); margin:24px 0 10px;
}
.tp h3{font-size:18px; line-height:1.4; font-weight:600; color:var(--tp-ink); margin:16px 0 6px}
.tp p{margin:0 0 12px}

/* Timings are the single most-asked question, so they get real prominence
   and sit high on the page. */
.tp-timings{
  background:var(--tp-sunk); border-left:4px solid var(--tp-brand);
  border-radius:0 4px 4px 0; padding:14px 16px; margin:16px 0;
}
.tp-timings h2{margin:0 0 6px; font-size:19px}
.tp-timings-body{font-size:17px}
.tp-timings-body p{margin:0 0 6px}

/* ---------------------------------------------------------- quick facts */
.tp-facts dl{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--tp-line); border:1px solid var(--tp-line); border-radius:4px;
  margin:0; overflow:hidden;
}
.tp-fact{background:var(--tp-surface); padding:10px 14px; display:flex; gap:12px; flex-wrap:wrap}
.tp-fact dt{flex:0 0 130px; color:var(--tp-muted); font-size:15px; margin:0}
.tp-fact dd{flex:1 1 180px; margin:0; color:var(--tp-ink)}
@media (min-width:560px){
  .tp-facts dl{grid-template-columns:1fr 1fr}
}

/* -------------------------------------------------------------- address */
.tp-addr address{font-style:normal; margin:0 0 8px}
.tp-phone{color:var(--tp-muted)}

/* ------------------------------------------------------------- sections */
.tp-sec{
  border:1px solid var(--tp-line); border-radius:4px;
  margin:10px 0; background:var(--tp-surface);
}
.tp-sec > summary{
  cursor:pointer; list-style:none; padding:14px 16px; min-height:44px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:18px; font-weight:600; color:var(--tp-ink);
}
.tp-sec > summary::-webkit-details-marker{display:none}
.tp-sec > summary::after{content:"+"; color:var(--tp-brand); font-size:22px; line-height:1}
.tp-sec[open] > summary::after{content:"−"}
.tp-sec > summary:focus-visible{outline:2px solid var(--tp-brand); outline-offset:-2px}
.tp-sec-body{padding:0 16px 16px; font-size:17px}
.tp-sec-body img{margin:8px 0; border-radius:4px}
.tp-sec-body table{width:100%; max-width:100%; border-collapse:collapse}
.tp-sec-body td,.tp-sec-body th{padding:6px 8px; border-bottom:1px solid var(--tp-line)}

/* -------------------------------------------------------------- gallery */
.tp-gallery ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
@media (min-width:560px){ .tp-gallery ul{grid-template-columns:repeat(3,1fr)} }
.tp-gallery li{display:flex; flex-direction:column; gap:6px}
.tp-gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; background:var(--tp-sunk)}
.tp-gallery span{font-size:14px; color:var(--tp-muted); line-height:1.4}

/* -------------------------------------------------------------- related */
.tp-related ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--tp-line); border:1px solid var(--tp-line); border-radius:4px; overflow:hidden;
}
@media (min-width:560px){ .tp-related ul{grid-template-columns:1fr 1fr} }
.tp-related a{
  display:grid; grid-template-columns:56px 1fr; grid-template-rows:auto auto;
  gap:2px 12px; align-items:center;
  background:var(--tp-surface); padding:10px 14px; min-height:64px;
  text-decoration:none; color:var(--tp-ink);
}
.tp-related a:hover,.tp-related a:focus-visible{background:var(--tp-sunk)}
.tp-related img,.tp-noimg{
  grid-row:1 / span 2; width:56px; height:56px; border-radius:4px;
  object-fit:cover; background:var(--tp-sunk); display:block;
}
.tp-rname{font-size:16px; font-weight:500; line-height:1.35}
.tp-rloc{font-size:14px; color:var(--tp-muted)}

/* ---------------------------------------------------------------- empty */
.tp-empty{padding:48px 0; text-align:center}
.tp-empty h1{font-size:24px}

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

/* Anek Tamil on headings, Mukta Malar on body - the pairing used by both
   the new2024 mockup and the Meenakshi microsite. */
.tp h1,.tp h2,.tp h3,.tp-sec > summary{font-family:"Anek Tamil","Noto Sans Tamil","Nirmala UI",sans-serif}