/* =========================================================
   PLACEMENT PAGE — page-specific only.
   Loaded solely by placement.php via $pageExtraCss.

   Deliberately a different layout from syllabus.css /
   course-outcomes.css / academic-calendar.css: no sidebar, no
   list rows. Instead, a large typographic "year tile" grid
   grouped by decade — the year number itself is the visual
   anchor, closer to an archive/timeline feel than a document list.
   ========================================================= */

.pl-section{ padding:72px 0 96px; }

.pl-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.76rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-700); margin-bottom:12px;
}
.pl-kicker::before{ content:''; width:22px; height:2px; background:var(--gold-500); }

.pl-heading{
  font-size:clamp(1.55rem, 2.4vw, 2.1rem);
  font-weight:800; color:var(--green-900); max-width:680px; margin:0 0 14px;
}
.pl-lede{
  max-width:680px;
  font-size:1rem; line-height:1.75; color:var(--ink-soft);
  margin:0 0 52px;
}

/* ---- Decade grouping ---- */
.pl-decade{ margin-bottom:52px; }
.pl-decade:last-child{ margin-bottom:0; }

.pl-decade-label{
  display:flex;
  align-items:center;
  gap:16px;
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:1.1rem;
  color:var(--green-800);
  letter-spacing:.02em;
  margin-bottom:22px;
}
.pl-decade-label span{
  flex:1;
  height:1px;
  background:var(--line);
}

/* ---- Year tile grid ---- */
.pl-year-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:16px;
}

.pl-year-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  min-height:150px;
  padding:24px 22px;
  border-radius:var(--radius-lg);
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.pl-year-tile::after{
  content:'';
  position:absolute;
  right:-18px; bottom:-18px;
  width:80px; height:80px;
  border-radius:50%;
  background:var(--green-100);
  transition:background .2s ease, transform .2s ease;
  z-index:0;
}
.pl-year-tile > *{ position:relative; z-index:1; }

.pl-year-num{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:2rem;
  color:var(--green-900);
  line-height:1;
}

.pl-year-cta{
  display:flex; align-items:center; gap:6px;
  font-size:.8rem; font-weight:700;
  color:var(--green-700);
}
.pl-year-cta svg{ width:14px; height:14px; transition:transform .15s ease; }

a.pl-year-tile:hover{
  transform:translateY(-4px);
  border-color:var(--green-800);
  box-shadow:0 18px 34px -16px rgba(10,61,38,.35);
}
a.pl-year-tile:hover::after{ background:var(--gold-500); opacity:.22; transform:scale(1.15); }
a.pl-year-tile:hover .pl-year-cta{ color:var(--green-900); }
a.pl-year-tile:hover .pl-year-cta svg{ transform:translateX(3px); }
a.pl-year-tile:hover .pl-year-num{ color:var(--green-800); }

/* ---- Unavailable / coming-soon tile ---- */
.pl-year-tile--soon{
  background:var(--cream);
  border-style:dashed;
  cursor:default;
}
.pl-year-tile--soon .pl-year-num{ color:var(--ink-soft); opacity:.7; }
.pl-year-tile--soon::after{ background:transparent; }
.pl-year-badge{
  align-self:flex-start;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 12px;
}

@media (max-width:480px){
  .pl-year-grid{ grid-template-columns:repeat(2, 1fr); }
  .pl-year-num{ font-size:1.7rem; }
}