/* =========================================================
   OTHER DETAILS PAGE — page-specific only.
   Loaded solely by other-details.php via $pageExtraCss.

   A flat library of NAAC-supporting PDF documents. The source
   page split these into three columns with no thematic
   grouping, so they're shown here as a single responsive grid
   of download tiles rather than invented categories.
   ========================================================= */

.od-section{ padding:72px 0 88px; }

.od-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;
}
.od-kicker::before{ content:''; width:22px; height:2px; background:var(--gold-500); }

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

/* ---- Document grid ---- */
.od-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.od-tile{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:16px 18px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.od-tile:hover{
  border-color:var(--green-700);
  box-shadow:0 14px 28px -16px rgba(10,61,38,.3);
  transform:translateY(-2px);
}
.od-icon{
  flex-shrink:0;
  width:38px; height:38px;
  border-radius:10px;
  background:var(--green-100);
  color:var(--green-700);
  display:flex;
  align-items:center;
  justify-content:center;
}
.od-icon svg{ width:18px; height:18px; }
.od-name{
  min-width:0; flex:1;
  font-size:.87rem; font-weight:700; color:var(--green-900); line-height:1.4;
}
.od-arrow{
  flex-shrink:0;
  color:var(--green-700);
  transition:transform .15s ease;
}
.od-arrow svg{ width:15px; height:15px; }
.od-tile:hover .od-arrow{ transform:translate(2px,-2px); }

@media (max-width:900px){ .od-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .od-grid{ grid-template-columns:1fr; } }