/* ==========================================================================
   MODERN NEWS TEMPLATE — Mpohor Fiase District Assembly
   --------------------------------------------------------------------------
   ONE stylesheet that styles every "news detail" page on the site.
   It only styles the elements introduced by the new template:

     .dispatch-hero      -> the page-header / title band
     .dispatch           -> the article wrapper
     .dispatch__*        -> everything inside the article
     .gpage-*             -> small shared utility classes

   It does NOT touch the existing header/footer/menu (those keep using
   the original template CSS so the rest of the site is unaffected).

   HOW TO EDIT (for new developers)
   --------------------------------------------------------------------------
   1. Colours, fonts, spacing and radii all live in the :root variables
      at the top. Change a value there and it updates the whole site.
   2. Layout for one screen size is written first (mobile), then
      overridden inside the two @media blocks near the bottom for
      tablet and desktop. This is called "mobile-first" — always add
      new rules the same way.
   3. Every class is prefixed "dispatch" so it can never clash with the
      legacy template classes already used by header.php / footer.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — edit these to re-theme the whole template
   -------------------------------------------------------------------------- */
:root {
  /* Colour palette
     Deep bush-green is the civic/agricultural identity colour of the
     district (cocoa, oil palm, coconut). Ochre gold is a restrained nod
     to the district's Kente & National-flag heritage, used only for
     small accents — never as a background. */
  --color-ink: #1c2620; /* body text */
  --color-ink-soft: #4b564c; /* secondary text */
  --color-bg: #f7f5ef; /* page background */
  --color-surface: #ffffff; /* card / content surface */
  --color-line: #e4e1d6; /* hairline borders */
  --color-primary: #14432a; /* deep bush green — headings, nav accents */
  --color-primary-600: #0e3320; /* hover / pressed state of primary */
  --color-accent: #c89b3c; /* ochre gold — tags, small accents only */
  --color-accent-soft: #f4e9ce; /* pale gold background for tags */

  /* Type */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:
    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
    sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  /* Spacing scale (rem) */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Layout
     --page-max is the single source of truth for how wide the article
     is allowed to get. --content-max just points at it, so every part
     of the template (hero photo, text card, gallery) stays the same
     width and lines up — change --page-max once to make the whole
     article wider or narrower. */
  --page-max: 1240px; /* overall article width on large screens */
  --content-max: var(--page-max);
  --gutter: 1.25rem; /* side breathing room on small screens */
}

/* --------------------------------------------------------------------------
   2. RESET / BASE — scoped so it can't leak into the legacy template
   -------------------------------------------------------------------------- */
.dispatch-hero,
.dispatch {
  box-sizing: border-box;
}
.dispatch-hero *,
.dispatch *,
.dispatch-hero *::before,
.dispatch *::before,
.dispatch-hero *::after,
.dispatch *::after {
  box-sizing: inherit;
}

/* --------------------------------------------------------------------------
   3. HERO / PAGE-HEADER BAND
   -------------------------------------------------------------------------- */
.dispatch-hero {
  background:
    radial-gradient(
      120% 140% at 100% 0%,
      rgba(200, 155, 60, 0.16) 0%,
      rgba(200, 155, 60, 0) 55%
    ),
    var(--color-primary);
  padding: var(--space-6) var(--gutter) var(--space-6);
}

.dispatch-hero__inner {
  max-width: var(--page-max);
  margin: 0 auto;
}

.dispatch-hero__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  margin: 0 0 var(--space-3);
}

.dispatch-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4.2vw, 2.85rem);
  line-height: 1.12;
  color: #ffffff;
  margin: 0 0 var(--space-3);
  max-width: 22ch;
}

.dispatch-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}

.dispatch-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: border-color 0.15s ease;
}
.dispatch-hero__breadcrumb a:hover,
.dispatch-hero__breadcrumb a:focus-visible {
  border-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   4. ARTICLE WRAPPER
   -------------------------------------------------------------------------- */
.dispatch {
  background: var(--color-bg);
  padding: var(--space-6) var(--gutter) var(--space-7);
}

.dispatch__container {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Hero photograph directly under the title */
.dispatch__hero-figure {
  margin: calc(-1 * var(--space-7)) 0 var(--space-5);
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

.dispatch__hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px -20px rgba(20, 67, 42, 0.45);
}

/* --------------------------------------------------------------------------
   5. BODY COPY
   -------------------------------------------------------------------------- */
.dispatch__content {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  /* flow-root gives this box its own layout context, so it always grows
     tall enough to fully wrap any floated inset photo inside it (without
     this, a float can visually spill out past the card's bottom edge/
     border when it's taller than the paragraph next to it). */
  display: flow-root;
  /* Belt-and-braces: if a very long word/URL ever lands in the copy, wrap
     it instead of letting it push the card wider than its container. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.dispatch__content p {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

.dispatch__content p:last-child {
  margin-bottom: 0;
}

.dispatch__content blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary-600);
}

.dispatch__content blockquote p {
  margin: 0;
  font-size: 1.05rem;
}

.dispatch__content strong {
  color: var(--color-primary-600);
}

/* Inset photographs that sit between paragraphs */
.dispatch__inset {
  margin: var(--space-4) 0;
}
.dispatch__inset img {
  display: block;
  width: 100%;
  height: auto;
  /* Locks every inset photo to the same 450×337 shape as the site's
     original photos, regardless of the source image's real dimensions,
     so floated text always wraps a consistent, tidy rectangle. */
  aspect-ratio: 450 / 337;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.dispatch__inset figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-soft);
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   6. GALLERY GRID (used by pages that end with an "IMAGES" section)
   -------------------------------------------------------------------------- */
.dispatch__gallery {
  max-width: var(--page-max);
  margin: var(--space-6) auto 0;
}

.dispatch__gallery-heading {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.dispatch__gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.dispatch__gallery-grid img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.dispatch__gallery-grid img:hover,
.dispatch__gallery-grid img:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -14px rgba(20, 67, 42, 0.5);
}

/* --------------------------------------------------------------------------
   7. ACCESSIBILITY
   -------------------------------------------------------------------------- */
.dispatch-hero__breadcrumb a:focus-visible,
.dispatch__gallery-grid img:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .dispatch__gallery-grid img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE — mobile-first, so this is TABLET AND UP
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .dispatch__gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .dispatch-hero {
    padding: var(--space-7) var(--gutter) var(--space-7);
  }

  .dispatch__content {
    padding: var(--space-6) var(--space-6);
  }

  .dispatch__inset--float-left,
  .dispatch__inset--float-right {
    /* Fixed 450px container (matches the 450×337 photos used across the
       site). max-width keeps it from overflowing on narrower tablets. */
    width: 450px;
    max-width: 100%;
    margin-top: var(--space-1);
    margin-bottom: var(--space-3);
    shape-outside: margin-box;
  }
  .dispatch__inset--float-left {
    float: left;
    margin-right: var(--space-4);
  }
  .dispatch__inset--float-right {
    float: right;
    margin-left: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   9. DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .dispatch-hero__title {
    max-width: 26ch;
  }

  .dispatch__content {
    /* Wider container (see --page-max) gets extra breathing room so text
       doesn't run edge-to-edge, plus a touch more size for the longer
       line length. */
    padding: var(--space-7);
  }

  .dispatch__content p {
    font-size: 1.08rem;
  }

  .dispatch__gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dispatch__gallery-grid img {
    height: 220px;
  }
}