/* ==========================================================================
   Styles for the block types the hand-written pages never had: rich text,
   feature columns, questions, buttons, figures, maps and spacers. Everything
   here follows the tokens already set in styles.css.
   ========================================================================== */

/* --------------------------------------------------------------- rich text */

/* ------------------------------------------------------------ justification
   Running body copy is justified; headings, eyebrows, maxims, captions and
   anything short stay ragged-right, where justifying only opens rivers.
   Hyphenation comes with it - justified text without it spaces badly - and
   both are dropped on narrow screens, where the column is too thin to justify
   without gaps. */
/* The practice pages were ranged left for a while, on the design brief's
   advice; they are justified again at his instruction. What made justified text
   ugly there is gone in any case: the floated photographs that squeezed it into
   narrow columns were removed, and the measure came down from 73 characters to
   63, with automatic hyphenation to keep the word gaps even. */
.prose p,
.detail-body > p,
.faq-body p,
.split-copy .prose p,
.steps li,
.cols-aside .feature-col p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* A card in a row of four is about 280px across. Justified at that measure the
   text opens rivers - "Caribbean Association of Judicial Officers" on one line
   with gaps you could park in. Only the card beside a picture, which runs to
   670px, is wide enough for it. */
/* short or display lines are never justified */
.detail-body > p.eyebrow,
.detail-body > p.maxim-line,
.prose p:last-child:first-child:empty { text-align: left; hyphens: manual; }

@media (max-width: 760px) {
  .prose p, .detail-body > p, .faq-body p, .split-copy .prose p,
  .steps li, .feature-col p {
    text-align: left; hyphens: manual;
  }
}

.prose { max-width: 74ch; }
.prose-narrow { max-width: 62ch; margin-inline: auto; }
.prose > :last-child { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4 { font-family: var(--display); font-weight: 400; margin: 2rem 0 .8rem; }
.prose h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.prose h3 { font-size: 1.4rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.prose li { margin-bottom: .45rem; }
.prose em { font-style: italic; color: var(--gold-700); }
.prose a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.prose a:hover { color: var(--gold-700); }
.prose blockquote {
  margin: 1.6rem 0; padding: .2rem 0 .2rem 1.4rem; border-left: 2px solid var(--gold);
  font-family: var(--serif); font-size: 1.25rem; font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--line-light); margin: 2.2rem 0; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: rgba(11, 22, 48, .06); padding: .1em .35em; border-radius: 3px; }

.section-dark .prose em, .section-navy .prose em { color: var(--gold-300); }
.section-dark .prose code, .section-navy .prose code { background: rgba(244, 239, 228, .1); }
.section-dark .prose blockquote, .section-navy .prose blockquote { color: var(--muted); }

/* ---------------------------------------------------------------- headings */

.section-head-center { text-align: center; margin-inline: auto; }
.section-head-center .lead { margin-inline: auto; }

/* ------------------------------------------------------------- pull quotes */

.block-quote .pull-quote { max-width: 58ch; margin: 0 auto; text-align: center; }
.block-quote .pull-quote p {
  font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-style: italic;
  line-height: 1.3; margin: 0 0 1rem;
}
.block-quote .pull-quote em { color: var(--gold); font-style: italic; }
.block-quote cite {
  font-style: normal; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-700);
}
.section-dark .block-quote cite, .section-navy .block-quote cite { color: var(--gold); }

/* --------------------------------------------------------------- figures */

.figure { margin: 0; }
.figure .img-frame-inner { overflow: hidden; border-radius: 2px; }
.figure img { width: 100%; }
.figure figcaption {
  margin-top: .8rem; font-size: .84rem; color: var(--ink-2); letter-spacing: .02em;
}
.section-dark .figure figcaption, .section-navy .figure figcaption { color: var(--muted); }
.figure-narrow { max-width: 640px; margin-inline: auto; }
.figure-wide { max-width: 100%; }
.block-image .figure-full { width: 100vw; margin-left: calc(50% - 50vw); }

