/* பண்டிகை நாட்கள் (TMC-127), ported from the PO's pandigai-natkal-2026-v9 mockup — the same family as அரசு விடுமுறை
   (vidumuraigal.css), scoped under .pnd. Since v10d (TMC-135) the tiles, month tabs and pills come from the muhurtham
   pages' sheet (events/mugurtha-naatkal.css, .smn); this file keeps the festival list and the sections.
   Colours and fonts come from the site theme (css/tmc/shared/tmc90-theme.css); text sizes follow the .tp-* scale. */
.pnd{
  --orange:#FF7700; --orange-lt:#FF851A; --orange-soft:#FFF1E2; --orange-ink:#B55D00;
  --cream:#FFFBF6; --cream-deep:#FFF3E6; --white:#FFFFFF;
  --peach:#F0D2B4; --peach-deep:#E5772A; --tan:#F5E4CF;
  --rose:#F4DBD7; --rose-ink:#BD5746;
  --green:#248D49; --green-soft:#E8F5EC; --green-ink:#0F6E3C; --red:#D14343;
  --body:#2B2524; --head:#35343D; --muted:#8A817A; --grey:#6B6259;
  --line:#E9E1D6; --rule:#ECE8E3;
  --radius-s:8px; --radius-m:12px; --pill:32px;
  --shadow:0 4px 16px rgba(107,82,51,.08);
  --gutter:16px; --maxw:1200px; --lh-body:1.8;
  --ff-ta:'Anek Tamil','Noto Sans Tamil',system-ui,sans-serif;
  --ff-num:'Inter',system-ui,sans-serif;
  background:var(--white); color:var(--body); font-family:var(--ff-ta); font-size:14px; line-height:var(--lh-body);
}
.pnd *,.pnd *::before,.pnd *::after{box-sizing:border-box}
.pnd h1,.pnd h2,.pnd h3{color:var(--head); margin:0; line-height:1.4; font-weight:700}
.pnd h1{font-size:clamp(25px,5.6vw,32px)}
.pnd h2{font-size:clamp(17px,4.2vw,21px)}
.pnd p{margin:0; line-height:var(--lh-body)}
.pnd a{color:var(--orange); text-decoration:none}
.pnd .wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:14px var(--gutter) 8px}
.pnd .num{font-family:var(--ff-num)}
.pnd .en{font-family:var(--ff-num); color:var(--muted); font-weight:500}

