/* ==========================================================================
   Detail page shell — design.md §4.12
   Hero → quick-facts strip → editorial body paired with a facts column.

   Shared by every single-post template that uses this shape: single-course.php
   and single-events.php today. Written with neutral `.pg-` names rather than
   per-post-type ones so a third template can adopt it without a fourth copy of
   the same hero.

   Enqueued from library/bones.php for the templates that need it, so it does
   not weigh on the rest of the site. Requires library/css/lhi-foundation.css
   for tokens and .wrap.

   Post-type-specific pieces stay in their own sheet — see lhi-course.css for
   the course gallery and apply CTA.
   ========================================================================== */
/* ---------------------------- Hero -------------------------------------- */
/* Same construction as the .dept-hero built for intro-banner: full-bleed media
   at 0.7 over --ink, a bottom gradient for legibility, content anchored low.
   Written here rather than shared because the block stylesheet only loads when
   that block renders, and this composition also carries the type pill. */

.pg-hero {
  position: relative;
  /* Taller on desktop so the frame is generous on wide screens. Note the height
     is only half the fix for cropped heads — see .pg-hero-media. */
  min-height: clamp(380px, 56vh, 760px);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.pg-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Course heroes are portraits of the tutor, and `cover` on a wide short box
     scales to the width and then crops the height from BOTH edges equally — so
     the head goes first. On a 2316px screen that removed 42% off the top of a
     1067x1600 portrait; the subject's head was entirely above the frame.

     Raising the hero height barely helps (42% -> 39%) because the width still
     drives the scale. Biasing the crop upward is what fixes it: 42% -> 17%,
     and 10% rather than 25% on the landscape images. */
  object-position: 50% 20%;
  opacity: 0.7;
  z-index: 0;
}

.pg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.72) 100%);
  pointer-events: none;
  z-index: 1;
}

/* No featured image — a plain ink band, with the scrim removed since it has
   nothing to sit over. */
.pg-hero--plain {
  min-height: clamp(300px, 40vh, 420px);
}

.pg-hero--plain::after { display: none; }

.pg-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(36px, 4.5vw, 68px);
  padding-bottom: clamp(36px, 4.5vw, 64px);
}

.pg-hero-tag {
  display: inline-block;
  padding: 5px 12px;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}

.pg-hero h1 {
  margin: 0;
  color: inherit;
  font-size: clamp(40px, 5.6vw, 88px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
  max-width: 20ch;
}

/* ---------------------------- Quick facts ------------------------------- */
/* A hairline-bounded tray, the same device the catalog filters use. */

.pg-quick {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.pg-quick .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  padding-top: clamp(20px, 2.4vw, 30px);
  padding-bottom: clamp(20px, 2.4vw, 30px);
}

.pg-quick-list {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3.5vw, 56px);
}

.pg-quick-list dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 5px;
}

.pg-quick-list dd {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 500;
  line-height: 1.3;
}

/* ---------------------------- Body -------------------------------------- */

.pg-body {
  background: var(--paper);
  color: var(--ink);
}

.pg-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

/* Body copy is set on the container so it inherits, instead of on `p`.

   These bodies are pasted out of Outlook and Word and arrive holding two kinds
   of paragraph — real `<p>`s and text the paste left unwrapped inside a
   `<div class="elementToProof">`, which wpautop does not touch. Styling the tag
   therefore ran one page at two type scales: paragraphs at this size and 82%
   ink, unwrapped text at the theme's Bootstrap 21.6px in full ink, with no
   margin at all. Inheriting typesets both identically whatever the paste did.
   avista_prose_html() handles the part of that mess no selector can reach.

   A colour rather than `opacity`, for a related reason: opacity makes a
   stacking context and dims every descendant regardless of its own paint, so
   the apply button sitting in .course-actions rendered at 82% too. */
.pg-prose {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.65;
  color: rgba(10, 10, 10, 0.82);
  text-wrap: pretty;
}

/* Editorial measure. The 1.85fr column runs ~95 characters to the line on a
   1440 wrap, well past the 60–75 that reads comfortably. Set on the blocks
   rather than on .pg-prose itself so the gallery can still use the whole
   column, and in `em` so it tracks the fluid size above. `:where()` holds this
   at (0,1,0) — .pg-lede further down has to be able to win. */
.pg-prose > :where(p, div, ul, ol, dl, h2, h3, h4, blockquote, figure) {
  max-width: 34em;
}