.block-video-el { width: 100%; display: block; border-radius: 2px; background: #000; }

/* --------------------------------------------------------------- buttons */

.button-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.button-row.is-center { justify-content: center; }

/* ---------------------------------------------------------------- spacer */

.block-spacer { padding-block: calc(var(--spacer, 6rem) / 2) !important; }
.gold-rule {
  border: 0; height: 1px; margin: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* --------------------------------------------------------------- the roll */
/* Entries are ruled, not boxed: after two grids of cards a third would read as
   more of the same, and these are lists rather than propositions. The columns
   are auto-fit, so the register runs in two on a wide screen and one on a
   phone without a breakpoint of its own. */
.roll {
  list-style: none; padding: 0; margin: 2.4rem 0 0;
  /* multi-column, not grid: a grid flows across the row, so a register read
     top to bottom would have come out in the wrong order. Columns flow down
     and then over, balance themselves, and drop to one when the space is
     short, which is the behaviour a list wants. */
  columns: 22rem 2; column-gap: clamp(2rem, 4vw, 3.6rem);
}
.roll-item {
  position: relative; break-inside: avoid; -webkit-column-break-inside: avoid;
  padding: 1.1rem 0;
}
.roll-rule {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--line-light); transform-origin: left;
}
.roll-item h3 {
  margin: 0 0 .3rem; font: 500 1.05rem/1.35 var(--serif); letter-spacing: 0;
}
.roll-item h3 em { font-style: normal; color: var(--gold-700); }
.roll-item p { margin: 0; font-size: .9rem; line-height: 1.6; }

/* ------------------------------------------------------- feature columns */

.feature-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.5rem; margin-top: 2.4rem;
}
/* a photograph alongside the columns. The figure is a grid item with no auto
   margins, so it stretches and its aspect-ratio gives it a real height - see
   the note in AGENTS.md about frames that collapse to nothing. */
.cols-aside {
  display: grid; grid-template-columns: .82fr 1.18fr;
  gap: clamp(2.2rem, 5vw, 4rem);
  /* stretch, not centre: with compact cards the copy column is much shorter
     than a 2:3 portrait, and a picture that towers over three short rows reads
     as two unrelated things side by side. The frame takes the row's height,
     which is the copy's, and crops to it. */
  align-items: stretch;
}
/* width:100% is load-bearing again: with a min-height and an aspect-ratio
   and no stated width, the height drove the width and the figure ran off
   the side of a phone. */
.cols-aside .img-frame { width: 100%; aspect-ratio: auto; min-height: 22rem; }
/* the picture is taken out of flow so that it cannot set the row's height with
   its own natural one - stretched, the frame takes the copy's height instead,
   which is the whole point of putting them side by side */
.cols-aside .img-frame-inner { position: absolute; inset: 0; }
.cols-aside .img-frame img { object-position: 50% 16%; }
.cols-aside-rev .img-frame { order: 2; }
.cols-aside .section-head { margin-bottom: 0; }
/* one card per row: three qualifications in a half-width column reflow to
   two-and-one, which reads as a broken grid rather than a record */
.cols-aside .feature-cols { grid-template-columns: 1fr; margin-top: 1.8rem; gap: 1rem; }
.cols-aside .feature-col { padding: 1.5rem 1.6rem; }
@media (max-width: 900px) {
  .cols-aside { grid-template-columns: 1fr; }
  /* one column: the picture leads rather than following the last card */
  .cols-aside-rev .img-frame { order: -1; }
  /* stacked: the picture takes its own shape again, not the copy's height */
  .cols-aside .img-frame { aspect-ratio: 4 / 3; min-height: 0; }
}
/* a row of cards may reach a little past the column the prose is set on, which
   buys each card width without moving the grid everything else is aligned to */
.feature-cols-wide {
  width: min(calc(100vw - 6rem), 80rem);
  margin-inline: calc(50% - min(calc(50vw - 3rem), 40rem));
}
/* a column is a flex stack so that however the title wraps, the link still
   sits on the same line across all three */
.feature-col {
  position: relative; padding: 2rem 1.9rem; text-decoration: none;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .5); border: 1px solid var(--line-light); border-radius: 2px;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
a.feature-col:hover {
  border-color: var(--gold);
  box-shadow: 0 24px 50px -30px rgba(11, 22, 48, .4);
}
/* a picture across the head of the card, in the gold frame the tiles use */
.feature-col:has(.feature-media) { padding: 0 0 2rem; }
.feature-media {
  display: block; position: relative; overflow: hidden; margin-bottom: 1.5rem;
  aspect-ratio: 4 / 3; background: var(--navy-950);
}
.feature-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--ease);
}
a.feature-col:hover .feature-media img { transform: scale(1.05); }
.feature-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 13, 26, 0) 55%, rgba(7, 13, 26, .35));
}
.feature-col:has(.feature-media) .feature-num,
.feature-col:has(.feature-media) h3,
.feature-col:has(.feature-media) p,
.feature-col:has(.feature-media) .card-link { margin-left: 1.6rem; margin-right: 1.6rem; }

