/* ==========================================================
   Homepage v2 — "கோவில் பற்றி" + "கோவில் செய்திகள் & நிகழ்வுகள்"
   + "பக்தர் சேவைகள்"
   Lifted from design-mockups/homepage-v2.html §3–5, §7 (+ shared
   hover and responsive rules). Loaded only by the
   "Homepage v2" page template (see inc/enqueue.php).
   The today-strip lives in temple-patterns.css §2.
   ========================================================== */
:root{
  --v2-band-about:#FFFDF8;    /* near-white cream */
  --v2-band-main:#F6EFE3;     /* light sand        */
  --v2-head:linear-gradient(135deg,#F7ECD6 0%,#EEDBB2 100%); /* soft widget head */
  --v2-radius:10px;
}

/* ==========================================================
   3. ABOUT TEMPLE  (Tamil only — cut-out deity on a splash)
   ========================================================== */
.about-temple{background:var(--v2-band-about);padding:var(--space-xl) 0}
.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--space-xl);align-items:center}

.about-photo{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:430px}
.about-photo .splash{position:absolute;top:50%;left:50%;transform:translate(-53%,-54%);width:106%;height:106%;pointer-events:none}
.about-photo .deity{
  position:relative;max-width:94%;width:auto;max-height:400px;
  filter:drop-shadow(0 14px 26px rgba(44,24,16,.20));
}
.about-photo .cap{
  position:relative;text-align:center;font-family:var(--font-tamil-noto);font-size:.98rem;
  color:var(--color-text-muted);margin-top:1rem;
}

.about-title{
  font-family:var(--font-tamil-tiro);color:var(--color-primary);
  font-size:clamp(1.7rem,3.2vw,2.35rem);line-height:1.5;margin-bottom:.2rem;
}
.about-rule{height:3px;width:70px;background:var(--color-secondary);border-radius:2px;margin:1rem 0 1.2rem}
.about-body p{font-family:var(--font-tamil-noto);font-size:1rem;color:var(--color-text-muted);line-height:2}
.about-links{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.about-link{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--v2-cream);border:1px solid var(--color-border);border-left:3px solid var(--color-secondary);
  border-radius:6px;padding:.32rem 1.1rem;font-family:var(--font-tamil-noto);font-size:1.02rem;
  line-height:1.7;color:var(--color-primary-dark);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.about-link:hover,
.about-link:focus-visible{
  border-color:var(--color-secondary);
  border-left-color:var(--color-secondary);
  box-shadow:0 2px 10px rgba(124,43,43,.10);
}
.about-link .arw{color:var(--color-secondary);font-weight:700;font-size:1.2rem;transition:transform var(--transition-fast)}
.about-link:hover .arw{transform:translateX(3px)}

/* ==========================================================
   SHARED HOVER: fill wipes in from the left, then one soft
   settle. Borders are never repainted (the ::before covers
   the padding box only), so left rules / outlines survive.
   Per-element colour comes from --fx-fill.
   ========================================================== */
.fx-wipe{position:relative;overflow:hidden;isolation:isolate}
.fx-wipe::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--fx-fill,linear-gradient(90deg,#F7ECD6 0%,#F0DFC0 100%));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .38s cubic-bezier(.33,0,.2,1);
}
.fx-wipe:hover::before,
.fx-wipe:focus-visible::before{
  transform:scaleX(1);
  animation:fx-settle .55s ease .38s 1;   /* soft settle, not a blink */
}
@keyframes fx-settle{
  0%{opacity:1}
  45%{opacity:.5}
  100%{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .fx-wipe::before{transition:none}
  .fx-wipe:hover::before,.fx-wipe:focus-visible::before{animation:none}
}

/* ==========================================================
   4. MAIN LAYOUT — content + sidebar
   ========================================================== */
.home-main{background:var(--v2-band-main);padding:var(--space-xl) 0}
.home-grid{display:grid;grid-template-columns:1fr 340px;gap:var(--space-xl);align-items:start}
.home-content{min-width:0}

.col-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;
  border-bottom:2px solid var(--color-border);padding-bottom:.65rem}
.col-head h2{font-family:var(--font-tamil-tiro);color:var(--color-primary);font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.4}
.col-head a{font-family:var(--font-tamil-noto);font-size:.95rem;color:var(--color-primary);white-space:nowrap}

/* --- featured news --- */
.news-feature{
  background:var(--color-white);border:1px solid var(--color-border);border-top:4px solid var(--color-secondary);
  border-radius:var(--v2-radius);overflow:hidden;box-shadow:var(--shadow-card);margin-bottom:1.6rem;
}
.news-feature .media{position:relative;display:block;height:320px;overflow:hidden;background:var(--v2-sand)}
.news-feature .media img{width:100%;height:100%;object-fit:cover}
.news-feature .media::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(44,24,16,.5),transparent 55%)}
.cat-tag{
  position:absolute;top:12px;left:12px;z-index:3;
  background:linear-gradient(135deg,var(--color-gold-light),var(--color-secondary));
  color:var(--color-primary-dark);font-family:var(--font-tamil-noto);font-size:.85rem;font-weight:600;
  padding:.2rem .9rem;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.news-feature .body{padding:1.4rem 1.6rem 1.6rem}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-family:var(--font-tamil-noto);font-size:.9rem;color:var(--color-text-muted)}
