/* Page-builder blocks. One style sheet for the public site and for the live previews of the block editor in the admin
   panel, so an editor sees exactly what the site shows. Design tokens come from im.css (and the brand settings).
   A block is ".page-block" with: block-{type}, style-{text|heading|quote|checklist|steps|stats}, accent-{colour},
   optionally is-framed frame-{side|top|box|band} (side and top are cards: is-card), and for text beside a picture or a
   video: has-image media-{start|end|top} media-{small|medium|large}. */
.prose { font-size: var(--im-text-prose); line-height: 2.05; overflow-wrap: anywhere; }
.prose p { margin-block-end: var(--im-space-5); }
.prose p:last-child { margin-block-end: 0; }

.page-blocks { display: grid; gap: var(--im-space-8); margin-block-start: var(--im-space-8); }
.page-block {
  --block-accent: var(--im-navy-950); --block-ink: var(--im-navy-950); --block-on: #fff; --block-tint: #eef1f6; --block-line: #cfd6e4; --block-mark: var(--im-gold-500);
  display: grid; gap: var(--im-space-5); border-radius: var(--im-radius-lg); min-inline-size: 0;
}
.page-block.accent-gold { --block-accent: var(--im-gold-500); --block-ink: var(--im-gold-700); --block-on: var(--im-navy-950); --block-tint: var(--im-gold-50); --block-line: var(--im-gold-200); --block-mark: var(--im-gold-500); }
.page-block.accent-blue { --block-accent: var(--im-primary); --block-ink: var(--im-blue-800); --block-on: #fff; --block-tint: var(--im-blue-50); --block-line: var(--im-blue-100); --block-mark: var(--im-primary); }
.page-block.accent-amber { --block-accent: var(--im-warning); --block-ink: var(--im-warning); --block-on: #fff; --block-tint: var(--im-warning-bg); --block-line: #f0d9ae; --block-mark: var(--im-warning); }

/* Backgrounds of a block without a frame (older option, still available under "more settings"). */
.page-block.tone-muted { background: var(--im-surface); border: 1px solid var(--im-border); padding: var(--im-space-6); }
.page-block.tone-accent { background: linear-gradient(160deg, var(--im-gold-50), var(--im-surface)); border: 1px solid var(--im-gold-200); padding: var(--im-space-6); }

/* Text of a block and its heading: a short bar in the brand colour marks every heading. */
.page-block-text { display: grid; gap: var(--im-space-3); justify-items: start; align-content: start; min-inline-size: 0; }
.page-block-text > .prose, .page-block-text > ul, .page-block-text > ol, .page-block-text > figure { justify-self: stretch; }
.page-block-title { position: relative; margin: 0; padding-inline-start: var(--im-space-4); font-size: var(--im-text-2xl); color: var(--im-navy-950); }
.page-block-title::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: .3em; inline-size: 5px; border-radius: 3px; background: var(--block-mark); }
.page-block.align-center { text-align: center; justify-items: center; }
.page-block.align-center .page-block-text { justify-items: center; }
.page-block.align-center .prose { margin-inline: auto; }
.page-block.align-center .page-block-title { padding-inline-start: 0; padding-block-end: var(--im-space-3); }
.page-block.align-center .page-block-title::before { inset-block: auto 0; inset-inline: 0; margin-inline: auto; inline-size: 3.5rem; block-size: 4px; }
.page-block-icon { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--im-radius-md); background: var(--block-tint); color: var(--block-ink); flex: none; }
.page-block-icon .icon { inline-size: 1.4rem; block-size: 1.4rem; }
.page-block-more { display: inline-flex; align-items: center; gap: var(--im-space-1); font-size: var(--im-text-sm); font-weight: 600; color: var(--im-blue-800); text-decoration: none; }
.page-block-more:hover { text-decoration: underline; }
.page-block-more .icon { transition: transform var(--im-duration); }
.page-block-more:hover .icon { transform: translateX(-3px); }

