/* ── BLOG ADD-ON STYLES — Padma Shree Travels ──
   Load AFTER css/style.css. Only blog-specific components here — no duplicates. */

/* ── Blog hero wrapper (dark, matches main .phero) ── */
.blog-hw{background:var(--black);color:var(--white);padding:1.2rem 0 2.5rem}
.blog-hw .sbadge{background:rgba(255,255,255,.08);color:var(--g300);border:1px solid rgba(255,255,255,.12);margin-bottom:1.2rem}
.blog-hw h1{color:var(--white);margin-bottom:.7rem}
.blog-hw h1 em{font-style:italic;font-weight:400}
.blog-hw .hero__d{color:var(--g400)}

/* ── Blog breadcrumb ── */
.blog-bc{font-size:.75rem;color:var(--g500);letter-spacing:.03em;padding:.6rem 0 0}
.blog-bc a{color:var(--g400)}.blog-bc a:hover{color:var(--white);text-decoration:underline}

/* ── Blog meta bar ── */
.blog-meta{display:flex;align-items:center;gap:1rem;font-size:.73rem;color:var(--g400);padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);margin-top:1.2rem;flex-wrap:wrap}
.blog-meta span+span::before{content:'·';margin-right:1rem;opacity:.4}

/* ── Quick facts box ── */
.qbox{max-width:800px;margin:0 auto;padding:2rem 1.5rem 0}
.qbox__in{background:var(--g50);border:1px solid var(--g200);border-radius:var(--r);padding:1.4rem 1.8rem;border-left:4px solid var(--black)}
.qbox__in h2{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g500);margin-bottom:.9rem}
.qbox__in p{font-size:.87rem;color:var(--g700);margin-bottom:.3rem}
.qbox__in p:last-child{margin-bottom:0}
.qbox__in strong{color:var(--black)}

/* ── Article content wrapper ── */
.article{max-width:800px;margin:0 auto;padding:2.5rem 1.5rem 3rem}
.article h2{font-size:clamp(1.25rem,2.8vw,1.65rem);margin:2.5rem 0 .65rem;color:var(--black);letter-spacing:-.01em;line-height:1.2;padding-top:.6rem}
.article h2:first-child{margin-top:.5rem}
.article h3{font-size:.85rem;font-weight:700;color:var(--g700);margin:1.6rem 0 .4rem;text-transform:uppercase;letter-spacing:.05em}
.article p{margin-bottom:1.1rem;color:var(--g700);font-size:.93rem;line-height:1.8}
.article p strong{color:var(--black)}
.article p a{color:var(--accent);border-bottom:1px solid rgba(39,110,241,.2);transition:.2s}
.article p a:hover{border-color:var(--accent)}
.article ul,.article ol{margin:0 0 1.2rem 1.3rem}
.article li{margin-bottom:.45rem;font-size:.9rem;color:var(--g700);line-height:1.7}
.article li strong{color:var(--black)}

