/* scholarship-detail.css — styles for scholarship-details.html (read-only detail
   view) AND s.html (the application form). The sdp-* prefix is used by the
   detail view; sd-* / sd-detail are used by the application form. */

/* ======================================================
   scholarship-details-page.js rendered components (sdp-*)
   ====================================================== */

/* layout root */
.sdp-root { display: flex; flex-direction: column; gap: 16px; }

/* grid: main + rail */
.dk-grid-detail {
  grid-template-columns: 1fr 300px;
  align-items: start;
}

/* main column */
.sdp-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* rail */
.sdp-rail { display: flex; flex-direction: column; gap: 14px; }

/* ---- hero ---- */
.sdp-hero {
  display: flex; align-items: stretch; padding: 0; overflow: hidden;
}

/* hero text — left side */
.sdp-hero-body { padding: 22px 24px; flex: 1; min-width: 0; }
/* poster — left panel inside hero card */
.sdp-hero-poster {
  flex: 0 0 240px; width: 240px; align-self: stretch;
  border-right: 1px solid var(--line);
  overflow: hidden; position: relative;
  background: linear-gradient(145deg, var(--primary-soft) 0%, #d6e8ff 100%);
}
.sdp-hero-poster img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* subtle inner edge so the image reads as a deliberate panel, not a raw photo */
.sdp-hero-poster::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .12) 100%);
}
.sdp-poster-mono {
  width: 100%; height: 100%; min-height: 160px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 20px;
  text-align: center; background: linear-gradient(145deg, var(--primary-soft) 0%, #d6e8ff 100%);
  color: var(--primary);
}
.sdp-poster-mono .sdp-poster-slug {
  font-size: 13px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  word-break: break-all; line-height: 1.3;
}
.sdp-poster-mono .sdp-poster-icon { font-size: 32px; opacity: .35; }

.sdp-hero-slug {
  font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--primary); background: var(--primary-soft);
  display: inline-block; padding: 3px 10px; border-radius: 99px; margin-bottom: 8px;
}
.sdp-hero-title {
  font-size: 22px; font-weight: 800; letter-spacing: -.6px; line-height: 1.2;
  color: var(--ink); margin: 0 0 6px;
}
.sdp-hero-giver {
  font-size: 13px; color: var(--ink2); font-weight: 600;
  display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
}
.sdp-hero-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* chips */
.sdp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px;
  white-space: nowrap;
}

/* ---- section cards ---- */
.sdp-section { }
.sdp-sec-icon { color: var(--primary); opacity: .8; font-size: 14px; }
.sdp-prose { font-size: 13.5px; line-height: 1.7; color: var(--ink2); font-weight: 500; }
.sdp-prose p { margin: 0 0 .75em; }
.sdp-prose p:last-child { margin-bottom: 0; }
.sdp-prose ul, .sdp-prose ol { padding-left: 1.4em; margin: 0 0 .75em; }
.sdp-prose li { margin-bottom: .3em; }
.sdp-prose strong { color: var(--ink); font-weight: 700; }

/* ---- action card (award + CTA + KV) ---- */
.sdp-action-card { overflow: hidden; }
.sdp-award-block {
  padding: 18px 18px 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px; margin-bottom: 0;
}
.sdp-award-label { font-size: 11.5px; font-weight: 700; color: var(--ink2); letter-spacing: .2px; text-transform: uppercase; }
.sdp-award-amt { font-size: 30px; font-weight: 800; letter-spacing: -1.5px; color: var(--green); line-height: 1.1; margin-top: 4px; }
.sdp-cta-wrap { padding: 14px 18px; }
.sdp-cta { width: 100%; border-radius: 12px; height: 44px; font-size: 14.5px; }
.sdp-kvlist { padding: 0 18px 4px; }

/* ---- eligibility criteria card ---- */
.sdp-crit-row { padding: 7px 0; border-bottom: 1px solid var(--line); }
.sdp-crit-row:last-child { border-bottom: none; }
.sdp-crit-label {
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--ink3); margin-bottom: 6px;
}
.sdp-chips { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---- "why you match" card ---- */
.sdp-match-list { display: flex; flex-direction: column; gap: 2px; }
.sdp-match-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--ink); padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.sdp-match-row:last-child { border-bottom: none; }