/* Section heading: a large coloured title on a line that fades out. */
.page-block.style-heading { gap: var(--im-space-2); }
.page-block.style-heading .page-block-text { justify-items: stretch; }
.page-block.style-heading .page-block-title { padding-inline-start: 0; padding-block-end: var(--im-space-3); font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.25rem); color: var(--block-ink); }
.page-block.style-heading .page-block-title::before { inset-block: auto 0; inset-inline-start: 0; inline-size: 4.5rem; block-size: 5px; }
.page-block.style-heading .page-block-title::after { content: ""; position: absolute; inset-block-end: 2px; inset-inline: 5.25rem 0; block-size: 1px; background: var(--im-border); }
.page-block.style-heading .prose { color: var(--im-text-secondary); font-size: var(--im-text-lg); }
.page-block.style-heading.align-center .page-block-title::before { inset-inline: 0; }
.page-block.style-heading.align-center .page-block-title::after { display: none; }
.page-block.style-heading .page-block-icon { background: var(--block-accent); color: var(--block-on); }

/* Quote: the sentence in large type next to a round quotation mark, with who said it underneath. */
.block-quote { position: relative; margin: 0; padding: var(--im-space-6) var(--im-space-6) var(--im-space-6) var(--im-space-6); padding-inline-start: 5.75rem; border-radius: var(--im-radius-lg); background: var(--block-tint); overflow: hidden; }
.block-quote::after { content: ""; position: absolute; inset-inline-end: -3.5rem; inset-block-end: -3.5rem; inline-size: 10rem; block-size: 10rem; border-radius: 50%; border: 1.5rem solid color-mix(in srgb, var(--block-accent) 9%, transparent); }
.block-quote-mark { position: absolute; inset-inline-start: var(--im-space-5); inset-block-start: var(--im-space-5); display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; background: var(--block-accent); color: var(--block-on); }
.block-quote-mark .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.block-quote blockquote { position: relative; z-index: 1; margin: 0; font-size: var(--im-text-xl); font-weight: 600; line-height: 1.95; color: var(--im-navy-950); }
.block-quote blockquote p { margin: 0 0 var(--im-space-2); }
.block-quote blockquote p:last-child { margin: 0; }
.block-quote figcaption { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--im-space-2); margin-block-start: var(--im-space-4); font-size: var(--im-text-sm); font-weight: 700; color: var(--block-ink); }
.block-quote figcaption::before { content: ""; inline-size: 1.75rem; block-size: 2px; background: var(--block-accent); }