/* ── Blog data table ── */
.dtable{width:100%;border-collapse:collapse;margin:1.2rem 0 1.5rem;border-radius:var(--r);overflow:hidden;box-shadow:var(--sm);font-size:.87rem}
.dtable th{background:var(--black);color:var(--white);padding:.8rem 1rem;text-align:left;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.dtable td{padding:.65rem 1rem;border-bottom:1px solid var(--g100);color:var(--g700)}
.dtable tr:last-child td{border-bottom:none}
.dtable tr:hover td{background:var(--g50)}

/* ── Tip / highlight box ── */
.tip{background:var(--g50);border:1px solid var(--g200);border-left:4px solid var(--black);border-radius:var(--r);padding:1.2rem 1.5rem;margin:1.3rem 0}
.tip strong{color:var(--black);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.tip p{margin:.35rem 0 0;font-size:.87rem;color:var(--g700);line-height:1.7}
.tip p a{color:var(--accent)}

/* ── Blog timeline (.btl) ── */
.btl{margin:1.5rem 0}
.btl__s{display:flex;gap:1.2rem;margin-bottom:1.8rem;position:relative}
.btl__s::after{content:'';position:absolute;left:18px;top:42px;bottom:-1.8rem;width:1px;background:var(--g100)}
.btl__s:last-child::after{display:none}
.btl__n{width:38px;height:38px;border:2px solid var(--black);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--black);flex-shrink:0;background:var(--white);position:relative;z-index:1}
.btl__c h4{font-size:.9rem;font-weight:700;color:var(--black);margin-bottom:.2rem}
.btl__c p{font-size:.85rem;color:var(--g500);margin:0;line-height:1.7}
.btl__t{font-size:.63rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.2rem}

/* ── Monument card ── */
.mcard{background:var(--white);border:1px solid var(--g100);border-radius:var(--r);padding:1.4rem 1.6rem;margin:.8rem 0;transition:all var(--t)}
.mcard:hover{box-shadow:var(--md);transform:translateY(-2px);border-color:var(--g200)}
.mcard h3{font-size:1rem;color:var(--black);margin-bottom:.3rem}
.mcard .mcard__meta{font-size:.7rem;color:var(--g500);letter-spacing:.04em;margin-bottom:.5rem}
.mcard p{margin:0;font-size:.87rem;color:var(--g700);line-height:1.7}

/* ── Temple 2-col grid ── */
.tgrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;margin:1.2rem 0}
.tc2{background:var(--white);border:1px solid var(--g100);border-radius:var(--r);padding:1.2rem;transition:all var(--t)}
.tc2:hover{border-color:var(--g200);box-shadow:var(--sm)}
.tc2 h4{font-size:.87rem;font-weight:700;color:var(--black);margin-bottom:.35rem}
.tc2 p{font-size:.8rem;color:var(--g500);line-height:1.6;margin:0}

/* ── Season / rating cards ── */
.scard{border:1px solid var(--g200);border-radius:var(--r);padding:1.2rem 1.5rem;margin:.7rem 0;background:var(--white)}
.scard.best{border-color:rgba(5,148,79,.3);background:rgba(5,148,79,.04)}
.scard.ok{border-color:rgba(202,138,4,.3);background:rgba(202,138,4,.03)}
.scard.avoid{border-color:rgba(225,25,0,.25);background:rgba(225,25,0,.03)}
.sbg2{display:inline-block;padding:.15rem .65rem;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:4px;margin-bottom:.55rem}
.sbg2.best-b{border:1px solid rgba(5,148,79,.4);color:var(--green)}
.sbg2.ok-b{border:1px solid rgba(202,138,4,.4);color:#92400e}
.sbg2.avoid-b{border:1px solid rgba(225,25,0,.3);color:var(--red)}
.scard h3{font-size:.93rem;font-weight:700;color:var(--black);margin-bottom:.35rem}
.scard p{font-size:.87rem;color:var(--g700);line-height:1.7;margin:0}

/* ── Inline article CTA ── */
.bcta{background:var(--g50);border:1px solid var(--g200);border-radius:var(--r);padding:1.8rem 2rem;margin:2rem 0;text-align:center;border-top:3px solid var(--black)}
.bcta h3{font-size:1.15rem;color:var(--black);margin-bottom:.4rem}
.bcta p{color:var(--g500);font-size:.86rem;margin-bottom:1.2rem}
.bcta__acts{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* ── Related blog posts ── */
.blog-related{max-width:800px;margin:0 auto;padding:2rem 1.5rem;border-top:1px solid var(--g100)}
.blog-related h2{font-size:1.1rem;font-family:var(--ffd);color:var(--black);margin-bottom:1.2rem;font-weight:700}
.rpost-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
.rpost{display:block;padding:1.2rem;background:var(--white);border:1px solid var(--g100);border-radius:var(--r);transition:all var(--t);color:inherit}
.rpost:hover{border-color:var(--g300);box-shadow:var(--md);transform:translateY(-2px)}
.rpost .rp-tag{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g500);margin-bottom:.45rem;display:block}
.rpost h4{font-size:.87rem;font-weight:700;color:var(--black);margin-bottom:.28rem}
.rpost p{font-size:.75rem;color:var(--g500);margin:0;line-height:1.55}

/* ── Blog listing page ── */
.blog-hero-listing{background:var(--black);color:var(--white);padding:3.5rem 0 3rem}
.blog-hero-listing h1{color:var(--white);margin-bottom:.7rem}
.blog-hero-listing p{color:var(--g400);font-size:1rem;max-width:55ch}
.blog-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:2.5rem}
.bcard{background:var(--white);border:1px solid var(--g100);border-radius:var(--r);padding:1.8rem 2rem;transition:all var(--t);display:block;color:inherit;overflow:hidden}
.bcard:hover{box-shadow:var(--md);transform:translateY(-2px);border-color:var(--g200)}
.bcard__tag{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g500);margin-bottom:.65rem;display:block}
.bcard h2{font-size:1.08rem;color:var(--black);margin-bottom:.45rem;line-height:1.3;font-weight:700}
.bcard p{font-size:.86rem;color:var(--g500);line-height:1.65;margin-bottom:.9rem}
.bcard .bc-foot{display:flex;justify-content:space-between;align-items:center;font-size:.73rem}
.bcard .bc-meta{color:var(--g400)}
.bcard .bc-read{font-weight:700;color:var(--black)}

