/* ==========================================================================
   Editorial listing layout — currently scholarships only.
   Loaded on single-scholarship.php. Everything else keeps post.css.
   ========================================================================== */

/* The bar is fixed, so the page needs room beneath it or the last line of
   content sits underneath and cannot be read. */
.editorial { padding-block-end: 76px; }

/* --- Hero ---------------------------------------------------------------- */
.ed-hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 340px;
  padding-block: var(--s-12) var(--s-8);
  background: linear-gradient(140deg, var(--accent) 0%, #3B0764 100%);
  overflow: hidden;
}
.ed-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* A photograph needs a floor of darkness under the type, not a fade to
   nothing — white text over a bright sky is the failure this prevents. */
.ed-hero--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 6, 20, .34) 0%, rgba(8, 6, 20, .72) 62%, rgba(8, 6, 20, .84) 100%);
}
.ed-hero__inner { position: relative; z-index: 1; }

.ed-hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-4); }
.pill--onhero { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
.pill--deadline { background: #FFFFFF; color: var(--accent); font-weight: var(--fw-semi); }

.ed-hero__title {
  margin: 0 0 var(--s-3);
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 2.875rem);
  font-weight: var(--fw-bold); line-height: 1.12; letter-spacing: -.025em;
  color: #FFFFFF; text-wrap: pretty;
}
.ed-hero__dek {
  margin: 0; max-width: 42em;
  font-size: var(--fs-lg); line-height: var(--lh-snug);
  color: rgba(255, 255, 255, .88);
}

/* --- Fact band ----------------------------------------------------------- */
.ed-band { background: var(--bg-subtle); border-block-end: 1px solid var(--border); }
.ed-band__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-4) var(--s-6);
  margin: 0; padding-block: var(--s-5);
}
.ed-band__grid dt {
  font-size: var(--fs-xs); color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .06em;
  margin-block-end: 3px;
}
.ed-band__grid dd { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semi); }

/* --- Reading column ------------------------------------------------------ */
/* Narrower than the site container on purpose: a single column of body text
   is unreadable at 1200px. */
.ed-body {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--s-5);
  padding-block-start: var(--s-8);
}
.ed-body .prose { font-size: var(--fs-md); }
.ed-body h2 { margin-block: var(--s-8) var(--s-3); }

/* --- Pinned action bar --------------------------------------------------- */
.ed-bar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
  background: var(--surface);
  border-block-start: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(16, 24, 40, .05);
}
.ed-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding-block: var(--s-3);
}
.ed-bar__status { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.ed-bar__date { font-size: var(--fs-sm); color: var(--text-muted); }
.ed-bar__actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }

/* On a phone the date is the first thing to go — the countdown already says
   what matters, and the buttons must not wrap onto a second row. */
@media (max-width: 640px) {
  .ed-bar__date { display: none; }
  .ed-bar__actions .urdu-toggle { display: none; }
}

/* Printing produces the PDF export, where a fixed bar and a dark hero are
   both wrong. */
@media print {
  .editorial { padding-block-end: 0; }
  .ed-bar { display: none !important; }
  .ed-hero { min-height: 0; background: none; padding-block: 0 var(--s-4); }
  .ed-hero::after, .ed-hero__img { display: none !important; }
  .ed-hero__title, .ed-hero__dek { color: #000 !important; }
  .pill--onhero, .pill--deadline { border: 1pt solid #999; color: #000 !important; background: none !important; }
  .ed-band { background: none !important; border-block-end: 1pt solid #999; }
  .ed-body { max-width: none; padding-inline: 0; }
}