/**
 * Home overrides — fills in styles that were originally in WP core block CSS
 * or the sf-blocks plugin (not bundled in this Drupal repo).
 *
 * Drives issues reported against blog.demowriter.com parity on the home page.
 */

/* ---------------------------------------------------------------------------
 * Global WP core block CSS fallbacks.
 * ------------------------------------------------------------------------- */
.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 28px;
}

@media (min-width: 782px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: nowrap;
  }
}

@media (max-width: 781px) {
  .wp-block-columns {
    flex-direction: column;
    gap: 24px;
  }
}

.wp-block-column {
  flex: 1 1 0%;
  min-width: 0;
  word-break: break-word;
}

.wp-block-image {
  margin: 0 0 16px;
}

.wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

.wp-block-heading {
  font-family: "Poppins", sans-serif;
}

/* WP block button — used by "Explore WRITER Agent" and the IT-teams cards. */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
}

.wp-block-button__link,
a.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 999px;
  background-color: transparent;
  color: inherit;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid currentColor;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-button__link:hover {
  background-color: currentColor;
}

.wp-block-button__link:hover {
  color: #fff;
}

/* Hero CTA — match the dark pill used on writer.com. */
.activate_product_hero .wp-block-button__link,
.ap_hero__buttons .wp-block-button__link {
  background-color: #111;
  color: #fff;
  border-color: #111;
  padding: 14px 28px;
  font-size: 16px;
}

.activate_product_hero .wp-block-button__link:hover,
.ap_hero__buttons .wp-block-button__link:hover {
  background-color: #333;
  color: #fff;
}

/* Dark sections use a light pill. */
.dark-section .wp-block-button__link {
  color: #fff;
  border-color: #fff;
}

.dark-section .wp-block-button__link:hover {
  background-color: #fff;
  color: #111;
}

/* ---------------------------------------------------------------------------
 * Header nav visibility over the white hero — force dark text.
 * ------------------------------------------------------------------------- */
body.home .header .main-menu > li > a,
body.home .header .logo-wrap a {
  color: #111;
}

body.home .header .topline .logo img {
  filter: none;
}

/* ---------------------------------------------------------------------------
 * Offset the header so it sits below the privacy banner rather than behind it.
 * The banner is `position: relative; z-index: 140` with a 44px min-height on
 * desktop, 40px on tablet, 52px on narrow mobile — match those offsets.
 * ------------------------------------------------------------------------- */
body.home .header {
  top: 44px;
}

@media (max-width: 759.98px) {
  body.home .header {
    top: 40px;
  }
}

@media (max-width: 479.98px) {
  body.home .header {
    top: 52px;
  }
}

/* If the banner is dismissed, collapse the offset. */
body.home:has(.wpm-banner-pv.is-hidden) .header {
  top: 0;
}

/* ---------------------------------------------------------------------------
 * DNA ("company's DNA, encoded in AI agents") — force 2x2 grid.
 * Uses .wp-block-columns layout inside the section right after the headline.
 * ------------------------------------------------------------------------- */
.hp__features-section .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-inline: auto;
  max-width: 1080px;
}

@media (max-width: 759.98px) {
  .hp__features-section .wp-block-columns {
    grid-template-columns: 1fr;
  }
}

.hp__features-section .wp-block-column {
  flex: unset;
}

.hp__features-section > .container-default-sm > .sf-block--wrapper .wp-block-image,
.hp__features-section .wp-block-columns .wp-block-image {
  margin: 0;
}

.hp__features-section .wp-block-columns .wp-block-image img {
  width: 100%;
  border-radius: 20px;
  image-rendering: -webkit-optimize-contrast;
}

/* hp__agent-section: the small icon above the WRITER AGENT / KEY FEATURES
 * labels is rendered inside `.hp-head-section > figure.wp-block-image > img`
 * with no explicit size; the inline `.hp-head-section img { width: 16px }`
 * rule is tied (0,1,1) in specificity with `.wp-block-image img`, so the
 * inline rule wins via cascade order. Keep our overrides away from anything
 * that would match `.hp-head-section img`. */
.hp-head-section .wp-block-image {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.hp-head-section .wp-block-image img {
  display: inline-block;
  width: auto;
  max-width: 28px;
  height: auto;
  margin: 0 auto;
}


.hp__agent-section .writer-agent-slider {
  max-width: 1080px;
  margin: 32px auto 0;
}

.hp__agent-section .writer-agent-slider .wp-block-image {
  margin: 0;
}

.hp__agent-section .writer-agent-slider .wp-block-image img {
  width: 100%;
  border-radius: 18px;
  image-rendering: -webkit-optimize-contrast;
}

/* ---------------------------------------------------------------------------
 * IT teams (hp-platform dark-section) — make the 3 columns horizontal.
 * ------------------------------------------------------------------------- */
.hp-platform .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}

