/* Guides index and article (Guides Index v2 / Guide Article v2).
   The navy head, wrap2 and prose base come from vp.css; only the pieces
   unique to guides live here. */

/* ---------------------------------------------------------------- index */

.gidx .gwrap{padding-top:40px;padding-bottom:64px;}

.ghint{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:13px;color:rgba(255,255,255,.6);}
.ghint i{width:15px;height:15px;color:#A5A7F7;}

.gfilters{display:flex;gap:9px;flex-wrap:wrap;padding-bottom:4px;}
.gfilters a{flex:none;border:1px solid var(--line2);color:#45526B;font-size:13px;font-weight:500;padding:9px 16px;border-radius:999px;text-decoration:none;}
.gfilters a:hover{border-color:var(--primary);color:var(--primary-d);}
.gfilters a.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600;}

.gsect{margin-top:30px;display:flex;align-items:baseline;gap:12px;}
.gsect .k{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#4338CA;}
.gsect .n{font-size:12.5px;color:var(--muted);}

/* featured (most recent) */
.gfeature{margin-top:14px;display:grid;grid-template-columns:1.05fr 1fr;border:1px solid var(--line2);border-radius:14px;overflow:hidden;color:inherit;text-decoration:none;background:var(--card);}
.gfeature:hover{border-color:var(--primary);}
.gfeature .cover{position:relative;background:linear-gradient(135deg,#6468F0,#312D84);min-height:300px;overflow:hidden;display:flex;align-items:flex-end;padding:26px;}
.gfeature .cover img.mark{position:absolute;right:-34px;bottom:-40px;width:210px;opacity:.16;filter:brightness(0) invert(1);}
.gfeature .cover .glow{position:absolute;top:-90px;left:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.24),rgba(255,255,255,0) 68%);}
.gfeature .cover .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.gfeature .cover .tag{position:relative;display:flex;align-items:center;gap:11px;color:#fff;}
.gfeature .cover .tag .ic{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);display:inline-flex;align-items:center;justify-content:center;flex:none;}
.gfeature .cover .tag .t{font-size:13.5px;font-weight:600;line-height:1.4;}
.gfeature .cover .tag .t span{font-weight:400;color:rgba(255,255,255,.72);}
.gfeature .txt{padding:30px 32px;display:flex;flex-direction:column;}
.gfeature h2{margin:14px 0 0;font-size:26px;line-height:1.3;font-weight:600;letter-spacing:-.025em;color:var(--ink);}
.gfeature .tam2{margin-top:9px;font-family:'Noto Sans Tamil',Inter,sans-serif;font-size:15px;font-weight:500;color:#4338CA;}
.gfeature p{margin:12px 0 0;font-size:14.5px;line-height:1.75;color:#45526B;}
.gfeature .foot{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:22px;font-size:12.5px;color:var(--muted);}
.gfeature .foot .go{margin-left:auto;font-size:13px;font-weight:600;color:#4338CA;}

.gpills{display:flex;align-items:center;gap:10px;}
.gpill{background:var(--primary-sub);color:#4338CA;font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:999px;}
.gnew{display:inline-flex;align-items:center;gap:5px;background:#EAF7F1;border:1px solid #BFE7D4;color:#0F7A4D;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;}
.gnew i{width:11px;height:11px;}

.gmetarow{display:inline-flex;align-items:center;gap:7px;}
.gmetarow i{width:14px;height:14px;color:#9AA0AE;}

/* card grid */
.ggrid{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.gcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none;background:var(--card);}
.gcard:hover{border-color:var(--primary);}
.gcard .cover{position:relative;background:linear-gradient(140deg,#6468F0,#3B2E86);height:132px;display:flex;align-items:center;justify-content:center;}
.gcard .cover img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.gcard .cover i{width:30px;height:30px;color:rgba(255,255,255,.92);}
.gcard .cover .tag{position:absolute;top:11px;left:11px;background:rgba(255,255,255,.94);color:var(--ink);font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;}
.gcard .txt{padding:18px 20px;display:flex;flex-direction:column;flex:1;}
.gcard.plain .txt{padding:22px;}
.gcard .gpill{align-self:flex-start;font-size:11px;padding:4px 10px;}
.gcard h3{margin:0;font-size:16.5px;line-height:1.4;font-weight:600;letter-spacing:-.015em;color:var(--ink);}
.gcard.plain h3{margin-top:14px;}
.gcard .tam3{margin-top:7px;font-family:'Noto Sans Tamil',Inter,sans-serif;font-size:13px;font-weight:500;color:#4338CA;}
.gcard p{margin:8px 0 0;font-size:13.5px;line-height:1.7;color:var(--muted);}
.gcard .foot{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:16px;font-size:12px;color:#9AA0AE;}

/* empty state */
.gempty{margin-top:28px;border:1px solid var(--line);border-radius:16px;background:#F8F8F8;padding:56px 40px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.gempty .ic{width:66px;height:66px;border-radius:50%;background:var(--primary-sub);border:1px solid #C9CBFA;color:#4338CA;display:inline-flex;align-items:center;justify-content:center;}
.gempty .ic i{width:29px;height:29px;}
.gempty h2{margin:20px 0 0;font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--ink);}
.gempty .tam2{margin-top:9px;font-family:'Noto Sans Tamil',Inter,sans-serif;font-size:15px;font-weight:500;color:#4338CA;}
.gempty p{margin:12px 0 0;font-size:14.5px;line-height:1.75;color:var(--muted);max-width:440px;}
.gempty .btns{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;justify-content:center;}
.gempty .ask{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:12.5px;color:var(--muted);}
.gempty .ask i{width:14px;height:14px;color:var(--primary);}

/* --------------------------------------------------------------- article */

.gart .crumb{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:rgba(255,255,255,.6);}
.gart .crumb a{color:#A5A7F7;text-decoration:none;}
.gart .crumb i{width:13px;height:13px;}
.gart .pagehead .inner{max-width:800px;padding-bottom:46px;}
.gart .pagehead h1{margin-top:16px;font-size:38px;line-height:1.22;}
.gart .pagehead .tam{font-size:17px;}
.gart .pagehead .lead{max-width:560px;}

.gbyline{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(255,255,255,.72);}
.gbyline .who{display:inline-flex;align-items:center;gap:9px;}
.gbyline .av{width:30px;height:30px;border-radius:50%;background:var(--primary-sub);color:#4338CA;font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;}
.gbyline .who b{font-weight:600;color:#fff;}
.gbyline span.m{display:inline-flex;align-items:center;gap:7px;}
.gbyline i{width:14px;height:14px;color:#A5A7F7;}

.gbody{display:grid;grid-template-columns:270px 1fr;gap:56px;padding-top:44px;padding-bottom:72px;align-items:start;}

.gtoc{position:sticky;top:28px;}
.gtoc .k{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#4338CA;}
.gtoc .items{margin-top:12px;display:flex;flex-direction:column;font-size:13.5px;font-weight:500;}
.gtoc .items a{padding:10px 0;border-top:1px solid #ECEDF1;color:var(--muted);text-decoration:none;}
.gtoc .items a:first-child{color:var(--ink);font-weight:600;}
.gtoc .items a:last-child{border-bottom:1px solid #ECEDF1;}
.gtoc .items a:hover{color:var(--primary-d);}
.gtoc .aside{margin-top:20px;background:#F8F8F8;border:1px solid #ECEDF1;border-left:3px solid var(--primary);border-radius:0 10px 10px 0;padding:14px 18px;font-size:12.5px;line-height:1.65;color:#45526B;}
.gtoc .aside a{font-weight:600;color:#4338CA;text-decoration:none;}

.gtocm{display:none;margin-bottom:26px;border:1px solid var(--line);border-radius:12px;background:#F8F8F8;}
.gtocm summary{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:13.5px;font-weight:600;color:var(--ink);list-style:none;cursor:pointer;}
.gtocm summary::-webkit-details-marker{display:none;}
.gtocm summary i{width:16px;height:16px;color:var(--primary);}
.gtocm summary i.ch{margin-left:auto;color:var(--muted);}
.gtocm .items{display:flex;flex-direction:column;padding:0 18px 12px;font-size:13.5px;font-weight:500;}
.gtocm .items a{padding:9px 0;border-top:1px solid var(--line);color:#45526B;text-decoration:none;}

/* Article prose: same markdown pipeline as the rest of the site, sized for
   long-form reading rather than a course description. */
/* The article column holds the prose and the furniture below it, so the
   measure is set once here rather than on each piece.

   min-width:0 is load-bearing: a grid track's automatic minimum is the
   min-content width of its contents, so a wide code block or table widens the
   whole column and pushes the page into horizontal scroll, even though the
   block itself is set to scroll. Without it the article overflowed by a few
   pixels on a phone, which is where most of this traffic reads. */
.gcol{max-width:680px;min-width:0;}
.gprose{font-size:17px;line-height:1.85;color:#45526B;}
.gprose > p:first-child{font-size:18px;line-height:1.8;color:var(--ink);}
.gprose h2{border-top:none;padding:0 0 10px;margin:38px 0 0;border-bottom:1px solid #ECEDF1;font-size:24px;line-height:1.35;font-weight:600;letter-spacing:-.02em;color:var(--ink);text-transform:none;}
.gprose h3{margin:30px 0 0;font-size:19px;line-height:1.4;font-weight:600;letter-spacing:-.015em;color:var(--ink);}
.gprose p{margin:16px 0 0;}
.gprose ul,.gprose ol{margin:16px 0 0;padding-left:24px;}
.gprose li{margin:8px 0;}
.gprose code{font-family:var(--mono);font-size:.88em;}
.gprose pre{margin:16px 0 0;background:var(--navy);border-radius:12px;padding:20px 22px;overflow-x:auto;}
.gprose pre code{font-family:var(--mono);font-size:14px;line-height:1.9;color:#E8EAF2;background:none;padding:0;}
.gprose blockquote{margin:22px 0 0;border-left:3px solid var(--primary);background:#F8F8F8;border-radius:0 10px 10px 0;padding:18px 24px;font-size:17px;line-height:1.75;color:var(--ink);}
.gprose blockquote p{margin:0;}
.gprose table{margin:0;font-size:14px;}
.gprose th{padding:11px 16px;}
.gprose td{padding:11px 16px;}
.gprose td:first-child,.gprose td:nth-child(2){color:#45526B;font-weight:400;}
.gprose img{margin:20px 0 0;border-radius:12px;}
.gprose hr{margin:32px 0;}
.gprose [lang=ta]{font-family:'Noto Sans Tamil',Inter,sans-serif;color:#4338CA;font-weight:500;}

/* author, CTA, related */
.gauthor{margin-top:44px;border:1px solid var(--line);border-radius:14px;padding:24px 26px;display:flex;gap:18px;align-items:flex-start;background:var(--card);}
.gauthor .av{width:56px;height:56px;flex:none;border-radius:50%;background:var(--primary-sub);color:#4338CA;font-size:22px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;}
.gauthor .k{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.gauthor .nm{margin-top:6px;font-size:17px;font-weight:600;color:var(--ink);}
.gauthor .role{margin-top:3px;font-size:13.5px;font-weight:500;color:#4338CA;}
.gauthor p{margin:10px 0 0;font-size:14px;line-height:1.75;color:var(--muted);}
.gauthor .links{display:flex;gap:16px;margin-top:12px;font-size:13px;font-weight:600;}
.gauthor .links a{display:inline-flex;align-items:center;gap:7px;color:#4338CA;text-decoration:none;}
.gauthor .links i{width:14px;height:14px;}

.gcta{position:relative;margin-top:20px;background:var(--navy);border-radius:14px;padding:28px 30px;overflow:hidden;display:flex;align-items:center;gap:28px;}
.gcta .glow{position:absolute;top:-120px;right:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(100,104,240,.4),rgba(100,104,240,0) 68%);}
.gcta img.mark{position:absolute;right:-30px;bottom:-40px;width:170px;opacity:.1;filter:brightness(0) invert(1);}
.gcta .l{position:relative;flex:1;}
.gcta .k{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#A5A7F7;}
.gcta .h{margin-top:10px;font-size:21px;line-height:1.35;font-weight:600;letter-spacing:-.02em;color:#fff;}
.gcta .d{margin-top:8px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.7);}
.gcta .r{position:relative;flex:none;}
.gcta .price{display:flex;align-items:baseline;gap:9px;}
.gcta .price b{font-size:25px;font-weight:600;color:#fff;letter-spacing:-.02em;}
.gcta .price s{font-size:13.5px;color:rgba(255,255,255,.5);}
.gcta .r .btn{margin-top:12px;width:100%;white-space:nowrap;}
.gcta .note{margin-top:9px;font-size:11.5px;color:rgba(255,255,255,.55);text-align:center;}

.grel{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.grel a{border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;color:inherit;text-decoration:none;background:var(--card);}
.grel a:hover{border-color:var(--primary);}
.grel .t{margin-top:12px;font-size:15px;line-height:1.45;font-weight:600;color:var(--ink);}
.grel .m{margin-top:auto;padding-top:14px;font-size:12px;color:#9AA0AE;}

/* ------------------------------------------------------------ responsive */

@media(max-width:900px){
  .gidx .gwrap{padding-top:32px;padding-bottom:48px;}
  .gfilters{overflow-x:auto;flex-wrap:nowrap;}
  .gfeature{grid-template-columns:1fr;}
  .gfeature .cover{min-height:190px;}
  .gfeature .txt{padding:24px 22px;}
  .gfeature h2{font-size:22px;}
  .ggrid{grid-template-columns:1fr;}

  .gart .pagehead h1{font-size:27px;line-height:1.26;}
  .gbody{grid-template-columns:1fr;gap:0;padding-top:28px;padding-bottom:56px;}
  .gtoc{display:none;}
  .gtocm{display:block;}
  .gcol{max-width:none;}
  .gprose{font-size:16.5px;}
  /* Tables scroll rather than overflow. Desktop keeps them full width. */
  .gprose table{display:block;width:max-content;max-width:100%;overflow-x:auto;}
  .gprose h2{font-size:21px;}
  .gcta{flex-direction:column;align-items:flex-start;gap:20px;}
  .gcta .r{width:100%;}
  .grel{grid-template-columns:1fr;}
  .gauthor{flex-direction:column;}
}