/**
 * blocks.css — brand styling for native Gutenberg core blocks.
 *
 * Powers the "fully editable page" model: a page built entirely from core blocks
 * (cover, heading, columns, image, media-text, buttons, group, quote) renders via
 * the Block Canvas template (page-canvas.php) → the_content(), so it's 100%
 * editable / rearrangeable in the block editor AND server-rendered (SEO-clean).
 * This file (a) gives a classic theme its content/wide widths so alignfull /
 * alignwide work without theme.json, and (b) repaints the generic core blocks in
 * the UFOREA wonderland palette so the result looks like a bespoke landing page.
 *
 * Loaded two ways (see inc/template-blocks.php): frontend (only on Pages with
 * blocks) and the editor canvas (add_editor_style), so the backend matches.
 */

/* ════════════════════════════════════════════════════════════════════
   1. BLOCK CANVAS — full-width layout system (replaces theme.json widths)
   ════════════════════════════════════════════════════════════════════ */
.uforea-canvas { overflow-x: hidden; overflow-x: clip; }

/* Default (unaligned) blocks: a comfortable reading column, centred. */
.uforea-canvas > * {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 22px;
  padding-right: 22px;
}
/* Wide + full alignment. */
.uforea-canvas > .alignwide { max-width: 1180px; }
.uforea-canvas > .alignfull {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Vertical rhythm between top-level sections. */
.uforea-canvas > * { margin-top: 60px; margin-bottom: 60px; }
.uforea-canvas > .wp-block-cover.alignfull:first-child { margin-top: 0; }
.uforea-canvas > .wp-block-group.alignfull { margin-top: 0; margin-bottom: 0; }

/* Full-bleed coloured bands keep their content in the reading column. */
.uforea-canvas > .wp-block-group.alignfull > * {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.uforea-canvas > .wp-block-group.alignfull {
  padding-top: clamp(52px, 7vw, 92px);
  padding-bottom: clamp(52px, 7vw, 92px);
  padding-left: 22px;
  padding-right: 22px;
}

/* ════════════════════════════════════════════════════════════════════
   2. TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════ */
.wp-block-heading,
.wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3 {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.01em;
  color: var(--ink-strong, #2F2A28);
  line-height: 1.12;
}
h1.wp-block-heading { font-size: clamp(2.1rem, 5vw, 3.2rem); margin: 0 0 .4em; }
h2.wp-block-heading { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0 0 .45em; }
h3.wp-block-heading { font-size: clamp(1.2rem, 3vw, 1.5rem); margin: .2em 0 .35em; }
.uforea-canvas p { line-height: 1.72; }
.uforea-canvas .has-text-align-center { margin-left: auto; margin-right: auto; }

/* ════════════════════════════════════════════════════════════════════
   3. COVER (hero)
   ════════════════════════════════════════════════════════════════════ */
.wp-block-cover {
  border-radius: 22px;
  overflow: hidden;
  padding: clamp(30px, 6vw, 72px);
  box-shadow: var(--shadow-soft, 0 8px 30px rgba(63,63,63,.08));
}
.uforea-canvas > .wp-block-cover.alignfull {
  border-radius: 0;
  box-shadow: none;
  min-height: clamp(460px, 68vh, 640px);
}
.wp-block-cover h1, .wp-block-cover h2,
.wp-block-cover p, .wp-block-cover .wp-block-paragraph { color: #fff; }
.wp-block-cover h1 { text-shadow: 0 2px 22px rgba(0,0,0,.4); }
.wp-block-cover p {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  max-width: 52ch;
  margin-inline: auto;
  opacity: .96;
}
.wp-block-cover .wp-block-buttons { margin-top: 26px; }

/* ════════════════════════════════════════════════════════════════════
   4. BUTTONS — signature yellow pill + ghost outline
   ════════════════════════════════════════════════════════════════════ */
.wp-block-button__link {
  background: var(--uforea-yellow, #FFBA01);
  color: var(--ink-strong, #2F2A28);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  border-radius: 999px;
  padding: 15px 32px;
  box-shadow: 0 6px 0 var(--yellow-deep, #E0A300);
  transition: transform .12s ease, box-shadow .12s ease;
}
.wp-block-button__link:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 var(--yellow-deep, #E0A300);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,.16);
  transform: none;
}
/* Outline buttons on a light band switch to ink text. */
.wp-block-group.has-background .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--ink-strong, #2F2A28);
  border-color: var(--ink-strong, #2F2A28);
}

/* ════════════════════════════════════════════════════════════════════
   5. COLUMNS / feature cards — equal-height cropped images
   ════════════════════════════════════════════════════════════════════ */
.wp-block-columns { gap: clamp(20px, 3vw, 36px); align-items: flex-start; }
.uforea-canvas .wp-block-columns .wp-block-image { margin: 0 0 16px; }
.uforea-canvas .wp-block-columns .wp-block-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.uforea-canvas .wp-block-column > .wp-block-heading { margin-top: 0; }
.uforea-canvas .wp-block-column > p { margin-top: 0; color: var(--ink, #3F3F3F); }

/* ════════════════════════════════════════════════════════════════════
   6. IMAGES + MEDIA & TEXT
   ════════════════════════════════════════════════════════════════════ */
.wp-block-image img {
  border-radius: 16px;
  box-shadow: var(--shadow-card, 0 4px 18px rgba(63,63,63,.06));
}
.wp-block-cover .wp-block-image img,
.wp-block-cover__image-background { border-radius: 0; box-shadow: none; }
.wp-block-image figcaption {
  text-align: center;
  color: var(--mute, #777);
  font-size: 14px;
  margin-top: 10px;
}
.uforea-canvas .wp-block-media-text { border-radius: 20px; overflow: hidden; gap: clamp(20px,4vw,48px); }
.uforea-canvas .wp-block-media-text__media img { border-radius: 0; box-shadow: none; }
.uforea-canvas .wp-block-media-text__content { padding: clamp(8px, 3vw, 32px); }

/* ════════════════════════════════════════════════════════════════════
   7. GROUP bands + QUOTE
   ════════════════════════════════════════════════════════════════════ */
.wp-block-group.has-background { border-radius: 22px; }
.uforea-canvas > .wp-block-group.alignfull.has-background { border-radius: 0; }
.wp-block-quote {
  border-left: 4px solid var(--uforea-yellow, #FFBA01);
  padding: 6px 0 6px 22px;
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--ink-strong, #2F2A28);
}
.wp-block-quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .9rem;
  color: var(--mute, #777);
}

/* ════════════════════════════════════════════════════════════════════
   8. MOBILE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 781px) {
  .uforea-canvas > * { margin-top: 44px; margin-bottom: 44px; }
  .uforea-canvas .wp-block-columns { gap: 24px; }
  .uforea-canvas .wp-block-media-text { border-radius: 16px; }
}