/* Native WordPress block overrides loaded after core/global styles. */

@media (min-width: 56.25rem) {
  .pbk-section-intro--split:has(.wp-block-accordion[data-wp-interactive="core/accordion"]) {
    grid-template-columns: minmax(0, 36fr) minmax(min(50ch, 100%), 64fr);
    align-items: start;
    column-gap: clamp(3rem, 4vw, 4rem);
  }

  .pbk-section-intro--split:has(.wp-block-accordion[data-wp-interactive="core/accordion"]) .pbk-section-intro__intro {
    margin-bottom: 0;
    gap: calc(var(--spacing) * 3);
  }
}

/*
 * FAQ inside pbk/section-intro: editors compose it from sibling single-item
 * accordion blocks, so adjacent blocks must read as one continuous stack.
 * The block gap between consecutive accordions collapses to zero, and every
 * accordion after the first drops the start hairline of its first item so
 * only the shared end border of the previous item separates the questions
 * (no doubled lines). A non-accordion block between accordions keeps its
 * normal spacing. The same markup renders in the editor canvas.
 */
:where(.pbk-content, .editor-styles-wrapper)
  .pbk-section-intro__content .wp-block-accordion + .wp-block-accordion {
  margin-block-start: 0;
}

:where(.pbk-content, .editor-styles-wrapper)
  .pbk-section-intro__content
  .wp-block-accordion + .wp-block-accordion .wp-block-accordion-item:first-child {
  border-block-start: 0;
}

/*
 * Accordion hover convention: no surface highlight, the title alone gains an
 * underline. The native block is handled in core-blocks-layout.css; this rule
 * covers the theme's own reUI collapsible (the hover:bg utility was removed
 * from its trigger markup in inc-reui-collapsible-6.php).
 */
.pbk-reui-collapsible-6__trigger:hover .pbk-reui-collapsible-6__title {
  text-decoration: underline;
}

/* Header logo sizing override: app.css currently emits `.h-6` after `.lg\:h-8`,
   so base height wins in the cascade even on large screens. */
.pbk-navbar-brand .custom-logo {
  height: calc(var(--spacing) * 6);
}

@media (min-width: 64rem) {
  .pbk-navbar-brand .custom-logo {
    height: calc(var(--spacing) * 8);
  }
}

/*
 * Featured image in the editorial shell (post/page template). The image keeps
 * its intrinsic ratio, is centred and never exceeds 80vh, so portrait photos
 * stop dominating the viewport. Utility classes on the img live in @layer,
 * so this unlayered rule wins without !important.
 *
 * The figure itself is template markup, not editor content, so it owns its
 * margins explicitly: wp-block-library's unlayered :where(figure) reset
 * (margin: 0 0 1em) beats the layered mx-auto utility and zeroes the inline
 * margins. Scoping the fix to the component class restores centring while
 * Gutenberg content figures keep the core reset untouched. The 1em block-end
 * margin is kept for rhythm parity with the previous rendering.
 */
.optional-hero-image {
  margin-block: 0 1em;
  margin-inline: auto;
}

.optional-hero-image img {
  display: block;
  margin-inline: auto;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: 80vh;
}

/* Posts archive hero. */
.pbk-posts-archive-hero-wrap {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  margin-bottom: 4rem;
  padding-inline: 1rem;
}

.pbk-posts-archive-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border-radius: 0.5rem;
  background: #193cb8;
}

.pbk-posts-archive-hero__content {
  order: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  min-height: 8.1875rem;
  padding: 1.5rem 1rem;
  background: #193cb8;
  color: #ffffff;
}

.pbk-posts-archive-hero__title {
  margin: 0;
  color: inherit;
  font-size: 2.25rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.pbk-posts-archive-hero__lead {
  max-width: 42rem;
  color: #dbeafe;
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 500;
}

.pbk-posts-archive-hero__lead p {
  margin: 0;
}

.pbk-posts-archive-hero__media {
  order: 1;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #ffffff;
}

.pbk-posts-archive-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 40rem) {
  .pbk-posts-archive-hero-wrap {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 48rem) {
  .pbk-posts-archive-hero__content {
    min-height: 10.1875rem;
    padding: 2rem;
    gap: 1rem;
  }

  .pbk-posts-archive-hero__title {
    font-size: 3rem;
    line-height: 1.185;
    letter-spacing: -0.075rem;
  }

  .pbk-posts-archive-hero__lead {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 64rem) {
  .pbk-posts-archive-hero-wrap {
    margin-bottom: 4rem;
    padding-inline: 2rem;
  }

  .pbk-posts-archive-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pbk-posts-archive-hero__content {
    order: 1;
    padding: 3rem;
  }

  .pbk-posts-archive-hero__media {
    order: 2;
  }

  .pbk-posts-archive-hero__title {
    font-size: 3rem;
    line-height: 3.5625rem;
  }

  .pbk-posts-archive-hero__lead {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 80rem) {
  .pbk-posts-archive-hero__content {
    padding: 4rem;
  }
}