.feature-num {
  font-family: var(--display); font-size: .9rem; color: var(--gold-700);
  letter-spacing: .2em; display: block; margin-bottom: .8rem;
}
.feature-col h3 {
  font-size: 1.62rem; line-height: 1.24; margin-bottom: .6rem;
  text-wrap: balance;               /* keeps a two-line title from breaking badly */
  /* two lines are reserved whether or not the title needs them, so the three
     cards read as one row rather than three different shapes */
  min-height: 2.48em;
}
.feature-col h3 em { font-style: italic; color: var(--gold-700); }
.feature-col p { margin-bottom: 0; color: var(--ink-2); }
.feature-col p:empty { margin: 0; }
/* pushed down, so every card's link lands on one line */
.feature-col .card-link { margin-top: auto; padding-top: 1.2rem; display: inline-block; }
.section-dark .feature-col, .section-navy .feature-col {
  background: rgba(244, 239, 228, .04); border-color: var(--line-dark);
}
.section-dark .feature-col p, .section-navy .feature-col p { color: var(--muted); }
.section-dark .feature-col h3 em, .section-navy .feature-col h3 em { color: var(--gold-300); }
.section-dark .feature-num, .section-navy .feature-num { color: var(--gold); }
.section-dark .feature-col .card-link,
.section-navy .feature-col .card-link { color: var(--gold-300); }
.section-dark .feature-col .card-link i,
.section-navy .feature-col .card-link i { color: var(--gold-300); }
a.feature-col:hover .card-link i { transform: translateX(6px); }
/* a card with a picture but no paragraph should not keep the paragraph's gap */
.feature-col p:empty { display: none; }

/* ---- compact cards ---------------------------------------------------------
   Half the height of the standard card, and drawn rather than boxed: a short
   gold rule sits at the head of each, which runs the full width when the card
   is a link and the pointer is on it. The standard card stays as it is - the
   orientation panels on Home are meant to be large. */
.feature-cols-compact { gap: 1rem; }
.feature-cols-compact .feature-col {
  padding: 1.1rem 1.25rem 1.2rem;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .24));
}
.feature-cols-compact .feature-col::before {
  content: ''; position: absolute; left: -1px; top: -1px; height: 2px; width: 2.4rem;
  background: var(--gold); transition: width .55s var(--ease);
}
.feature-cols-compact .feature-col h3 {
  font-size: 1.1rem; line-height: 1.3; margin-bottom: .42rem;
  min-height: 2.6em;                 /* two lines reserved, as the full-size card does */
}
.feature-cols-compact .feature-col p { font-size: .87rem; line-height: 1.6; }
.feature-cols-compact .feature-col .card-link { padding-top: .85rem; font-size: .68rem; }
.feature-cols-compact a.feature-col:hover { transform: translateY(-3px); }
.feature-cols-compact a.feature-col:hover::before { width: calc(100% + 2px); }

/* beside a picture the cards are one per row and wide, so a reserved second
   line of heading is only a gap */
.cols-aside .feature-cols-compact .feature-col h3 { min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .feature-cols-compact .feature-col::before { transition: none; }
}

/* -------------------------------------------------------------- questions */

.faq { max-width: 78ch; margin-top: 2.2rem; border-top: 1px solid var(--line-light); }
.faq-item { border-bottom: 1px solid var(--line-light); }
.faq-item summary {
  display: flex; align-items: center; gap: 1rem; cursor: pointer; list-style: none;
  padding: 1.25rem 0; font-family: var(--display); font-size: 1.22rem; line-height: 1.3;
  transition: color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold-700); }
.faq-item summary i {
  margin-left: auto; flex: none; width: 20px; height: 20px; position: relative;
}
.faq-item summary i::before, .faq-item summary i::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--gold);
  transition: rotate .35s var(--ease), opacity .35s var(--ease);
}
.faq-item summary i::after { rotate: 90deg; }
.faq-item[open] summary i::after,
.faq-item.is-open summary i::after { rotate: 0deg; opacity: 0; }
.faq-item.is-shut summary i::after { rotate: 90deg; opacity: 1; }
.faq-item[open] summary,
.faq-item.is-open summary { color: var(--gold-700); }
.faq-item.is-shut summary { color: inherit; }
.faq-body { padding: 0 0 1.4rem; max-width: 68ch; }
.faq-body > :last-child { margin-bottom: 0; }
.section-dark .faq, .section-navy .faq,
.section-dark .faq-item, .section-navy .faq-item { border-color: var(--line-dark); }
.section-dark .faq-item summary:hover, .section-navy .faq-item summary:hover,
.section-dark .faq-item[open] summary, .section-navy .faq-item[open] summary { color: var(--gold); }

/* -------------------------------------------------------------------- map */

.map-frame { position: relative; border: 1px solid var(--line-light); border-radius: 2px; overflow: hidden; }
.map-frame iframe { width: 100%; height: var(--map-h, 26rem); border: 0; display: block; filter: grayscale(.35) contrast(1.05); }
/* a quiet line under the map rather than a button over it: Google's embed
   already carries its own control in the corner */
.map-out { margin: .9rem 0 0; font-size: .82rem; }
.map-out a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 76, .5); padding-bottom: 1px;
}
.map-out a::after { content: ' \2197'; color: var(--gold); }
.map-out a:hover { border-color: var(--gold); color: var(--gold-700, inherit); }

/* -------------------------------------------------- contact form on its own */

.contact-form-solo { max-width: 720px; margin-inline: auto; }

/* ------------------------------------------------------------- empty block */

.block-html .prose { max-width: none; }