/* ============================================================
   Placement.css
   Shared styles for /Placement/PlacementPartners.aspx,
   InternshipOpportunities.aspx and CareerGuidance.aspx.
   Everything is scoped under .placement-page so it cannot
   collide with rules in Styles/College.css.
   ============================================================ */

.placement-page{
  --ink:#1B2A4A;
  --paper:#F7F3EC;
  --paper-white:#FFFDF9;
  --brass:#C89B3C;
  --teal:#2F6F62;
  --charcoal:#22262B;
  --line:#D8CFC0;
  --margin-red:#B5563F;

  text-align:left;
  max-width:1040px;
  margin:0 auto;
  padding:24px 20px 60px;
  font-family:'Inter', Arial, sans-serif;
  color:var(--charcoal);
  line-height:1.55;
}
.placement-page *{box-sizing:border-box;}
.placement-page h1, .placement-page h2, .placement-page h3{
  font-family:'Fraunces', Georgia, serif; color:var(--ink); font-weight:600; margin:0;
}
.placement-page a{color:var(--teal);}
.placement-page .mono{font-family:'IBM Plex Mono', monospace;}

/* ---- local sub-nav (wayfinding across the 3 pages) ---- */
.placement-subnav{
  display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 34px;
  border-bottom:1px solid var(--line); padding-bottom:14px;
}
.placement-subnav a{
  font-size:0.86rem; font-weight:600; color:var(--ink);
  padding:8px 16px; border:1px solid var(--line); border-radius:20px;
  text-decoration:none; background:var(--paper-white);
}
.placement-subnav a:hover{border-color:var(--teal); color:var(--teal);}
.placement-subnav a.active{background:var(--ink); border-color:var(--ink); color:var(--paper-white);}

.placement-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--teal); font-weight:600;
}
.placement-page h1{font-size:clamp(1.9rem, 4vw, 2.6rem); line-height:1.15; margin:10px 0 12px;}
.placement-lede{max-width:640px; color:#454b52; font-size:1rem; margin-bottom:8px;}

/* ---- ledger stat board (used on Placement Partners page) ---- */
.ledger{
  margin-top:36px; background:var(--paper-white); border:1px solid var(--line);
  box-shadow:0 14px 30px rgba(27,42,74,0.08); overflow:hidden;
}
.ledger-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px 14px 52px; border-bottom:1px solid var(--line); background:var(--paper);
}
.ledger-head h3{font-size:0.95rem;}
.ledger-body{position:relative; padding:6px 24px 6px 52px;
  background-image:repeating-linear-gradient(var(--paper-white) 0px, var(--paper-white) 54px, var(--line) 55px);}
.ledger-body::before{content:""; position:absolute; left:32px; top:0; bottom:0; width:1.5px; background:var(--margin-red); opacity:.55;}
.ledger-row{display:grid; grid-template-columns:1fr auto; align-items:center; height:54px;}
.ledger-row .label{font-size:0.9rem; font-weight:500;}
.ledger-row .label small{display:block; font-family:'IBM Plex Mono', monospace; font-size:0.64rem; color:#8a8478;}
.ledger-row .stat{font-family:'IBM Plex Mono', monospace; font-size:1.25rem; font-weight:600; color:var(--brass);}
.ledger-row .stat.teal{color:var(--teal);}

/* ---- partner cards ---- */
.partner-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px; margin-top:32px;}
.partner-card{border:1px solid var(--line); background:var(--paper-white); padding:18px 16px; position:relative;}
.partner-card .sector{font-family:'IBM Plex Mono', monospace; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal); display:block; margin-bottom:4px;}
.partner-card .pname{font-family:'Fraunces', serif; font-size:1.02rem; font-weight:600; color:var(--ink);}
.partner-card .pin{position:absolute; top:-6px; right:14px; width:11px; height:11px; border-radius:50%; background:var(--margin-red); box-shadow:0 2px 3px rgba(0,0,0,.25);}

/* ---- internship listing table ---- */
.intern-list{border:1px solid var(--line); background:var(--paper-white); margin-top:28px;}
.intern-head{display:grid; grid-template-columns:1.6fr 1fr 1fr auto; gap:14px; padding:10px 20px;
  background:var(--paper); font-family:'IBM Plex Mono', monospace; font-size:0.64rem; letter-spacing:0.08em;
  text-transform:uppercase; color:#8a8478;}
.intern-row{display:grid; grid-template-columns:1.6fr 1fr 1fr auto; gap:14px; align-items:center; padding:16px 20px; border-top:1px solid var(--line);}
.intern-row .role{font-weight:600; color:var(--ink); font-size:0.92rem;}
.intern-row .meta{font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:#6b655a;}
.intern-row .apply{justify-self:end; font-size:0.8rem; font-weight:600; color:var(--teal); border:1px solid var(--teal);
  padding:7px 14px; border-radius:18px; white-space:nowrap; text-decoration:none;}
.intern-row .apply:hover{background:var(--teal); color:var(--paper-white);}

/* ---- career guidance cards ---- */
.guidance-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; margin-top:30px;}
.guidance-card{border:1px solid var(--line); background:var(--paper-white); padding:22px 20px;}
.guidance-card .num{font-family:'IBM Plex Mono', monospace; color:var(--brass); font-size:0.78rem; font-weight:600;}
.guidance-card h3{font-size:1.05rem; margin:8px 0 6px;}
.guidance-card p{font-size:0.9rem; color:#5b564c; margin:0;}

.placement-cta{
  margin-top:44px; background:var(--ink); color:var(--paper-white); padding:28px 26px;
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
}
.placement-cta h3{color:var(--paper-white); font-size:1.15rem;}
.placement-cta p{color:#cdd3e0; font-size:0.88rem; margin:4px 0 0;}
.placement-cta a{background:var(--brass); color:var(--ink); font-weight:700; padding:11px 20px;
  border-radius:2px; font-size:0.86rem; text-decoration:none; white-space:nowrap;}

.placement-note{margin-top:14px; font-size:0.8rem; color:#8a8478;}

@media (max-width:700px){
  .intern-head{display:none;}
  .intern-row{grid-template-columns:1fr; gap:4px;}
  .intern-row .apply{justify-self:start; margin-top:6px;}
  .ledger-head, .ledger-body{padding-left:36px;}
  .ledger-body::before{left:20px;}
}