/* ============================================================
   Feature-zone patterns.

   Styles for the generic homepage feature patterns (Video feature,
   Two-up, Plain feature). The Product splash renders through the
   `.spec` component (home.css), so it is not styled here. Loaded on
   the front end wherever block content appears, and into the editor
   canvas via add_editor_style() so patterns render identically in both
   (spec §5.2).

   Each block self-constrains to the site gutter and max width, because
   the feature zone renders the_content() without an outer `.wrap`.
   ============================================================ */

.feat-video,
.feat-plain {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--gut);
  padding-block: clamp(48px, 6vw, 88px);
  text-align: center;
}

.feat-video .wp-block-video,
.feat-video figure {
  margin: 28px 0 0;
}

.feat-video video,
.feat-video iframe,
.feat-video .wp-block-embed__wrapper {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--rule);
  display: block;
}

.feat-plain > * + *,
.feat-video > * + * {
  margin-top: 18px;
}

/* Two-up — side-by-side panels for cross-device / comparison copy. */
.feat-2up {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  padding-block: clamp(48px, 6vw, 88px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.feat-2up-panel {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper-2);
}

.feat-2up-panel > * + * {
  margin-top: 14px;
}

/* Shared text-link CTA, matching the site's arrow-link tone. */
.feat-cta {
  margin-top: 26px;
}

.feat-cta a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.feat-cta a:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .feat-2up { grid-template-columns: 1fr; }
}