/* ==========================================================================
   Vedic People v3 — hub.css
   Parent/hub (category-index) pages + the homepage's category sections.
   Loaded via functions.php on the front page and any page flagged
   _vp_is_hub_page. The .vedic-* classes below are NOT theme-generated —
   they're the real output of the [vp_children] shortcode / show_child_pages
   ACF field (see vp3_child_pages_articles()/_grid()/_grid_with_categories()
   in functions.php) — this file only supplies their CSS.
   ========================================================================== */

.hub-head{width:90%; margin:0 auto; padding:30px 0 6px; background:var(--paper-deep);}

.hub-intro{width:90%; margin:0 auto; font:400 var(--body-en)/1.5 var(--font-serif); color:var(--ink); padding:0 0 24px; background:var(--paper-deep);}
.hub-intro p{margin:0 0 12px;}

/* [vp_children design="articles"] — bootstrap-style cards, up to 3/row
   (1.5x wider than the previous 5/row layout) */
.vedic-children-articles{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:24px 28px;}
.vedic-article-item{display:block; padding:18px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-card); text-decoration:none; transition:background .15s;}
.vedic-article-item:hover{background:var(--green);}
.vedic-article-title{color:var(--ink); font:600 1.4rem var(--font-serif); text-decoration:none; margin-bottom:8px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;}
.vedic-article-item:hover .vedic-article-title{text-decoration:none; color:#fff;}
/* Capped to 2 lines at any card width so the card always reads landscape
   (wider than tall) rather than growing tall as columns narrow. */
.vedic-article-desc{font:400 1.04rem/1.5 var(--font-serif); color:var(--ink-soft); margin:0; text-decoration:none; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
.vedic-article-item:hover .vedic-article-desc{color:#fff;}

/* [vp_children design="grid"] and gridWithCategories — up to 8/row */
.vedic-children-grid, .vedic-cat-group-grid{display:grid; grid-template-columns:repeat(8,1fr); column-gap:18px; row-gap:36px; padding:24px 28px;}
.vedic-cat-group-grid{padding:0;}
.vedic-grid-item{display:block; text-decoration:none;}
/* Aspect-ratio owned by a wrapper box (not the <img> itself) — combining
   CSS aspect-ratio directly with an <img> that also carries native
   width/height HTML attributes renders inconsistently across browsers at
   some viewport widths (portrait at some sizes, square at others); an
   absolutely-positioned image inside a ratio-locked box is robust regardless. */
.vedic-grid-image-wrap{position:relative; display:block; width:100%; aspect-ratio:212/300; border-radius:var(--radius-md); overflow:hidden;}
.vedic-grid-image{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.vedic-grid-placeholder{position:absolute; inset:0; width:100%; height:100%; background:linear-gradient(150deg,#1c2c4a,#3a5a8a); display:flex; align-items:center; justify-content:center; font-size:2.4rem;}
.vedic-grid-title{display:block; margin-top:12px; font:600 1.12rem var(--font-ui); color:var(--green); text-decoration:none;}
.vedic-grid-item:hover .vedic-grid-title{color:var(--vermilion); text-decoration:none;}

/* [vp_children design="gridWithCategories"] */
.vedic-children-grid-cats{padding:24px 28px;}
.vedic-cat-group{margin-bottom:32px;}
.vedic-cat-group-title{margin:0 0 14px;}
.vedic-cat-group-title a{color:var(--ink); text-decoration:none;}
.vedic-cat-group-title a:hover{color:var(--green);}

@media (max-width: 1400px){
  .vedic-children-grid, .vedic-cat-group-grid{grid-template-columns:repeat(6,1fr);}
}
@media (max-width: 1100px){
  .vedic-children-grid, .vedic-cat-group-grid{grid-template-columns:repeat(4,1fr);}
  .vedic-children-articles{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 960px){
  .vedic-children-grid, .vedic-cat-group-grid, .vedic-children-articles{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 560px){
  .vedic-children-grid, .vedic-cat-group-grid, .vedic-children-articles{grid-template-columns:1fr;}
}