/* Lists read from the lines of the text: ticks, numbered steps and key figures. */
.block-checklist, .block-steps, .block-stats { list-style: none; margin: 0; padding: 0; }
.block-checklist { display: grid; gap: var(--im-space-3); }
.block-checklist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--im-space-3); align-items: start; font-size: var(--im-text-prose); line-height: 1.9; }
.block-check { display: grid; place-items: center; inline-size: 1.65rem; block-size: 1.65rem; margin-block-start: .2rem; border-radius: 50%; background: var(--block-tint); color: var(--block-ink); }
.block-check .icon { inline-size: 1rem; block-size: 1rem; stroke-width: 2.6; }
.block-checklist strong, .block-steps strong { color: var(--im-navy-950); }
.block-checklist .block-line-rest::before { content: " — "; color: var(--im-text-secondary); }
.block-steps { counter-reset: block-step; display: grid; }
.block-steps li { counter-increment: block-step; position: relative; min-block-size: 2.6rem; padding-inline-start: 3.6rem; padding-block-end: var(--im-space-5); font-size: var(--im-text-prose); line-height: 1.9; }
.block-steps li::before { content: counter(block-step, persian); position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; background: var(--block-accent); color: var(--block-on); font-weight: 700; box-shadow: 0 0 0 4px var(--block-tint); }
.block-steps li::after { content: ""; position: absolute; inset-inline-start: calc(1.3rem - 1px); inset-block: 3rem .25rem; inline-size: 2px; background: var(--block-line); }
.block-steps li:last-child { padding-block-end: 0; }
.block-steps li:last-child::after { display: none; }
.block-steps li > span { display: block; padding-block-start: .3rem; }
.block-steps strong { display: block; }
.block-stats { display: grid; gap: var(--im-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.block-stats li { display: grid; gap: var(--im-space-1); align-content: center; padding: var(--im-space-5) var(--im-space-3); border-radius: var(--im-radius-lg); background: var(--im-surface); border: 1px solid var(--im-border); border-block-end: 4px solid var(--block-accent); text-align: center; }
.block-stat-value { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); font-weight: 800; line-height: 1.5; color: var(--block-ink); }
.block-stat-label { font-size: var(--im-text-sm); color: var(--im-text-secondary); }

/* Frames. Cards: an accent line at the side (like the clarification card) or on top (like the statement card). */
.page-block.is-framed { padding: var(--im-space-5) var(--im-space-6); gap: var(--im-space-4); overflow-wrap: anywhere; }
.page-block.is-framed .page-block-title { padding-inline-start: 0; font-size: var(--im-text-xl); }
.page-block.is-framed .page-block-title::before { display: none; }
.page-block.is-card { background: var(--im-surface); border: 1px solid var(--im-border); transition: border-color var(--im-duration), box-shadow var(--im-duration); }
.page-block.is-card.tone-accent { background: linear-gradient(160deg, var(--im-gold-50), var(--im-surface)); }
.page-block.is-card:hover { box-shadow: var(--im-shadow-md); }
.page-block.frame-side { border-inline-start: 5px solid var(--block-accent); }
.page-block.frame-top { border-block-start: 4px solid var(--block-accent); }
.page-block.is-card .prose { color: var(--im-text-secondary); }
.page-block.is-card .page-block-media img { border-radius: var(--im-radius-md); }
/* Box: a tinted note with its icon beside the text. */
.page-block.frame-box { background: var(--block-tint); border: 1px solid var(--block-line); }
.page-block.frame-box > .page-block-text { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--im-space-4); }
.page-block.frame-box > .page-block-text > * { grid-column: 2; }
.page-block.frame-box > .page-block-text > .page-block-icon { grid-column: 1; grid-row: 1 / span 2; align-self: start; background: var(--block-accent); color: var(--block-on); }
.page-block.frame-box .block-check { background: var(--im-surface); }
.page-block.frame-box .page-block-title { color: var(--block-ink); }
/* Band: the main message on the brand colour, with two quiet circles behind it. */
.page-block.frame-band { position: relative; overflow: hidden; padding: var(--im-space-8); background: linear-gradient(135deg, var(--block-accent), color-mix(in srgb, var(--block-accent) 76%, #000)); color: var(--block-on); }
.page-block.frame-band::before { content: ""; position: absolute; inset-inline-end: -4rem; inset-block-start: -6rem; inline-size: 15rem; block-size: 15rem; border-radius: 50%; background: var(--im-glass-1); }
.page-block.frame-band::after { content: ""; position: absolute; inset-inline-end: 6rem; inset-block-end: -4.5rem; inline-size: 9rem; block-size: 9rem; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--im-gold-500) 45%, transparent); }
.page-block.frame-band > * { position: relative; z-index: 1; }
/* The keyboard ring on a band takes the colour of its text, which keeps 4.5:1 on any accent. */
.page-block.frame-band { --im-focus: currentColor; }
.page-block.frame-band .page-block-title, .page-block.frame-band .prose, .page-block.frame-band strong, .page-block.frame-band .block-quote blockquote, .page-block.frame-band .block-quote figcaption, .page-block.frame-band .block-stat-value, .page-block.frame-band .block-stat-label { color: inherit; }
.page-block.frame-band .page-block-title { font-size: var(--im-text-2xl); }
.page-block.frame-band .prose { opacity: .92; }
.page-block.frame-band .page-block-icon, .page-block.frame-band .block-check { background: var(--im-glass-2); color: inherit; }
.page-block.frame-band .block-steps li::before { background: #fff; color: var(--im-navy-950); box-shadow: 0 0 0 4px var(--im-glass-3); }
.page-block.frame-band .block-steps li::after { background: rgba(255, 255, 255, .32); }
.page-block.frame-band .block-stats li { background: var(--im-glass-1); border-color: var(--im-glass-3); border-block-end-color: var(--im-gold-500); }
.page-block.frame-band .block-checklist .block-line-rest::before { color: inherit; }
.page-block.frame-band .block-quote-mark { background: var(--im-glass-2); color: inherit; }
.page-block-cta { background: #fff; color: var(--im-navy-950); border-color: transparent; font-weight: 700; }
.page-block-cta:hover:not([disabled]) { background: var(--im-gold-50); color: var(--im-navy-950); }
/* A quote inside a frame gives up its own background. */
.page-block.is-framed .block-quote { padding: 0; padding-inline-start: 4.25rem; background: transparent; overflow: visible; }
.page-block.is-framed .block-quote::after { display: none; }
.page-block.is-framed .block-quote-mark { inset-inline-start: 0; inset-block-start: 0; }

/* Cards of one frame that follow each other stand side by side. */
.page-block-deck { display: grid; gap: var(--im-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.page-block-deck > .page-block { display: flex; flex-direction: column; }
.page-block-deck > .page-block > .page-block-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.page-block-deck > .page-block.align-center > .page-block-text { align-items: center; }
.page-block-deck .page-block-more { margin-block-start: auto; padding-block-start: var(--im-space-2); }

/* Pictures and videos. Beside a text they stand on a tinted shape that is pushed out of their corner. */
.page-block-media { margin: 0; min-inline-size: 0; }
.page-block .page-block-media img { display: block; inline-size: 100%; block-size: auto; max-block-size: min(32rem, 70vh); aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--im-radius-lg); }
.page-block-media .gallery-link { display: block; aspect-ratio: auto; border-radius: var(--im-radius-lg); overflow: hidden; background: transparent; }
.page-block-media figcaption { display: flex; align-items: center; gap: var(--im-space-2); margin-block-start: var(--im-space-3); font-size: var(--im-text-sm); color: var(--im-text-secondary); }
.page-block-media figcaption::before { content: ""; flex: none; inline-size: 1.25rem; block-size: 2px; background: var(--block-mark); }
.page-block.block-image .page-block-media, .page-block.block-video .page-block-media { inline-size: 100%; max-inline-size: 56rem; margin-inline: auto; }
.page-block.block-image.media-small .page-block-media, .page-block.block-video.media-small .page-block-media { max-inline-size: 34rem; }
.page-block.block-image.media-large .page-block-media, .page-block.block-video.media-large .page-block-media { max-inline-size: none; }
.page-block.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--im-space-8); }
.page-block.has-image.media-small { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.page-block.has-image.media-large { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.page-block.has-image.media-end > .page-block-media { order: 2; }
.page-block.has-image.media-end.media-small { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.page-block.has-image.media-end.media-large { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.page-block.has-image.media-top { grid-template-columns: minmax(0, 1fr); }
.page-block.has-image.media-start .page-block-media img, .page-block.has-image.media-end .page-block-media img { aspect-ratio: 4 / 3; }
.page-block.has-image.media-start:not(.is-framed) > .page-block-media { padding-inline-start: 14px; padding-block-end: 14px; }
.page-block.has-image.media-end:not(.is-framed) > .page-block-media { padding-inline-end: 14px; padding-block-end: 14px; }
.page-block.has-image.media-start:not(.is-framed) > .page-block-media > .gallery-link, .page-block.has-image.media-start:not(.is-framed) > .page-block-media > .video-frame { box-shadow: 14px 14px 0 var(--block-tint); }
.page-block.has-image.media-end:not(.is-framed) > .page-block-media > .gallery-link, .page-block.has-image.media-end:not(.is-framed) > .page-block-media > .video-frame { box-shadow: -14px 14px 0 var(--block-tint); }
@media screen and (max-width: 1000px) {
  .page-block.has-image, .page-block.has-image.media-small, .page-block.has-image.media-large, .page-block.has-image.media-end.media-small, .page-block.has-image.media-end.media-large { grid-template-columns: minmax(0, 1fr); }
  .page-block.has-image.media-end > .page-block-media { order: 0; }
  .page-block.frame-band { padding: var(--im-space-6); }
  .block-quote { padding: var(--im-space-5); padding-block-start: 5rem; }
  .page-block.is-framed .block-quote { padding: 3.75rem 0 0; }
}
/* Bold face (im.css: --im-font-bold) for the parts of a block set in a weight of 600 or more. */
.page-block-more, .block-quote blockquote, .block-quote figcaption, .block-steps li::before, .block-stat-value, .page-block-cta { font-family: var(--im-font-bold); }