@media (max-width: 1117.98px) {
  .hp-platform .wp-block-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 759.98px) {
  .hp-platform .wp-block-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.hp-platform .wp-block-column {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: unset;
}

.hp-platform .wp-block-column .wp-block-image {
  margin: 0 0 18px;
}

.hp-platform .wp-block-column .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

/* Pill CTA — white, dark text, chevron. */
.hp-platform .wp-block-button__link {
  align-self: flex-start;
  background-color: #fff;
  color: #111;
  border-color: #fff;
  padding: 12px 26px;
  font-size: 15px;
  margin-top: auto;
}

.hp-platform .wp-block-button__link:hover {
  background-color: #f0f1f4;
  color: #111;
  border-color: #f0f1f4;
}

.hp-platform h6 {
  color: #b4b7bd;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}

.hp-platform h5 {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

.hp-platform p {
  color: #cfd1d6;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}

/* ---------------------------------------------------------------------------
 * Customer spotlight cards — bare image with "↗ See the case study" below.
 * No border or card chrome; small arrow sits to the left of the label.
 * ------------------------------------------------------------------------- */
.spotlight_slider_section .spotlight_card {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.spotlight_slider_section .spotlight_card > figure:first-child {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
}

.spotlight_slider_section .spotlight_card > figure:first-child img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.spotlight_card_body {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 0 0;
}

.spotlight_card_body p {
  margin: 0;
  color: #111;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.spotlight_card_body figure {
  margin: 0;
  flex-shrink: 0;
  order: -1;
}

.spotlight_card_body figure img {
  width: 14px;
  height: auto;
  display: block;
}

/* ---------------------------------------------------------------------------
 * why-writer / "Same team. Exponential impact." — stack the three cards.
 * ------------------------------------------------------------------------- */
.why-writer-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 960px;
  margin: 40px auto 0;
}

.why-writer-content .wp-block-image {
  margin: 0;
}

.why-writer-content .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  image-rendering: -webkit-optimize-contrast;
}

/* ---------------------------------------------------------------------------
 * Bottom CTA (Your AI transformation journey starts today.)
 * ------------------------------------------------------------------------- */
.sf_bottom_cta_block {
  padding: 80px 20px;
}

.sf_bottom_cta_block .sf_bottom_cta_wrapper {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.sf_bottom_cta_block .bottom-cta-text {
  font-family: "Poppins", sans-serif;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #111;
  margin: 0;
}

@media (max-width: 759.98px) {
  .sf_bottom_cta_block .bottom-cta-text {
    font-size: 30px;
  }
}

.sf_bottom_cta_block .bottom-cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.sf_bottom_cta_block .bottom-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sf_bottom_cta_block .bottom-cta-button-0 {
  background-color: transparent;
  color: #000;
  border: 2px solid #000;
}

.sf_bottom_cta_block .bottom-cta-button-0:hover {
  background-color: #000;
  color: #fff;
}

.sf_bottom_cta_block .bottom-cta-button-1 {
  background-color: #000;
  color: #fff;
  border: 2px solid #000;
}

.sf_bottom_cta_block .bottom-cta-button-1:hover {
  background-color: #828282;
  border-color: #828282;
}

/* ---------------------------------------------------------------------------
 * More-resources grid (sf_blocks_more_resources inside hp-resources dark bg).
 * ------------------------------------------------------------------------- */
.sf_blocks_more_resources .sf_more_resources_blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 24px 0;
}

@media (max-width: 759.98px) {
  .sf_blocks_more_resources .sf_more_resources_blocks {
    grid-template-columns: 1fr;
  }
}

.sf_blocks_more_resources .sf_more_resources_block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #fff;
}

.sf_blocks_more_resources .sf_more_resources_block__img {
  margin: 0;
}

.sf_blocks_more_resources .sf_more_resources_block__img img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

.sf_blocks_more_resources .sf_more_resources_block h3 {
  margin: 4px 0 0;
}

.sf_blocks_more_resources .sf_more_resources_block h3 a {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.3;
}

.sf_blocks_more_resources .sf_more_resources_block p {
  color: #c7c9d0;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.sf_blocks_more_resources .sf_more_resources_block .sf_more_resources_block__cta {
  color: #fff;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Hero pink-glow: originally from page-activate-product.css :after. We no
 * longer load that file (it was conflicting with the inline hero rules in
 * the node body). Keep a tamed version that doesn't spill beyond the hero.
 * ------------------------------------------------------------------------- */
.activate_product_hero {
  isolation: isolate;
}

.activate_product_hero > *,
.activate_product_hero > * > * {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
 * High-res images — ensure large section imagery stretches to container.
 * IMPORTANT: do NOT include `.hp-head-section`-descended selectors here, that
 * would clobber the inline `.hp-head-section img { width: 16px }` rule used
 * for the small ↗ icon above "WRITER AGENT" / "KEY FEATURES" headings.
 * ------------------------------------------------------------------------- */
.hp__agent-section .writer-agent-slider .wp-block-image img,
.hp__features-section .wp-block-columns .wp-block-image img,
.why-writer-content .wp-block-image img,
.hp-platform .wp-block-column > .wp-block-image img,
.sf_blocks_more_resources img {
  max-width: 100%;
  width: 100%;
}