/* ============================================================
   WPEXTENT — DEFAULT PAGE + GUTENBERG BLOCKS
   assets/css/blocks.css

   Loaded on default (block-editor) pages via page.php.
   Requires global.css + nav.css first. Uses the theme tokens.
   ============================================================ */

body { padding-top: 64px; }

/* ============================================================
   PAGE HERO
   ============================================================ */
.we-page__head {
  position: relative;
  padding: 72px 0 48px;
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
}
.we-page__head::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 85% 0%, var(--color-base-tint) 0%, transparent 60%);
}
.we-page__head::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(13,17,23,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, #000 10%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, #000 10%, transparent 80%);
}
.we-page__head-inner { position: relative; z-index: 1; }
.we-page__crumb {
  margin-bottom: 14px;
  transition: color .18s ease;
}
.we-page__crumb::before { background: var(--color-base); }
.we-page__crumb:hover { color: var(--color-base-hover); }
.we-page__title { margin: 0; max-width: 22ch; }

/* Featured image */
.we-page__feat { padding-top: 40px; }
.we-page__feat-img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--color-line);
  box-shadow: var(--sh-md);
}

/* ============================================================
   CONTENT GRID — supports normal / wide / full alignment
   ============================================================ */
.we-entry {
  --we-content: 760px;
  --we-wide:    1120px;
  --we-breakout: calc((var(--we-wide) - var(--we-content)) / 2);

  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, var(--we-breakout))
    [content-start] min(100% - (var(--gutter) * 2), var(--we-content)) [content-end]
    minmax(0, var(--we-breakout)) [wide-end]
    minmax(var(--gutter), 1fr) [full-end];

  padding: 60px 0 92px;
  font-size: var(--fz-lead);
  color: var(--color-ink-2);
  line-height: var(--lh-lead);
}

/* Default: normal reading column */
.we-entry > * { grid-column: content; min-width: 0; }
/* Wide + full-width alignments */
.we-entry > .alignwide { grid-column: wide; }
.we-entry > .alignfull { grid-column: full; }
.we-entry > .alignfull img { width: 100%; }

/* Left / right floats */
.we-entry .alignleft  { float: left;  margin: .3em 2em 1em 0; }
.we-entry .alignright { float: right; margin: .3em 0 1em 2em; }
.we-entry .aligncenter { margin-left: auto; margin-right: auto; }

/* Vertical rhythm */
.we-entry > * { margin-top: 1.5rem; margin-bottom: 0; }
.we-entry > *:first-child { margin-top: 0; }
.we-entry > h2 { margin-top: 3rem; }
.we-entry > h3 { margin-top: 2.4rem; }
.we-entry > h4 { margin-top: 2rem; }

/* ============================================================
   TYPOGRAPHY INSIDE CONTENT
   ============================================================ */
.we-entry p { font-size: var(--fz-lead); color: var(--color-ink-2); line-height: var(--lh-lead); }

.we-entry h2 { font-size: var(--fz-h2); }
.we-entry h3 { font-size: var(--fz-h3); }
.we-entry h4 { font-size: var(--fz-h4); }
.we-entry h5 { font-size: var(--fz-h5); }
.we-entry h2, .we-entry h3, .we-entry h4, .we-entry h5, .we-entry h6 { color: var(--color-ink); }

/* Links */
.we-entry a {
  color: var(--color-base);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .18s ease;
}
.we-entry a:hover { color: var(--color-base-hover); }

/* Lists */
.we-entry ul, .we-entry ol { padding-left: 1.4em; }
.we-entry li { margin-bottom: .5em; line-height: var(--lh-body); }
.we-entry ul li::marker { color: var(--color-base); }
.we-entry ol li::marker { color: var(--color-base); font-weight: var(--fw-bold); }

/* Strong / emphasis */
.we-entry strong { font-weight: var(--fw-bold); color: var(--color-ink); }

/* Drop the extra top margin for the first heading after nothing */
.we-entry :where(h2, h3, h4) + * { margin-top: 1rem; }

/* ============================================================
   QUOTE + PULLQUOTE
   ============================================================ */
.we-entry blockquote,
.we-entry .wp-block-quote {
  margin-left: 0;
  padding: 6px 0 6px 26px;
  border-left: 3px solid var(--color-base);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.4;
  color: var(--color-ink);
}
.we-entry .wp-block-quote cite,
.we-entry blockquote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fz-small);
  font-weight: var(--fw-medium);
  color: var(--color-ink-3);
}
.we-entry .wp-block-pullquote {
  border-top: 2px solid var(--color-base);
  border-bottom: 2px solid var(--color-base);
  padding: 32px 0;
  text-align: center;
}
.we-entry .wp-block-pullquote blockquote { border: none; padding: 0; }
.we-entry .wp-block-pullquote p { font-family: var(--font-serif); font-size: clamp(24px, 3vw, 32px); font-style: italic; }

/* ============================================================
   BUTTONS  (mapped to theme button style)
   ============================================================ */
