/*
 * DII Standard Page presentation (P2-WP-07 DII Standard Page System),
 * loaded on ordinary WordPress Pages only (with dii-homepage.css, which
 * owns the shared Hero/Newsletter components and the --dii-home-container
 * token, and dii-article.css, which owns the shared breadcrumb and content-
 * block classes: .dii-callout, .dii-key-takeaways). Same DII tokens and
 * derived tints as the rest of the site; no new brand colour, no external
 * font, no image.
 *
 * Implements designs/dii/baselines/dii_standard_page_mockup_v1a.html
 * (Programme Owner-approved), reusing the LOCKED desktop geometry already
 * established for the Homepage/Article/Topic/Resource Library pages: a
 * 1365px reference viewport, 1325px primary container
 * (--dii-home-container, dii-homepage.css) and 20px outer gutters, rather
 * than a second, differently-calibrated Standard-Page-only value.
 *
 * Governing rule per the master prompt: branding is invariant, content is
 * page-specific, components are conditional. This stylesheet supplies only
 * the page-specific layout and the new reusable content-block classes
 * (.dii-mission, .dii-quote, .dii-who, .dii-approach-cta) a Page author uses
 * directly in post_content — it introduces no editorial copy of its own.
 */

.dii-standard-page {
  width: min(var(--dii-home-container, 82.8125rem), calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 0 0 var(--cdi-spacing-3xl, 4rem);
}

/* Hero: the shared .dii-hero component, in its own two-column presentation
   (content + photographic media) matching the approved Standard Page
   baseline's proportions — a narrower content column than the Homepage's
   own hero treatment, since a Standard Page hero carries less supporting
   detail (no aside signal list by default). */
.dii-standard-hero {
  margin: var(--cdi-spacing-lg, 1.5rem) 0 var(--cdi-spacing-xl, 2rem);
}

.dii-standard-hero .dii-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--cdi-spacing-xl, 2rem);
  align-items: center;
}

.dii-standard-hero .dii-hero__visual {
  position: relative;
  border-radius: 0.375rem;
  overflow: hidden;
  background: var(--dii-color-brand-primary);
}

.dii-standard-hero .dii-hero__media {
  margin: 0;
  height: 23.875rem; /* 382px, matching the approved baseline */
}

.dii-standard-hero .dii-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dii-standard-hero .dii-hero__media-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--cdi-spacing-lg, 1.5rem);
  background: linear-gradient(transparent, rgba(11, 31, 51, 0.72));
  color: #fff;
}

.dii-standard-hero .dii-hero__media-caption-text {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
}

/* Main + rail layout */
.dii-standard__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20.625rem; /* 330px rail */
  gap: var(--cdi-spacing-xl, 2rem);
  padding-top: var(--cdi-spacing-lg, 1.5rem);
}

.dii-standard__body h2 {
  font-size: 1.8125rem;
  letter-spacing: -0.0375rem;
  color: var(--dii-color-brand-primary);
  margin: 0 0 0.5rem;
}

.dii-standard__body > * + * {
  margin-top: var(--cdi-spacing-2xl, 3rem);
}

.dii-standard__body p {
  color: var(--dii-color-text-secondary);
  line-height: 1.55;
}

/* A plain content section wrapper (heading + paragraph(s) + an optional
   structural block, e.g. Who We Are's three-column strip) — one top-level
   child of .dii-standard__body, so the 3rem inter-section rhythm above
   applies BETWEEN sections, not between a heading and its own paragraph. */
.dii-standard__body .dii-section > * + * {
  margin-top: 0.75rem;
}

/* Section head: heading + optional "view all" link, reusing the same
   presentation the Homepage's own section heads use. */
.dii-standard__body .dii-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--cdi-spacing-md, 1rem);
}

.dii-standard__body .dii-section-head a {
  font-size: 0.8125rem;
  font-weight: 750;
  color: var(--dii-color-link);
  white-space: nowrap;
}

/* Our mission */
.dii-mission {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr;
  gap: var(--cdi-spacing-lg, 1.5rem);
  align-items: start;
}

.dii-quote {
  margin: 0;
  background: linear-gradient(135deg, var(--dii-tint), var(--dii-tint-strong));
  border-radius: 0.3125rem;
  padding: var(--cdi-spacing-lg, 1.5rem);
  color: var(--dii-color-text-secondary);
  line-height: 1.45;
}

.dii-quote::before {
  content: '\201C';
  display: block;
  font-size: 2.125rem;
  font-weight: 800;
  color: var(--dii-color-brand-secondary);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.dii-quote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--dii-color-text-secondary);
}

/* Who we are: a three-column reasons strip, reusing the approved icon
   convention (icons are supplied via the [dii_icon] shortcode already
   registered for Article content, inc/article.php). */
.dii-who {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1rem;
  gap: 0;
}

.dii-who > div {
  padding: 0.5rem 1.125rem;
  border-right: 1px solid var(--dii-color-border-subtle);
}

.dii-who > div:last-child {
  border-right: 0;
}

.dii-who b {
  display: block;
  font-size: 0.875rem;
  color: var(--dii-color-brand-primary);
  margin-bottom: 0.25rem;
}

.dii-who p {
  font-size: 0.8125rem;
  margin: 0;
}

