/* card-polish.css (26 Oct 2026, owner: "professional card design on all pages")
   One finishing layer for the cards on every exam, hub, MSU, BBA / IPM, MCA, bank, city and local page. It only changes how cards LOOK
   (corner radius, soft light on top, hover lift, icon chips, a little more readable text). It never changes widths, grids or heights.
   Loaded from includes/footer.php after type-fixes.css. Inline styles on a card still win, so special coloured cards keep their colours. */

/* 1. Common finish for every card class the site uses */
.elig-card,.syl-card,.card,.ftc-card,.prog-card,.salary-card,.gdpi-card,.compare-card,.why-card,.branch-card,.tkc-card,.score-card,
.fac-card,.topcol-card,.story-card,.step-card,.path-msu-card,.preview-card{
  border-radius:20px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 60%);
  transition:opacity .6s ease,transform .3s ease,border-color .2s ease,box-shadow .2s ease;
}
.elig-card:hover,.syl-card:hover,.card:hover,.ftc-card:hover,.prog-card:hover,.salary-card:hover,.gdpi-card:hover,.compare-card:hover,
.why-card:hover,.branch-card:hover,.tkc-card:hover,.score-card:hover,.fac-card:hover,.topcol-card:hover,.story-card:hover,.step-card:hover,
.path-msu-card:hover,.preview-card:hover{
  transform:translateY(-3px);
  border-color:rgba(232,162,48,.45);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}