/* Vertical rhythm for every block an editor can produce, wrapped or not. A div
   and the paragraph inside it both carry this margin, but neither has padding
   or a border, so the two collapse into one gap rather than doubling. */
.pg-prose :where(p, div, ul, ol, dl, blockquote, figure, pre, table) {
  margin: 0 0 1.1em;
}

.pg-prose > :first-child { margin-top: 0; }
.pg-prose > :last-child { margin-bottom: 0; }

/* Headings take the full ink: --bs-heading-color is `inherit` in the
   foundation, so otherwise they pick up the body copy's 82%. */
.pg-prose h2,
.pg-prose h3,
.pg-prose h4 {
  color: var(--ink);
  text-wrap: balance;
}

.pg-prose h2 {
  margin: 1.8em 0 .5em;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Sized to sit clearly above body copy without competing with the h2 — these
   are mostly the promoted bold labels, so they land several to a page. At the
   old clamp they came out 1.4px larger than the copy they headed, which reads
   as bold text rather than as a heading; 1.3x apart is the smallest step that
   registers. The 2em lead-in is what separates one titled run of copy from the
   last. */
.pg-prose h3 {
  margin: 2em 0 .45em;
  font-size: clamp(21px, 1.75vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* One step under the h3, still clear of the body copy — at clamp(17px, 1.2vw)
   an h4 came out *smaller* than the paragraph it headed on a wide screen. */
.pg-prose h4 {
  margin: 1.8em 0 .4em;
  font-size: clamp(18px, 1.45vw, 21px);
  font-weight: 600;
  line-height: 1.35;
}

/* Bold is the only emphasis these bodies carry, and most of it is a run-in
   label opening a line — "Staðsetning:", "Vika 1:". Full ink at 600 separates
   it from the body copy without the jump to the browser's 700. */
.pg-prose strong,
.pg-prose b {
  font-weight: 600;
  color: var(--ink);
}

/* `:where()` again, so a list that is not prose — .course-gallery is a `ul` —
   can opt out from its own sheet on a plain class selector. As written with
   `.pg-prose ul` this rule was (0,1,1) and beat .course-gallery's `padding: 0`
   on specificity regardless of load order, indenting the gallery 1.2em past the
   copy above it, and putting a .4em margin under every image in the grid. */
.pg-prose :where(ul, ol) { padding-left: 1.2em; }
.pg-prose :where(li) { margin-bottom: .4em; }

/* :not(.btn) because the CTA is nested inside the prose wrapper — this rule
   is (0,1,1) and .btn--primary in the foundation is (0,1,0), so without the
   exclusion `color: inherit` repaints the button ink-on-ink. */
.pg-prose a:not(.btn) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* An optional standing-first paragraph — §4.12's `.section-body p.lede`. */
.pg-lede {
  margin: 0 0 clamp(20px, 2.2vw, 32px);
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.5;
  /* Was `opacity: 0.9`, which now multiplies with .pg-prose's 82% ink and
     lands the standfirst *below* the body copy it introduces. */
  color: rgba(10, 10, 10, 0.9);
}

.pg-lede p { margin: 0 0 .6em; }
.pg-lede p:last-child { margin-bottom: 0; }

/* ---------------------------- Facts column ------------------------------ */
/* §4.12 — "The shared border-top on both lists anchors the section." */

.pg-facts {
  margin: 0;
  border-top: 1px solid var(--ink);
}

.pg-fact {
  padding: clamp(14px, 1.6vw, 20px) 0;
  border-bottom: 1px solid var(--line);
}

.pg-facts dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 6px;
}

.pg-facts dd {
  margin: 0;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.5;
}

.pg-facts dd a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------- Responsive -------------------------------- */

@media (max-width: 860px) {
  .pg-body-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-quick .wrap { justify-content: flex-start; }
}

@media (max-width: 600px) {
  /* The 0.7 dim and 0.72 ramp are sized for a desktop frame; on a phone they
     cover proportionally far more of a picture that is often a portrait.

     The ramp stops at 0.50 rather than the home hero's 0.45 because this hero
     has no authored ::before scrim in its composite. That keeps the same
     worst-case floor — a near-white photograph lands at ~5.6:1 for white text
     either way, instead of 4.88:1 if it simply copied the home hero's numbers. */
  .pg-hero-media { opacity: 0.85; }

  .pg-hero::after {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.06) 0%,
      rgba(0, 0, 0, 0.04) 55%,
      rgba(0, 0, 0, 0.50) 100%);
  }

  .pg-quick-list { gap: 18px 28px; }
}