/* ── Blog card thumbnail ── */
.bcard__thumb{width:calc(100% + 4rem);margin:-1.8rem -2rem 1.4rem;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r) var(--r) 0 0;background:var(--g100);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.bcard__thumb img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;transition:transform .4s ease}
.bcard:hover .bcard__thumb img{transform:scale(1.04)}
/* Placeholder state — shown until a real image is added */
.bcard__thumb--ph{background:linear-gradient(135deg,var(--g50) 0%,var(--g100) 60%,var(--g200) 100%)}
.bcard__thumb-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;color:var(--g400);text-align:center;pointer-events:none}
.bcard__thumb-ph svg{width:30px;height:30px;opacity:.45}
.bcard__thumb-ph span{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.6}

/* ── Article hero image (just below the page hero section) ── */
.article-hero-img{max-width:800px;margin:0 auto;padding:1.8rem 1.5rem 0}
.article-hero-img figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--g100);background:var(--g50);display:flex;flex-direction:column}
.article-hero-img img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:var(--g100)}
.article-hero-img figcaption{padding:.6rem 1rem;font-size:.72rem;color:var(--g500);background:var(--g50);border-top:1px solid var(--g100);text-align:center;line-height:1.55}
/* Placeholder state for hero image */
.article-hero-img .img-ph{background:linear-gradient(135deg,var(--g50) 0%,var(--g100) 60%,var(--g200) 100%)}
.article-hero-img .img-ph img{display:none}
.article-hero-img .img-ph figcaption{display:none}
.article-hero-img .img-ph::after{content:'Add your hero image here — see HTML comment above';display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;font-size:.65rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--g400);padding:1rem}

/* ── In-article image (figure inside .article) ── */
.article-img{margin:1.5rem 0 2rem;border-radius:var(--r);overflow:hidden;border:1px solid var(--g100);background:var(--g50)}
.article-img img{width:100%;display:block;object-fit:cover;background:var(--g100)}
.article-img figcaption{padding:.6rem 1rem;font-size:.72rem;color:var(--g500);background:var(--g50);border-top:1px solid var(--g100);text-align:center;line-height:1.55}
/* Wide variant — bleeds to article edges */
.article-img--wide{margin-left:-1.5rem;margin-right:-1.5rem;border-radius:0;border-left:none;border-right:none}

/* ── Responsive ── */
@media(min-width:640px){
  .rpost-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:960px){
  .rpost-grid{grid-template-columns:repeat(3,1fr)}
  .blog-grid{grid-template-columns:repeat(3,1fr)}
}