/* ---- tip card ---- */
.sdp-tip-card {
  padding: 16px 18px; background: var(--primary-soft) !important;
  border-color: transparent !important;
  display: flex; gap: 12px; align-items: flex-start;
}
.sdp-tip-icon { color: var(--primary); font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.sdp-tip-card p { font-size: 13px; color: var(--primary-700); font-weight: 500; line-height: 1.55; margin: 0; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .dk-grid-detail { grid-template-columns: 1fr; }
  /* on mobile the rail comes AFTER the hero but BEFORE content —
     use explicit order so CTA stays accessible without scrolling past all sections */
  .sdp-rail  { order: 2; }
  .sdp-main  { order: 3; }
  /* hero stays first (order:1 default) */
  .sdp-hero { order: 1; }
  /* make action card horizontal on tablet */
  .sdp-crit-card, .sdp-match-card, .sdp-tip-card { display: none; } /* hide on collapsed rail — they're rarely needed above content */
}
@media (max-width: 640px) {
  .sdp-hero { flex-direction: column; }
  .sdp-hero-poster {
    width: 100%; flex: none; height: 180px;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .sdp-hero-poster img { width: 100%; height: 180px; object-fit: cover; }
  .sdp-hero-body { padding: 16px; }
  .sdp-hero-title { font-size: 19px; }
  .sdp-award-amt { font-size: 26px; }
  /* on small screens show the criteria/match cards again below CTA */
  .sdp-crit-card, .sdp-match-card, .sdp-tip-card { display: flex; flex-direction: column; }
  .sdp-crit-card, .sdp-match-card { display: block; }
}

/* ======================================================
   s.html application form (sd-*) — unchanged rules below
   ====================================================== */

/* the application form keeps Bootstrap classes; constrain its width nicely */
.sd-detail #all-details-container { padding-left: 0; padding-right: 0; }

/* ---- type scale ----
   the form markup is plain Bootstrap, which defaults to 16px and reads
   oversized next to the 13.5px controls; normalize to the dashboard scale */
.sd-detail { font-size: 13.5px; }
.sd-detail label { font-size: 13px; line-height: 1.55; }
.sd-detail label.fw-medium, .sd-detail .form-label {
  font-size: 12.5px; color: var(--ink2); margin-bottom: 4px;
  font-weight: 600 !important; /* bootstrap's .fw-medium is 500 !important */
}
.sd-detail .alert { font-size: 13.5px; }
.sd-detail .btn { font-size: 14px; }

/* ---- detail hero (matches the scholarship-details page hero) ---- */
.sd-hero { overflow: hidden; display: flex; flex-direction: row; align-items: stretch; gap: 0; padding: 0; }
.sd-hero-banner {
  flex: 0 0 240px; width: 240px; align-self: stretch;
  border-right: 1px solid var(--line); overflow: hidden; position: relative;
  background: linear-gradient(145deg, var(--primary-soft) 0%, #d6e8ff 100%);
}
.sd-hero-banner:empty { display: none; }
.sd-hero-banner img,
.sd-hero-banner .docview {
  display: block; width: 100%; height: 100%; max-height: none;
  object-fit: cover; object-position: center;
  border: none; border-radius: 0; box-shadow: none; margin: 0;
}
/* subtle inner edge so the image reads as a deliberate panel, not a raw photo */
.sd-hero-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .12) 100%);
}
.sd-hero-body { padding: 22px 24px; flex: 1; min-width: 0; }
.sd-hero-slug {
  font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--primary); background: var(--primary-soft);
  display: inline-block; padding: 3px 10px; border-radius: 99px; margin-bottom: 8px;
}
.sd-hero-body h1, .sd-hero-body h2 {
  font-size: 22px; font-weight: 800; letter-spacing: -.6px; margin: 0 0 6px;
  text-decoration: none !important; color: var(--ink); line-height: 1.2;
}
.sd-hero-body p { font-size: 13.5px; color: var(--ink2); font-weight: 500; line-height: 1.6; }
.sd-hero-body .bg-light {
  background: #fafbfc !important; border-color: var(--line) !important;
  border-radius: 12px; padding: 10px 14px !important; box-shadow: none !important;
  font-size: 13px; color: var(--ink2); line-height: 1.55; max-height: 100px; overflow-y: auto;
}
.sd-hero-body a { color: var(--primary); font-weight: 700; }

@media (max-width: 640px) {
  .sd-hero { flex-direction: column; }
  .sd-hero-banner { flex: 0 0 auto; width: 100%; height: 180px; border-right: none; border-bottom: 1px solid var(--line); }
  .sd-hero-banner img, .sd-hero-banner .docview { width: 100%; height: 180px; }
  .sd-hero-body { padding: 16px; }
  .sd-hero-body h1, .sd-hero-body h2 { font-size: 19px; }
}

/* application-details band (ID / applied / status / student id) */
#application-details { font-size: 12.5px; color: var(--ink2); padding: 10px 4px; }
#application-details .fw-medium { color: var(--ink); font-weight: 700; font-size: 13px; }
#application-details .row { row-gap: 6px; }
#application-details .col-md-2,
#application-details .col-md-3 { padding-top: 0 !important; }

/* soften Bootstrap cards inside the form */
.sd-detail .card { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }

/* accordion sections — same card-style spacing/look as the profile page:
   each item is its own rounded block with a gap; section tints come from the
   shared per-section palette in commonstyles.css */
.sd-detail .accordion { background: transparent; border: none; border-radius: 0; padding: 0; }
.sd-detail .accordion-item {
  background: var(--card) !important;
  border: 1.5px solid #8fb2e6 !important; /* match profile accordions */
  border-radius: 14px !important;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.sd-detail .accordion-button {
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: -.2px;
  padding: 13px 16px;
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0;
}
.sd-detail .accordion-button:focus { box-shadow: none; border-color: transparent; }
.sd-detail .accordion-body { padding: 12px 16px 10px; }

/* application form: tighter fields + stronger save/submit buttons */
.sd-detail .mb-3 { margin-bottom: .6rem !important; }
.sd-detail .mb-4 { margin-bottom: .85rem !important; }
.sd-detail .form-control, .sd-detail .form-select { padding: 8px 12px; font-size: 13.5px; border-radius: 10px; border-color: var(--line2); }
.sd-detail .form-control:focus, .sd-detail .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.sd-detail .btn-primary, .sd-detail .btn-success {
  border: none; border-radius: 10px; font-weight: 700;
  box-shadow: 0 1px 2px rgba(20,30,45,.06), 0 2px 8px rgba(47,95,192,.18);
}
.sd-detail .btn-success { background: var(--green); }
.sd-detail .btn-success:hover { background: #3f6d17; }