/* 2. "Eligibility / why / who" cards (the most common card on the exam pages): icon chip + clearer text */
.elig-card{padding:24px;gap:16px;align-items:flex-start}
.elig-icon{width:44px;height:44px;border-radius:13px;font-size:18px;font-weight:800;color:#0b1630;background:linear-gradient(135deg,var(--ember2),var(--ember))}
.elig-card:nth-child(3n+2) .elig-icon{background:linear-gradient(135deg,#5eead4,#0abfbc)}
.elig-card:nth-child(3n+3) .elig-icon{background:linear-gradient(135deg,#a5b8ff,#6f93ff)}
.elig-icon:empty::before{content:"\2713"}  /* many cards have an empty icon box: show a check mark instead of a blank coloured square */
.elig-title{font-size:15.5px;line-height:1.35;margin-bottom:6px}
.elig-desc{font-size:13.5px;line-height:1.65}

/* 3. Syllabus cards */
.syl-card{padding:28px}
.syl-card-title{font-size:16px}

/* 3b. Syllabus card grids (26-27 Oct 2026, owner: "extra space inside the syllabus cards, set it properly on all pages").
   The old grid stretched every card to the height of the tallest card in its row, so a short card (3-4 topics) sat in a tall box with
   hundreds of px of empty space under its list (up to ~560px on /mba/cmat). The cards now flow into balanced columns instead
   (a short card is followed by the next card under it, no row stretching), so each card is exactly as tall as its content.
   3 columns on desktop, 2 columns up to 880px, 1 on phones. A grid of 2 or 4 cards uses 2 columns (no empty third column, no lone card in a row);
   pages that asked for 1 / 2 / 4 columns in an inline style keep that. Cards are not split across columns. */
.syl-grid{display:block;column-count:3;column-gap:20px}
.syl-grid>.syl-card{display:block;width:100%;box-sizing:border-box;margin:0 0 20px;break-inside:avoid;page-break-inside:avoid;-webkit-column-break-inside:avoid}
/* when newassets/js/common/syl-balance.js has packed the cards into balanced columns (desktop only), the grid is a real grid of .syl-col stacks */
.syl-grid.syl-packed{display:grid;column-count:auto;gap:20px;align-items:start}
.syl-grid.syl-packed>.syl-card,.syl-grid.syl-packed .syl-col>.syl-card{margin:0}
.syl-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.syl-grid.syl-grid-2,
.syl-grid:has(>.syl-card:nth-child(2):last-child),
.syl-grid:has(>.syl-card:nth-child(4):last-child),
.syl-grid[style*="repeat(2,1fr)"]{column-count:2}
.syl-grid[style*="grid-template-columns:1fr"]{column-count:1}
.syl-grid[style*="repeat(4,1fr)"]{column-count:4}
@media(max-width:1179px){.syl-grid[style*="repeat(4,1fr)"]{column-count:2}}
@media(max-width:880px){.syl-grid,.syl-grid:has(>.syl-card:nth-child(2):last-child),.syl-grid:has(>.syl-card:nth-child(4):last-child){column-count:2}.syl-grid[style*="grid-template-columns:1fr"]{column-count:1}}
@media(max-width:560px){.syl-grid,.syl-grid.syl-grid-2,.syl-grid:has(>.syl-card:nth-child(2):last-child),.syl-grid:has(>.syl-card:nth-child(4):last-child),.syl-grid[style*="repeat(2,1fr)"],.syl-grid[style*="repeat(4,1fr)"]{column-count:1}}

/* 3c. A short last row is centred, never a lone card in the corner (27 Oct 2026).
   "Eligibility / why / who" grids are 2 columns: an odd last card now sits centred at the same width as the others.
   "Related" card grids are 3 columns on desktop and 2 on tablet: a last row of 1 or 2 cards is centred (6-column / 4-column trick, cards span 2).
   Grids that set their own columns in an inline style, and the flex rows of the XAT DM page, are left alone. */
@media(min-width:701px){
  .elig-grid:not(.xd-flex):not([style*="grid-template-columns"])>.elig-card:last-child:nth-child(odd):not(:first-child){grid-column:1/-1;justify-self:center;width:calc(50% - 9px);box-sizing:border-box}
}
@media(min-width:761px){
  .related-exams-grid:not([style*="grid-template-columns"]){grid-template-columns:repeat(6,minmax(0,1fr))}
  .related-exams-grid:not([style*="grid-template-columns"])>*{grid-column:span 2}
  .related-exams-grid:not([style*="grid-template-columns"])>:last-child:nth-child(3n+1):not(:first-child){grid-column:3/5}
  .related-exams-grid:not([style*="grid-template-columns"])>:nth-last-child(2):nth-child(3n+1){grid-column:2/4}
  .related-exams-grid:not([style*="grid-template-columns"])>:last-child:nth-child(3n+2):not(:first-child){grid-column:4/6}
  .related-exams-grid:not([style*="grid-template-columns"])>:only-child{grid-column:1/-1}
}
@media(min-width:561px) and (max-width:760px){
  .related-exams-grid:not([style*="grid-template-columns"]){grid-template-columns:repeat(4,minmax(0,1fr))}
  .related-exams-grid:not([style*="grid-template-columns"])>*{grid-column:span 2}
  .related-exams-grid:not([style*="grid-template-columns"])>:last-child:nth-child(odd):not(:first-child){grid-column:2/4}
}

/* 3c-2. A card never pushes its grid wider than the screen (a long word or a table inside a card used to widen the whole column on phones: /bank/rbi, /bank/railway) */
.elig-grid>*,.related-exams-grid>*,.why-grid>*,.syl-col>*{min-width:0}
.elig-desc,.elig-title,.why-desc{overflow-wrap:anywhere}

/* 3c-3. Mobile / tablet audit, 27 Oct 2026 (106 pages scanned at 375 and 768 px).
   (a) The same "centre the lone last card" rule for the remaining 2-column grids: salary cards, home pricing trio, Career Counselling benefits, XAT DM batches,
       and the inline auto-fit trios on /surat, /vadodara. (b) Career Counselling grid: the 7th card of a 3-column row sits in the middle.
   (c) Pill tabs, stories arrows and small badges reach a comfortable touch / reading size. */
@media(min-width:561px) and (max-width:900px){
  .salary-grid>:last-child:nth-child(odd):not(:first-child),
  .tk-pricing-grid-3>:last-child:nth-child(odd):not(:first-child),
  #cc-app .cc-benefits-grid>:last-child:nth-child(odd):not(:first-child){grid-column:1/-1;justify-self:center;width:calc(50% - 10px);box-sizing:border-box}
}
@media(min-width:521px) and (max-width:820px){
  .xd-batches>:last-child:nth-child(odd):not(:first-child){grid-column:1/-1;justify-self:center;width:calc(50% - 8px);box-sizing:border-box}
}
@media(min-width:561px) and (max-width:780px){
  div[style*="auto-fit"]>:nth-child(3):last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 10px);box-sizing:border-box}
}
@media(min-width:900px){
  #cc-app .cc-benefits-grid>:last-child:nth-child(3n+1):not(:first-child){grid-column:2}
}
/* .btn-violet only existed inside mca.css and one inline style (MSU hub): every other page that used it (MCA exam pages, BBA hub) showed a flat 24px text button */
.btn-violet{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;padding:14px 28px;font-weight:700;box-shadow:0 4px 20px rgba(124,58,237,.3)}
.btn-violet:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(124,58,237,.42)}
.btn-violet.btn-lg{padding:16px 32px}
@media(max-width:900px){
  .svp-tab,.prog-tab,.cutoff-year{min-height:40px}
  .stories-nav{width:40px;height:40px}
}

/* 3d. Call-to-action buttons sit on the same line along the bottom of every programme / branch card in a row */
.prog-card,.branch-card{display:flex;flex-direction:column}
.prog-card>a.btn,.branch-card>a.btn{margin-top:auto}

/* 4. The "at a glance" card in every exam hero and the lead form: a soft amber glow at the top */
.exam-quick-card{
  border-radius:22px;
  background-image:linear-gradient(180deg,rgba(232,162,48,.09),rgba(232,162,48,0) 45%);
}
.lead-form-wrap{
  border-radius:22px;
  background-image:linear-gradient(180deg,rgba(232,162,48,.07),rgba(232,162,48,0) 40%);
}

/* 5. Related-exam cards (links) keep a readable focus ring for keyboard users */
.card:focus-visible{outline:2px solid var(--ember,#e8a230);outline-offset:3px}

/* 5b. Phone / tablet rendering cost (30 Oct 2026). Search Console Core Web Vitals (30 Oct): 71 mobile URLs have an INP above 200 ms. A lab test showed
   almost no script time on taps (0-6 ms) but a long wait before the next paint, so the likely cost is rendering. The fixed top bar, the sticky sub-nav and the
   bottom call bars blur whatever scrolls behind them (backdrop-filter) on every frame, although their backgrounds are already 94-97% opaque, so the blur is
   invisible; and a few dots / buttons animate box-shadow forever (repaints). Both are removed up to 900 px wide; desktop looks exactly as before. */
@media(max-width:900px){
  nav,.subnav,.mobile-cta,.bk-sticky{-webkit-backdrop-filter:none;backdrop-filter:none}
  #mobileCta,.mobile-cta{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} /* the home / city pages set it in an inline style */
  .wa-pulse,.hero-live-dot,.live-dot{animation:none}
}
/* 5c. Mobile / tablet audit 30 Oct 2026 (109 pages at 320, 414, 768 px): no page scrolls sideways; three small things fixed.
   (a) On a 320 px phone the top bar content was wider than its padding, so the "Call Us" button ended 2 px from the screen edge (24 px at 375 px): everything
   in the bar is a little smaller up to 359 px. (b) A long word with slashes in a card title ("General/Economy/Banking Awareness", /bank/sbi and /bank/lic)
   stuck out of its card at 320 px: card titles may now break. (c) 10 / 10.5 px labels set inline or in a class are raised to 11 px. */
@media(max-width:359px){
  nav{padding:0 12px;gap:8px}
  .nav-logo img{height:30px}
  .nav-actions{gap:4px}
  .nav-actions .btn-call{font-size:11px;padding:6px 10px;min-height:36px}
  .nav-hamburger{padding:15px 8px;margin-left:0}
}
.syl-card-title,.syl-card-meta,.syl-card-head>div{min-width:0;overflow-wrap:anywhere}
@media(max-width:900px){
  [style*="font-size:10.5px"],[style*="font-size:10px"],.story-result-label,.sc-label{font-size:11px!important}
}
/* 5d. City page heroes (Surat, Vadodara, Vapi, Valsad, Ahmedabad, Rajkot), 30 Oct 2026. The two hero buttons sit side by side with the same width and height on phones
   (they used to stack with different widths), and the exam-tag chips that scroll sideways fade out at the right edge so a half-cut chip reads as "scroll" and not as a bug. */
@media(max-width:700px){
  .hero-ctas-pair{display:flex;flex-wrap:nowrap;gap:10px}
  .hero-ctas-pair>.btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;white-space:normal;line-height:1.25;padding:14px 10px;font-size:14px;min-height:52px}
}
@media(max-width:600px){
  /* the longer tag line (CAT, XAT, NMAT, CMAT, IPMAT & BBA ...) wraps in a calm rounded box instead of a tall pill, and the hero uses 20 px side padding */
  .hero-inner:has(.hero-ctas-pair){padding:0 20px}
  .hero-inner:has(.hero-ctas-pair) .hero-kicker{white-space:normal;border-radius:14px;padding:8px 14px;font-size:11px;line-height:1.5;letter-spacing:.04em;align-items:flex-start}
  .hero-inner:has(.hero-ctas-pair) .hero-kicker-dot{margin-top:5px;flex-shrink:0}
  .hero-ctas-pair ~ .hero-exams{-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);mask-image:linear-gradient(90deg,#000 84%,transparent);padding-right:24px}
}
/* 5e. Centre card and Google map side by side (30 Oct 2026, /rajkot "Nearest centre"): two equal columns of equal height, stacked on phones and small tablets. */
.centre-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:980px;margin:0 auto;align-items:stretch}
.centre-pair>.branch-card{margin:0;height:100%;box-sizing:border-box}
.centre-pair>.centre-map{border-radius:16px;overflow:hidden;border:1px solid var(--edge);min-height:340px;display:flex}
.centre-pair>.centre-map iframe{flex:1 1 auto;width:100%;height:100%;min-height:340px;display:block;border:0}
@media(max-width:760px){
  .centre-pair{grid-template-columns:1fr;gap:20px;max-width:520px}
  .centre-pair>.centre-map,.centre-pair>.centre-map iframe{min-height:260px}
}
/* People who ask for less motion get no endless animations at all */
@media (prefers-reduced-motion:reduce){
  .wa-pulse,.hero-live-dot,.hero-kicker-dot,.exam-hero-badge .dot,.flame-main,.flame-inner{animation:none}
}

/* 6. People who ask for less motion get no lift */
@media (prefers-reduced-motion:reduce){
  .elig-card:hover,.syl-card:hover,.card:hover,.ftc-card:hover,.prog-card:hover,.salary-card:hover,.gdpi-card:hover,.compare-card:hover,
  .why-card:hover,.branch-card:hover,.tkc-card:hover,.score-card:hover,.fac-card:hover,.topcol-card:hover,.story-card:hover,.step-card:hover,
  .path-msu-card:hover,.preview-card:hover{transform:none}
}