/* ============================================================
   BTECHBRO COMPONENTS

   Row cards, the four-route table, the centred hero's rank strip, and two
   shared bits (.caveat, .highlight-list) that came from the sister site's
   college-page.css — which this project does not ship, since it has no
   college detail pages. This file is loaded on EVERY page: those two are used
   on about/contact too, and loading it per-page is how they shipped unstyled
   once already.
   ============================================================ */

/* ---------- Caveat note ----------
   Lives here rather than in an inherited college-page.css: this site has no
   college detail pages, so btech.css is the only stylesheet that ships with
   the .caveat markup. Without the explicit svg sizing an inline icon renders
   at its intrinsic size and blows the page apart. */

.caveat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 14px 16px;
  margin-top: var(--space-md);
  background: var(--gold-50);
  border: 1px solid var(--gold-100);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--gold-dark);
}
.caveat svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 1px;
}
.caveat strong { color: var(--gold-dark); }

/* ---------- Highlight list (about + contact) ----------
   Same reason as .caveat above: the markup ships on this site but the
   stylesheet that defined it did not. The svg sizing is load-bearing. */

.highlight-list { display: grid; gap: var(--space-sm); }
.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 12px 14px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-dark-secondary);
}
.highlight-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gold-dark);
}

/* ============================================================
   ROW CARDS — Ways2College's own college layout.

   Deliberately NOT the sister site's vertical card: this is a wide row with a
   fixed identity rail on the left, a meta block in the middle and the CTA
   pinned right. Two reasons beyond "look different": these colleges have no
   numeric facts to fill a 2x2 grid with, and a single-column list reads as a
   shortlist a counsellor would hand you, which is what the site actually sells.
   ============================================================ */

.cc-list {
  display: grid;
  gap: var(--space-md);
}

.cc {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  align-items: stretch;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-smooth),
              box-shadow var(--duration-fast) var(--ease-smooth);
}
.cc:hover {
  border-color: var(--primary-200);
  box-shadow: var(--shadow-card);
}

/* Identity rail */
.cc-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-lg) var(--space-md);
  background: var(--bg-dark);
  border-right: 3px solid var(--gold);   /* the one hit of accent per card */
  color: #fff;
  overflow: hidden;
}
.cc-mark {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
}
.cc-est {
  position: relative;
  font-size: var(--text-xs);
  color: var(--gold-light);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Body */
.cc-body {
  padding: var(--space-lg);
  min-width: 0;
}
.cc-title {
  font-size: var(--text-lg);
  line-height: 1.3;
  margin-bottom: 4px;
}
.cc-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-dark-tertiary);
}
.cc-sub svg { width: 14px; height: 14px; color: var(--gold-dark); }
.cc-dot { color: var(--border-color); }

.cc-meta {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
}
.cc-meta > div {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: var(--space-sm);
}
.cc-meta dt {
  color: var(--text-dark-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 2px;
}
.cc-meta dd {
  margin: 0;
  color: var(--text-dark);
  font-weight: 500;
  line-height: 1.45;
}

.cc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cc-fee {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--text-dark-tertiary);
}

/* CTA column */
.cc-act {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-left: 1px dashed var(--border-color);
  background: var(--bg-light);
}
.cc-act .btn { white-space: nowrap; }

@media (max-width: 860px) {
  .cc { grid-template-columns: 92px 1fr; }
  .cc-act {
    grid-column: 1 / -1;
    flex-direction: row;
    border-left: 0;
    border-top: 1px dashed var(--border-color);
    padding: var(--space-md);
  }
  .cc-act .btn { width: 100%; }
}

@media (max-width: 560px) {
  .cc { grid-template-columns: 1fr; }
  .cc-rail {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-sm);
    padding: 10px var(--space-md);
  }
  .cc-body { padding: var(--space-md); }
  .cc-meta > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   ROUTE TABLE — the four admission routes side by side.

   This is Ways2College's centrepiece and has no counterpart on the sister site.
   The single most valuable thing we can give an engineering family for free is
   a straight comparison of KCET / COMEDK / JEE / management, because picking
   the wrong one costs a year. A table, not four prose cards: families are
   comparing across the same axes, which is exactly what a table is for.
   ============================================================ */

.route-wrap {
  overflow-x: auto;                 /* wide table scrolls itself, never the body */
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: var(--bg-dark-alt);
}

.route-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.route-table th,
.route-table td {
  padding: 14px var(--space-md);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.route-table thead th {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: #fff;
  background: var(--bg-dark-accent);
  white-space: nowrap;
}
.route-table thead th span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--gold-light);
  margin-top: 2px;
}
.route-table tbody th {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.route-table td { color: var(--text-secondary); line-height: 1.55; }
.route-table tbody tr:last-child th,
.route-table tbody tr:last-child td { border-bottom: 0; }
.route-table .cost { color: var(--gold-light); font-weight: 700; }

.route-hint {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ---------- Hero: centred, no side card ---------- */

.hero-solo {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.hero-solo .hero-lede { margin-inline: auto; }
.hero-solo .hero-cta,
.hero-solo .hero-trust { justify-content: center; }


/* ============================================================
   ABOUT — credibility strip + map embed
   ============================================================ */
.about-cred {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-md);
}
.about-cred-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-lg);
  background: #fff;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-lg);
}
.about-cred-val {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.35rem; line-height: 1.1;
  color: var(--text-dark);
}
.about-cred-stars { display: inline-flex; gap: 1px; }
.about-cred-stars svg { width: 15px; height: 15px; color: var(--gold); }
.about-cred-key {
  font-size: var(--text-sm);
  color: var(--text-dark-tertiary);
}

.map-embed {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--primary-100);
  box-shadow: var(--shadow-md);
  min-height: 300px;
}
.map-embed iframe { display: block; width: 100%; height: 100%; }

@media (max-width: 760px) {
  .map-embed { aspect-ratio: 16 / 10; min-height: 240px; }
}