.pnd .crumb{font-size:12px; color:var(--muted); line-height:1.7; margin-bottom:6px}
.pnd .crumb a{color:var(--muted)}
.pnd .crumb a:hover{color:var(--orange)}
.pnd .ph{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.pnd .ph h1 .sub{display:block; font-family:var(--ff-num); font-size:13px; font-weight:500; color:var(--muted); line-height:1.5; margin-top:2px}

/* holiday list */
.pnd .sech{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:18px 0 8px}
.pnd .sech h2{font-size:15.5px}
.pnd .sech h2 .en{font-size:12px; margin-left:6px}
.pnd .sech .cnt{font:600 12.5px var(--ff-num); color:var(--muted)}
/* festival list (v10d): icon · name + tag · date on phones; date column, then name and description from 700px */
.pnd .lst{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.pnd .lst li{display:block; padding:11px 0 12px; border-bottom:1px solid var(--rule)}
.pnd .lst li[hidden]{display:none}
.pnd .lst .hd{display:grid; grid-template-columns:40px 1fr auto; gap:0 12px; align-items:center}
.pnd .lst .tile{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--orange-soft); color:var(--peach-deep)}
.pnd .lst .tile img{width:26px; height:26px; object-fit:contain}
.pnd .lst .tile.g{background:var(--green-soft); color:var(--green-ink)}
.pnd .lst .tile.r{background:var(--rose); color:var(--rose-ink)}
.pnd .lst .tile.b{background:#E8EAFA; color:#4F5BD5}
.pnd .lst .tile.t{background:var(--tan); color:#8A5A1E}
.pnd .lst .nmb{display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0}
.pnd .lst .nm{font-weight:700; color:var(--rose-ink); font-size:15px; line-height:1.45}
.pnd .lst .tag{font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:var(--pill); padding:0 8px; white-space:nowrap; line-height:1.6}
.pnd .lst .tag.h{color:var(--green-ink); border-color:#CFE3D5; background:var(--green-soft)}
.pnd .lst .dl{display:flex; flex-direction:column; text-align:right; line-height:1.5}
.pnd .lst .dl .num{font:700 14.5px var(--ff-num); color:var(--head); white-space:nowrap}
.pnd .lst .dl .wd{font-size:12px; color:var(--muted)}
.pnd .lst .dl .td{font-size:12.5px; color:var(--green-ink); font-weight:600}
.pnd .lst .ds{margin:8px 0 0 52px; font-size:13.5px; line-height:1.75; color:var(--body)}
@media (min-width:700px){
  .pnd .lst li{display:grid; grid-template-columns:40px 150px 1fr auto; grid-template-rows:auto auto; gap:2px 14px; align-items:start; padding:13px 8px}
  .pnd .lst .hd{display:contents}
  .pnd .lst .hd .tile{grid-column:1; grid-row:1 / span 2; margin-top:2px}
  .pnd .lst .dl{grid-column:2; grid-row:1 / span 2; text-align:left; padding-top:1px; border-right:1px solid var(--rule); margin-right:2px}
  .pnd .lst .dl .num{font-size:15.5px}
  .pnd .lst .dl .wd{font-size:12.5px}
  .pnd .lst .dl .td{font-size:13px}
  .pnd .lst .nmb{grid-column:3; grid-row:1; flex-direction:row; align-items:center; gap:10px}
  .pnd .lst .nm{font-size:16px}
  .pnd .lst .tag{grid-column:4; grid-row:1; margin:3px 0 0}
  .pnd .lst .ds{grid-column:3 / span 2; grid-row:2; margin:0; font-size:14px; max-width:78ch}
  .pnd .lst li:nth-child(even){background:#FFFCF9}
}
.pnd .nomo{display:none; padding:14px 2px; color:var(--muted); font-size:14px}
.pnd .nomo.show{display:block}
.pnd .calcnote{font-size:12px; color:var(--muted); line-height:1.7; margin:10px 0 0}

/* sections */
.pnd .sec{margin:22px 0}
.pnd .sec h2{margin-bottom:8px}
.pnd .sec h2 .en{font-size:12.5px; margin-left:8px}
.pnd .sec p{margin-bottom:9px; max-width:860px}
.pnd .sec table.kv{width:100%; border-collapse:collapse; max-width:860px; font-size:14px; margin-bottom:9px}
.pnd .sec table.kv th,.pnd .sec table.kv td{padding:8px 10px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top; line-height:1.6}
.pnd .sec table.kv th{color:var(--rose-ink); background:var(--rose); font-weight:700; font-size:12.5px}

/* FAQ (admin FAQs, shared/tmc90-faq) */

/* recommendations */
.pnd .reco{display:grid; grid-template-columns:1fr; gap:10px}
@media (min-width:600px){.pnd .reco{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.pnd .reco{grid-template-columns:repeat(4,1fr)}}
.pnd .reco a{display:flex; align-items:center; gap:12px; background:var(--rose); border-radius:var(--radius-m); padding:10px 12px; color:var(--head); font-weight:700; font-size:14px; line-height:1.4}
.pnd .reco a .tl{width:44px; height:44px; border-radius:10px; background:#fff; display:grid; place-items:center; color:var(--rose-ink); flex:0 0 auto}
.pnd .reco a .tl svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.pnd .reco a span.t{flex:1}
.pnd .reco a::after{content:"›"; font-size:20px; color:var(--rose-ink)}


/* Religion pills (the app's, shared .pf): line icons */
.pnd .pf .ic{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
/* Five religion pills: two rows on phones (the shared pill keeps one row). */
@media (max-width:520px){.tmc90.tmc90.pnd .pfil{flex-wrap:wrap}}
/* The key-dates table fits a 320px phone: tighter cells, a size smaller. */
@media (max-width:400px){.pnd .sec table.kv th,.pnd .sec table.kv td{padding:7px 5px; font-size:12.5px}}