/* ==========================================================================
   HOL subscription page layouts
   Neutral structural styles shared across publication sites.
   Typography, colors, and global button design remain theme-owned.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page wrappers
   -------------------------------------------------------------------------- */

.hol-subscribe-page,
.hol-subscribe-faq {
  width: 100%;
}

@supports (container-type: inline-size) {
  .hol-subscribe-page {
    container-type: inline-size;
    container-name: hol-subscribe-page;
  }
}

.hol-subscribe-page__header {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

/* --------------------------------------------------------------------------
   Child margin normalization
   -------------------------------------------------------------------------- */

.hol-subscribe-page__header > :first-child,
.hol-subscribe-section > :first-child,
.hol-subscribe-card > :first-child,
.hol-subscribe-notice > :first-child,
.hol-subscribe-faq > :first-child,
.hol-subscribe-page__header > .wp-block-group__inner-container > :first-child,
.hol-subscribe-section > .wp-block-group__inner-container > :first-child,
.hol-subscribe-card > .wp-block-group__inner-container > :first-child,
.hol-subscribe-notice > .wp-block-group__inner-container > :first-child,
.hol-subscribe-faq > .wp-block-group__inner-container > :first-child {
  margin-top: 0;
}

.hol-subscribe-page__header > :last-child,
.hol-subscribe-section > :last-child,
.hol-subscribe-card > :last-child,
.hol-subscribe-notice > :last-child,
.hol-subscribe-faq > :last-child,
.hol-subscribe-page__header > .wp-block-group__inner-container > :last-child,
.hol-subscribe-section > .wp-block-group__inner-container > :last-child,
.hol-subscribe-card > .wp-block-group__inner-container > :last-child,
.hol-subscribe-notice > .wp-block-group__inner-container > :last-child,
.hol-subscribe-faq > .wp-block-group__inner-container > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.hol-subscribe-section {
  --hol-subscribe-card-gap: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hol-subscribe-card-gap);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  min-width: 0;
}

.hol-subscribe-section > .wp-block-group__inner-container {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hol-subscribe-card-gap);
  width: 100%;
  min-width: 0;
}

.hol-subscribe-section > h2,
.hol-subscribe-section > p,
.hol-subscribe-section > .wp-block-group__inner-container > h2,
.hol-subscribe-section > .wp-block-group__inner-container > p,
.hol-subscribe-section > .wp-block-columns,
.hol-subscribe-section > .wp-block-group__inner-container > .wp-block-columns {
  grid-column: 1 / -1;
}

.hol-subscribe-section > h2:first-child,
.hol-subscribe-section > .wp-block-group__inner-container > h2:first-child {
  margin-top: 0;
}

.hol-subscribe-section > .wp-block-columns,
.hol-subscribe-section > .wp-block-group__inner-container > .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--hol-subscribe-card-gap);
  width: 100%;
  min-width: 0;
  margin: 0;
}

.hol-subscribe-section .wp-block-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hol-subscribe-section > .hol-subscribe-card,
.hol-subscribe-section > .wp-block-group__inner-container > .hol-subscribe-card,
.hol-subscribe-section .wp-block-column > .hol-subscribe-card {
  width: 100%;
  flex: 1;
  min-width: 0;
}

.hol-subscribe-section .hol-subscribe-card + .hol-subscribe-card {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.hol-subscribe-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid currentColor;
}

.hol-subscribe-card > .wp-block-group__inner-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.hol-subscribe-card + .hol-subscribe-card {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.hol-subscribe-card .wp-block-buttons {
  width: 100%;
  margin-top: auto;
  padding-top: 1.5rem;
}

.hol-subscribe-card .wp-block-button,
.hol-subscribe-card .wp-block-button__link {
  width: 100%;
}

.hol-subscribe-card .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hol-subscribe-card .wp-block-button__link:hover,
.hol-subscribe-card .wp-block-button__link:focus,
.hol-subscribe-card .wp-block-button__link:focus-visible,
.hol-subscribe-card .wp-block-button__link:active {
  color: var(
    --hol-subscribe-card-button-state-text,
    var(--hol-subscribe-card-button-text, #fff)
  );
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.hol-subscribe-notice {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-inline-start: 0.35rem solid currentColor;
}

.hol-subscribe-notice h2 {
  font-size: inherit;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.hol-subscribe-faq {
  margin-top: clamp(4rem, 8vw, 7rem);
}

.hol-subscribe-faq > h2,
.hol-subscribe-faq > .wp-block-group__inner-container > h2 {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hol-subscribe-faq > h3,
.hol-subscribe-faq > .wp-block-group__inner-container > h3 {
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.75rem;
}

.hol-subscribe-faq > h3 + p,
.hol-subscribe-faq > .wp-block-group__inner-container > h3 + p {
  margin-top: 0;
}

.hol-subscribe-faq .wp-block-buttons {
  margin-top: 1rem;
}

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

@media (max-width: 600px) {
  .hol-subscribe-card .wp-block-button {
    width: 100%;
  }

  .hol-subscribe-card .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 760px) {
  .hol-subscribe-section,
  .hol-subscribe-section > .wp-block-group__inner-container,
  .hol-subscribe-section > .wp-block-columns,
  .hol-subscribe-section
    > .wp-block-group__inner-container
    > .wp-block-columns {
    grid-template-columns: 1fr;
  }
}

@supports (container-type: inline-size) {
  @container hol-subscribe-page (max-width: 37.5rem) {
    .hol-subscribe-card .wp-block-button {
      width: 100%;
    }

    .hol-subscribe-card .wp-block-button__link {
      width: 100%;
      text-align: center;
    }
  }

  @container hol-subscribe-page (max-width: 47.5rem) {
    .hol-subscribe-section,
    .hol-subscribe-section > .wp-block-group__inner-container,
    .hol-subscribe-section > .wp-block-columns,
    .hol-subscribe-section
      > .wp-block-group__inner-container
      > .wp-block-columns {
      grid-template-columns: 1fr;
    }
  }
}