.post-meta .dot{color:var(--color-secondary)}
.news-feature h3{font-family:var(--font-tamil-tiro);color:var(--color-primary-dark);font-size:1.2rem;line-height:1.5;margin:.65rem 0 .65rem}
.news-feature h3 a,.news-item h4 a{color:inherit}
.news-feature h3 a:hover,.news-item h4 a:hover{color:var(--color-primary)}
.news-feature p{font-family:var(--font-tamil-noto);font-size:.90rem;color:var(--color-text-muted);line-height:1.95}
.read-more{
  display:inline-block;margin-top:.5rem;margin-left:-.55rem;font-family:var(--font-tamil-noto);font-size:.85rem;
  color:var(--color-primary);
  padding:.40rem .55rem .30rem;border-radius:8px;
  transition:color var(--transition-fast),border-bottom-color var(--transition-fast);
}
.read-more:hover{color:var(--color-primary-dark)}

/* --- news list (wide thumbnails) --- */
.news-list{display:flex;flex-direction:column;gap:1.1rem}
.news-item{
  display:grid;grid-template-columns:240px 1fr;gap:1.3rem;
  background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--v2-radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--transition-normal);
}
.news-item:hover{box-shadow:var(--shadow-card);transform:translateY(-2px);border-color:var(--color-secondary)}
.news-item .thumb{position:relative;display:block;background:var(--v2-sand);min-height:175px;overflow:hidden}
.news-item .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.news-item .thumb .date-badge{
  position:absolute;left:0;bottom:0;z-index:3;
  background:linear-gradient(135deg,var(--color-gold-light),var(--color-secondary));
  color:var(--color-primary-dark);padding:.35rem .7rem;text-align:center;border-top-right-radius:8px;
}
.news-item .thumb .date-badge b{display:block;font-family:var(--font-english);font-size:1.2rem;line-height:1}
.news-item .thumb .date-badge span{font-family:var(--font-ui);font-size:.7rem;letter-spacing:.08em;color:#7a5a1a;text-transform:uppercase}
.news-item .body{padding:1.1rem 1.3rem 1.1rem 0}
.news-item h4{font-family:var(--font-tamil-tiro);font-size:1rem;color:var(--color-primary-dark);line-height:1.5;margin:.6rem 0rem;}
.news-item p{font-family:var(--font-tamil-noto);font-size:.90rem;color:var(--color-text-muted);line-height:1.9}
/* category pill — sits on the thumbnail, top right */
.tag-pill{
  display:inline-block;font-family:var(--font-tamil-noto);font-size:.78rem;font-weight:600;
  line-height:1.6;padding:.1rem .75rem;border-radius:20px;border:0;
  background:linear-gradient(135deg,var(--color-gold-light),var(--color-secondary));
  color:var(--color-primary-dark);
}
.news-item .thumb .tag-pill{
  position:absolute;top:10px;right:10px;z-index:4;box-shadow:0 2px 8px rgba(44,24,16,.35);
}
.tag-pill.is-video{background:#c34f4f;color:#fff}
.news-foot{text-align:center;margin-top:1.8rem}
.news-empty{
  background:var(--color-white);border:1px dashed var(--color-border);border-radius:var(--v2-radius);
  padding:2rem 1.5rem;text-align:center;font-family:var(--font-tamil-noto);color:var(--color-text-muted);
}

/* --- video posts --- */
.thumb.is-video::after{
  content:'';position:absolute;inset:0;background:rgba(44,24,16,.22);transition:background var(--transition-normal);
}
.news-item:hover .thumb.is-video::after{background:rgba(44,24,16,.10)}
.play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:64px;height:45px;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
  transition:transform var(--transition-normal);
}
.news-item:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.play svg{width:100%;height:100%;display:block}
.play .pbg{fill:var(--color-primary);opacity:.92}
.play .parrow{fill:#fff}

/* ---- CTAs: identical construction to .about-link, primary-light instead of gold ----
   Cream base, maroon label, 3px left rule. Shared by the news CTA and the
   seva buttons (§7). */
.seva-btn,.seva-panel .pbtn,.news-foot .btn-primary{
  /* #c34f4f is primary-light darkened just enough for white label text to
     clear WCAG AA (4.6:1); visually the same tone. */
  --fx-fill:#c34f4f;
  background:var(--v2-cream);
  border:1px solid #c34f4f;
  border-left:3px solid #c34f4f;
  border-radius:6px;color:var(--color-primary-dark);
  transition:color .16s ease .28s,border-color var(--transition-fast),box-shadow var(--transition-fast);
}
/* flat colour grows in — no settle/opacity pulse on these */
.seva-btn:hover::before,.seva-btn:focus-visible::before,
.seva-panel .pbtn:hover::before,.seva-panel .pbtn:focus-visible::before,
.news-foot .btn-primary:hover::before,.news-foot .btn-primary:focus-visible::before{
  animation:none;
}
.seva-btn:hover,.seva-btn:focus-visible,
.seva-panel .pbtn:hover,.seva-panel .pbtn:focus-visible,
.news-foot .btn-primary:hover,.news-foot .btn-primary:focus-visible{
  background:var(--v2-cream);
  color:#fff;                                     /* lands as the fill arrives */
  border-color:#c34f4f;
  border-left-color:#c34f4f;
  box-shadow:0 2px 10px rgba(184,63,63,.20);
  transform:none;
}
/* the big news CTA: same construction, a touch roomier */
.news-foot .btn-primary{
  padding:.5rem 1.6rem;font-family:var(--font-tamil-noto);font-size:1rem;
  letter-spacing:0;text-transform:none;
}

/* ==========================================================
   5. SIDEBAR
   ========================================================== */
.home-side{display:flex;flex-direction:column;gap:var(--space-lg)}
.side-card{
  background:var(--color-white);border:1px solid var(--color-border);
  border-radius:var(--v2-radius);overflow:hidden;box-shadow:var(--shadow-card);
}
.side-card-head{
  background:var(--v2-head);border-bottom:2px solid var(--color-secondary);
  padding:.85rem 1.1rem;display:flex;align-items:center;gap:.65rem;
}
.side-card-head .ic{color:var(--color-primary);font-size:1.3rem;line-height:1}
.side-card-head h3{font-family:var(--font-tamil-tiro);color:var(--color-primary-dark);font-size:1.12rem;line-height:1.5;margin:0}
.side-card-body{padding:.45rem 1.1rem 1.15rem}
.side-card-body.is-tiles{padding-top:1rem}
.side-card-foot{border-top:1px solid var(--color-border);padding:.75rem 1.1rem;text-align:center;background:var(--color-bg)}
.side-card-foot a{font-family:var(--font-tamil-noto);font-size:.92rem}

/* opening hours */
.hours-row{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  padding:.6rem 0;border-bottom:1px dashed var(--color-border);font-family:var(--font-tamil-noto);font-size:.95rem}
.hours-row span{color:var(--color-text-muted)}
.hours-row b{color:var(--color-primary-dark);font-weight:600;text-align:right}
.hours-note{font-family:var(--font-tamil-noto);font-size:.82rem;color:var(--color-text-muted);
  line-height:1.8;margin-top:.7rem}

/* festivals */
.fest-row{display:flex;gap:.9rem;padding:.85rem 0;border-bottom:1px dashed var(--color-border);color:inherit}
.fest-row:last-child{border-bottom:0}
.fest-row:hover h4{color:var(--color-primary)}
.fest-date{
  flex:none;width:54px;text-align:center;background:var(--v2-sand);
  border:1px solid var(--color-border);border-radius:6px;padding:.4rem 0;align-self:flex-start;
}
.fest-date b{display:block;font-family:var(--font-english);font-size:1.3rem;color:var(--color-primary);line-height:1;font-weight:700}
.fest-date span{font-family:var(--font-ui);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}
.fest-info h4{font-family:var(--font-tamil-noto);font-size:1.02rem;color:var(--color-text);line-height:1.65;margin-bottom:.15rem;font-weight:600;transition:color var(--transition-fast)}
.fest-info p{font-family:var(--font-tamil-noto);font-size:.88rem;color:var(--color-text-muted);line-height:1.8;margin:0}
.fest-empty{font-family:var(--font-tamil-noto);font-size:.9rem;color:var(--color-text-muted);padding:.85rem 0 0;margin:0}

/* how to reach */
.reach-item{display:flex;gap:.8rem;padding:.8rem 0;border-bottom:1px dashed var(--color-border)}
.reach-item:last-of-type{border-bottom:0}
.reach-item .ic{
  flex:none;width:38px;height:38px;border-radius:50%;background:var(--v2-sand);
  border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;color:var(--color-primary);
}
.reach-item .tx{font-family:var(--font-tamil-noto);font-size:.95rem;color:var(--color-text-muted);line-height:1.85}
.reach-item .tx b{display:block;color:var(--color-text);font-weight:600;font-size:1rem}
.reach-map{
  display:block;text-align:center;margin-top:1rem;background:transparent;
  border:1px solid var(--color-secondary);color:var(--color-primary-dark);
  font-family:var(--font-tamil-noto);font-size:.95rem;padding:.65rem;border-radius:6px;
  transition:all var(--transition-fast);
}
.reach-map:hover{color:var(--color-primary-dark);box-shadow:0 2px 10px rgba(124,43,43,.10)}

/* quick tiles inside sidebar */
.side-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.side-tile{
  background:var(--v2-cream);border:1px solid var(--color-border);border-radius:12px;
  padding:1.1rem .6rem;text-align:center;transition:all var(--transition-normal);
}
.side-tile:hover{border-color:var(--color-secondary);box-shadow:var(--shadow-card);transform:translateY(-3px)}
.side-tile .ic{
  width:46px;height:46px;margin:0 auto .55rem;border-radius:50%;
  background:linear-gradient(135deg,#FDF6E9,#F4E9D7);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--color-primary);
}
.side-tile .ta{display:block;font-family:var(--font-tamil-tiro);font-size:1rem;color:var(--color-primary-dark);font-weight:700;line-height:1.55}

.hv2-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ==========================================================
   7. DEVOTEE SERVICES  (Srikalahasthi layout: 2×2 + tall panel)
   ========================================================== */
:root{--v2-band-seva:linear-gradient(180deg,#F2E4CE 0%,#EAD8B6 100%)}

/* ornate centred section head */
.sec-head-c{text-align:center;margin-bottom:.4rem}
.sec-head-c h2{font-family:var(--font-tamil-tiro);color:var(--color-primary);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.5}
.orn-divider{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:.4rem auto 2.4rem}
.orn-divider .ln{position:relative;width:120px;height:1px;background:var(--color-secondary);opacity:.85}
.orn-divider .ln::before,.orn-divider .ln::after{
  content:'';position:absolute;top:-2.5px;width:6px;height:6px;border:1px solid var(--color-secondary);
  border-radius:50%;background:var(--v2-cream);
}
.orn-divider .ln::before{left:0}
.orn-divider .ln::after{right:0}
.orn-divider .dot{width:12px;height:12px;border:1.5px solid var(--color-secondary);border-radius:50%;flex:none}

.seva-section{padding:var(--space-xl) 0;background:var(--v2-band-seva);border-top:1px solid var(--color-border)}
.seva-layout{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;align-items:stretch}
.seva-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.seva-card{
  background:#F6EDE2;border-radius:14px;padding:1.6rem 1.7rem 1.7rem;
  display:flex;flex-direction:column;transition:all var(--transition-normal);
  border:1px solid rgba(224,200,138,.55);
}
.seva-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);background:#FBF5EC}
.seva-card .ic{font-size:2.3rem;color:var(--color-primary);line-height:1;margin-bottom:.9rem}
.seva-card h3{font-family:var(--font-tamil-tiro);font-size:1.3rem;color:var(--color-primary-dark);line-height:1.5;margin-bottom:.55rem}
.seva-card p{font-family:var(--font-tamil-noto);font-size:.98rem;color:var(--color-text-muted);line-height:1.9;flex:1;margin-bottom:1.2rem}
.seva-btn{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-tamil-noto);font-size:.98rem;line-height:1.7;padding:.32rem 1.1rem;
}
.seva-btn .arw{
  width:20px;height:20px;border:1px solid currentColor;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1;
  transition:transform var(--transition-fast);
}
.seva-btn:hover .arw{transform:translateX(2px)}

.seva-panel{
  position:relative;border-radius:14px;overflow:hidden;min-height:100%;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.seva-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seva-panel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(244,233,215,.55) 0%,rgba(125,43,43,.55) 100%);
}
.seva-panel .pcontent{position:relative;z-index:2;padding:1.8rem}
.seva-panel h3{
  font-family:var(--font-tamil-tiro);font-size:1.35rem;color:#fff;line-height:1.6;
  text-shadow:0 2px 10px rgba(0,0,0,.5);margin-bottom:1.1rem;
}
.seva-panel .pbtn{
  display:inline-block;font-family:var(--font-tamil-noto);font-size:.98rem;line-height:1.7;padding:.32rem 1.3rem;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1100px){
  .home-grid{grid-template-columns:1fr}
  .home-side{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}
  .seva-layout{grid-template-columns:1fr}
  .seva-panel{min-height:260px}
}
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .about-photo{min-height:360px}
  .news-item{grid-template-columns:200px 1fr}
}
@media (max-width:640px){
  .home-side{grid-template-columns:1fr}
  .seva-cards{grid-template-columns:1fr}
  .news-item{grid-template-columns:1fr}
  .news-item .body{padding:1rem 1.2rem}
  .news-item .thumb{height:200px}
  .news-feature .media{height:240px}
}

/* --- "சமீபத்திய செய்திகள்" sub-heading between upcoming events and news --- */
.col-head.is-sub{margin-top:2.4rem}
.col-head.is-sub h3{font-family:var(--font-tamil-tiro);color:var(--color-primary);font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.4}