/* Our approach: an inline pill CTA to on-page/external editorial standards
   content — presentation only, the destination is ordinary Page content. */
.dii-approach-cta {
  display: inline-flex;
  background: var(--dii-tint-strong);
  color: var(--dii-color-brand-secondary);
  padding: 0.6875rem 1.375rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 750;
  text-decoration: none;
}

/* Rail cards */
.dii-standard__rail {
  display: flex;
  flex-direction: column;
  gap: var(--cdi-spacing-lg, 1.5rem);
}

.dii-rail-card {
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.375rem;
  padding: var(--cdi-spacing-lg, 1.5rem);
  background: #fff;
}

.dii-rail-card__title {
  font-size: 1rem;
  margin: 0 0 0.75rem;
  color: var(--dii-color-brand-primary);
}

.dii-rail-card p {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--dii-color-text-secondary);
  margin: 0 0 0.75rem;
}

.dii-rail-card__cdi-logo {
  width: 10.625rem;
  height: auto;
  margin: 0.625rem 0 0.9375rem;
}

.dii-rail-card__link {
  font-size: 0.8125rem;
  font-weight: 750;
  color: var(--dii-color-link);
  text-decoration: none;
}

.dii-rail-card__link--static {
  color: var(--dii-color-text-secondary);
  cursor: default;
}

/* Editorial principles list */
.dii-principle-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dii-principle-list__item {
  display: grid;
  grid-template-columns: 2.375rem 1fr;
  gap: 0.625rem;
  padding: 0.5625rem 0;
  border-bottom: 1px solid var(--dii-color-border-subtle);
}

.dii-principle-list__item:last-child {
  border-bottom: 0;
}

.dii-principle-list__icon {
  width: 2.125rem;
  height: 2.125rem;
  background: var(--dii-tint);
  border-radius: 50%;
  padding: 0.4375rem;
  color: var(--dii-color-brand-secondary);
}

.dii-principle-list__icon svg {
  width: 100%;
  height: 100%;
}

.dii-principle-list__label {
  display: block;
  font-size: 0.6875rem;
  color: var(--dii-color-brand-primary);
}

.dii-principle-list__description {
  display: block;
  font-size: 0.625rem;
  color: var(--dii-color-text-secondary);
}

/* Related content list */
.dii-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dii-related-list__item {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--dii-color-border-subtle);
}

.dii-related-list__item:last-child {
  border-bottom: 0;
}

.dii-related-list__link {
  display: grid;
  grid-template-columns: 1.375rem 1fr;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}

.dii-related-list__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--dii-color-brand-secondary);
}

.dii-related-list__icon svg {
  width: 100%;
  height: 100%;
}

.dii-related-list__type {
  display: block;
  font-size: 0.5625rem;
  font-weight: 800;
  color: var(--dii-color-brand-secondary);
  letter-spacing: 0.04em;
}

.dii-related-list__title {
  display: block;
  font-size: 0.75rem;
  color: var(--dii-color-brand-primary);
  margin: 0.125rem 0;
}

.dii-related-list__description {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--dii-color-text-secondary);
}

/* "What we cover" (the reused Explore Topics component, placed via the
   [dii_standard_topics] shortcode): the optional intro paragraph a reuse
   context can supply (explore-topics.php's 'intro_text') sits on its own
   line below the heading/CTA row rather than squeezed into that row's
   flex layout — the Homepage, which never supplies it, is unaffected. */
.dii-standard__body .dii-explore-topics__description {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--dii-color-text-secondary);
}

.dii-standard__body .dii-explore-topics {
  padding: 0;
  border: 0;
}

/* Newsletter panel: spacing correction so the reused component sits with
   the same rhythm here as on the Homepage/Article/Resource Library. */
.dii-standard-page .dii-newsletter {
  margin-top: var(--cdi-spacing-2xl, 3rem);
}

/* Responsive: 1024-1364px ("compact desktop") narrows the rail; below
   768px the hero, mission and layout collapse to one column, matching the
   Homepage/Article compact-desktop and mobile treatments. */
@media (max-width: 85.3125rem) {
  .dii-standard__layout {
    grid-template-columns: minmax(0, 1fr) 18.75rem; /* 300px rail */
  }
}

@media (max-width: 64rem) {
  .dii-standard-hero .dii-hero {
    grid-template-columns: 1fr;
  }

  .dii-standard-hero .dii-hero__media {
    height: 20.625rem; /* 330px */
  }

  .dii-standard__layout {
    grid-template-columns: 1fr;
  }

  .dii-standard__rail {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .dii-standard__rail .dii-rail-card {
    flex: 1 1 18.75rem;
  }

  .dii-mission {
    grid-template-columns: 1fr;
  }

  .dii-who {
    grid-template-columns: 1fr;
  }

  .dii-who > div {
    border-right: 0;
    border-bottom: 1px solid var(--dii-color-border-subtle);
    padding: 0.875rem 0.25rem;
  }

  .dii-who > div:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 48rem) {
  .dii-standard-hero .dii-hero__media {
    height: 17.1875rem; /* 275px */
  }

  .dii-standard__rail {
    flex-direction: column;
  }

  .dii-standard__rail .dii-rail-card {
    flex: 1 1 auto;
  }
}