.we-entry .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-base);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fz-small);
  font-weight: var(--fw-bold);
  padding: 12px 26px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--color-base);
  transition: var(--trans-base);
  text-decoration: none;
}
.we-entry .wp-block-button__link:hover {
  background: var(--color-base-hover);
  border-color: var(--color-base-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--color-base-border);
  color: #fff;
}
.we-entry .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-gray-3);
}
.we-entry .wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--color-ink);
  background: var(--color-bg-alt);
  color: var(--color-ink);
  box-shadow: none;
}

/* ============================================================
   IMAGES / FIGURES / MEDIA
   ============================================================ */
.we-entry figure { margin: 0; }
.we-entry img { height: auto; border-radius: var(--r-md); }
.we-entry .wp-block-image img { border-radius: var(--r-md); }
.we-entry figcaption,
.we-entry .wp-element-caption {
  margin-top: 10px;
  font-size: var(--fz-small);
  color: var(--color-ink-3);
  text-align: center;
  line-height: 1.5;
}

/* Cover */
.we-entry .wp-block-cover {
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 360px;
}
.we-entry .wp-block-cover .wp-block-cover__inner-container { max-width: var(--we-content); }

/* Media & Text */
.we-entry .wp-block-media-text { border-radius: var(--r-lg); overflow: hidden; }

/* ============================================================
   GROUP / COLUMNS / SEPARATOR / SPACER
   ============================================================ */
.we-entry .wp-block-group.has-background {
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--r-lg);
}
.we-entry .wp-block-columns { gap: 32px; }
.we-entry .wp-block-column { min-width: 0; }

.we-entry .wp-block-separator {
  border: none;
  border-top: 1px solid var(--color-line);
  max-width: 100%;
  margin-top: 2.5rem;
}
.we-entry .wp-block-separator.is-style-dots { border-top: none; }
.we-entry .wp-block-separator.has-css-opacity { opacity: 1; }

/* ============================================================
   TABLE
   ============================================================ */
.we-entry .wp-block-table { overflow-x: auto; }
.we-entry table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fz-body);
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.we-entry th, .we-entry td {
  padding: 12px 16px;
  border: 1px solid var(--color-line);
  text-align: left;
  line-height: 1.6;
}
.we-entry thead th {
  background: var(--color-bg-alt);
  color: var(--color-ink);
  font-weight: var(--fw-bold);
}
.we-entry tbody tr:nth-child(even) { background: var(--color-bg-alt); }
.we-entry .wp-block-table figcaption { text-align: center; }

/* ============================================================
   CODE
   ============================================================ */
.we-entry code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--color-base-tint);
  color: var(--color-base-hover);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}
.we-entry pre,
.we-entry .wp-block-code {
  background: var(--color-bg-dark);
  color: #e8e3dd;
  padding: 20px 22px;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: var(--fz-small);
  line-height: 1.7;
}
.we-entry pre code, .we-entry .wp-block-code code {
  background: none;
  color: inherit;
  padding: 0;
}

/* ============================================================
   PAGINATED PAGES (<!--nextpage-->)
   ============================================================ */
.we-entry__pages {
  grid-column: content;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 2.5rem;
  font-size: var(--fz-small);
  font-weight: var(--fw-bold);
  color: var(--color-ink-3);
}
.we-entry__pages a span,
.we-entry__pages > span {
  display: inline-flex;
  min-width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid var(--color-line);
  border-radius: var(--r-sm);
}
.we-entry__pages a:hover span { border-color: var(--color-base); color: var(--color-base); }

/* ============================================================
   COLOUR + FONT-SIZE PRESET CLASSES
   (from editor-color-palette / editor-font-sizes)
   ============================================================ */
.we-entry .has-base-color  { color: #dc4a1a; }
.we-entry .has-ink-color   { color: #0d1117; }
.we-entry .has-body-color  { color: #3d342c; }
.we-entry .has-muted-color { color: #7a716a; }
.we-entry .has-white-color { color: #ffffff; }

.we-entry .has-base-background-color  { background-color: #dc4a1a; }
.we-entry .has-ink-background-color   { background-color: #0d1117; }
.we-entry .has-line-background-color  { background-color: #ebe7e2; }
.we-entry .has-soft-background-color  { background-color: #f9f7f5; }
.we-entry .has-white-background-color { background-color: #ffffff; }

.we-entry .has-small-font-size   { font-size: 14px; }
.we-entry .has-normal-font-size  { font-size: 17px; }
.we-entry .has-large-font-size   { font-size: 24px; line-height: 1.4; }
.we-entry .has-x-large-font-size { font-size: 34px; line-height: 1.2; }

/* Give blocks with a background sensible inner padding + readable text */
.we-entry .has-background:not(.wp-block-button__link) {
  padding: clamp(20px, 3vw, 36px);
  border-radius: var(--r-lg);
}
.we-entry .has-ink-background-color,
.we-entry .has-base-background-color {
  color: #fff;
}
.we-entry .has-ink-background-color a,
.we-entry .has-base-background-color a { color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .we-page__head { padding: 52px 0 36px; }
  .we-entry { padding: 44px 0 64px; }
  .we-entry .wp-block-columns { gap: 20px; }
}