/* Shared by published blocks, the block editor and the full-post preview. */
.tpl-sequence {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  min-width: 0;
}

.category-post-flow,
.category-post-entry,
.category-post-render { min-width: 0; }
.category-post-render { grid-template-columns: minmax(0, 1fr); }

.tpl.tpl-editorial {
  container: blog-block / inline-size;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}

.tpl-block-heading {
  margin: 0 0 24px;
  padding: 0;
  text-align: left;
}

.tpl-editorial .tpl-block-heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif-font);
  font-size: var(--block-title-size, 36px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.tpl-align-center { text-align: center; }
.tpl-align-right { text-align: right; }

.tpl-block-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 32px;
  align-items: start;
}

.tpl-block-video-right .tpl-block-layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.tpl-editorial.tpl-block-video-right .tpl-block-media {
  grid-column: 2;
  grid-row: 1;
}

.tpl-editorial.tpl-block-video-right .tpl-block-copy {
  grid-column: 1;
  grid-row: 1;
}

.tpl-editorial:is(.tpl-block-image-bottom, .tpl-block-video-bottom, .tpl-block-media-only) .tpl-block-layout {
  grid-template-columns: minmax(0, 1fr);
}

.tpl-editorial.tpl-block-media-only .tpl-block-media {
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}

.tpl-block-image-duo.tpl-block-media-only .tpl-block-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tpl-block-copy,
.tpl-block-media {
  min-width: 0;
  align-self: start;
}

/* Both floats precede the copy so lines reclaim space as each image ends. */
.tpl-block-wrap {
  display: flow-root;
}

.tpl-block-wrap > .tpl-block-media {
  float: left;
  width: 40%;
  max-width: 400px;
  margin: 4px 28px 16px 0;
}

.tpl-block-image-right .tpl-block-wrap > .tpl-block-media {
  float: right;
  margin: 4px 0 16px 28px;
}

.tpl-block-image-duo .tpl-block-wrap > .tpl-block-media {
  width: 27%;
  max-width: 280px;
  margin: 4px 24px 16px 0;
}

.tpl-block-image-duo .tpl-block-wrap > .tpl-block-media-second {
  float: right;
  margin: 4px 0 16px 24px;
}

.tpl-block-media img,
.tpl-block-media video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  border-radius: 6px;
}

.tpl-block-media video {
  background: #15191c;
}

.tpl-media-placeholder,
.tpl-block-media .skeleton {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink-soft);
}

.tpl-richtext {
  color: var(--ink);
  font-family: var(--body-font);
  font-size: var(--block-body-size, 18px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.tpl-richtext :is(p, ul, ol, blockquote, pre) {
  margin: 0 0 1em;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.tpl-richtext :is(span, div, li, a) {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.tpl-richtext > :first-child { margin-top: 0; }
.tpl-richtext > :last-child { margin-bottom: 0; }
.tpl-richtext :is(strong, b) { font-weight: 700; }
.tpl-richtext :is(em, i) { font-style: italic; }
.tpl-richtext :is(ul, ol) { padding-left: 1.4em; }
.tpl-richtext li + li { margin-top: 0.3em; }
.tpl-richtext a { text-decoration: underline; text-underline-offset: 3px; }

.tpl-richtext :is(h1, h2, h3, h4, h5, h6) {
  margin: 1.3em 0 0.5em;
  color: inherit;
  font-family: var(--body-font);
  font-size: 1.2em;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.tpl-richtext blockquote {
  padding: 8px 0 8px 20px;
  border-left: 2px solid var(--coral);
  font-style: italic;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.tpl-richtext :is(img, video) { max-width: 100%; height: auto; }
.tpl-richtext pre { white-space: pre-wrap; }
.tpl-richtext table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.tpl-richtext td, .tpl-richtext th { padding: 8px; border-bottom: 1px solid var(--line); }

.tpl-editorial.tpl-block-gazete .tpl-block-heading h2 {
  font-family: var(--body-font);
  font-size: var(--block-title-size, 52px);
  font-weight: 500;
  line-height: 1.12;
  text-wrap: balance;
}

.tpl-block-gazete .tpl-newspaper-copy .tpl-richtext::first-letter {
  float: left;
  margin: 0.06em 0.12em 0 0;
  color: var(--ink);
  font-family: var(--serif-font);
  font-size: 4em;
  font-weight: 500;
  line-height: 0.85;
  text-transform: uppercase;
}

.tpl-editorial .tpl-newspaper-clip {
  display: flow-root;
  overflow: visible;
  padding: 0;
  background: transparent;
}

.tpl-editorial .tpl-newspaper-image {
  float: left;
  display: block;
  width: 38%;
  max-width: 320px;
  height: auto;
  margin: 6px 28px 16px 0;
  object-fit: contain;
  border-radius: 2px;
  transform: rotate(-1deg);
  box-shadow: 0 5px 15px rgba(22, 67, 90, 0.1);
}

.tpl-editorial.tpl-block-media-only .tpl-newspaper-image {
  float: none;
  width: 100%;
  max-width: 720px;
  max-height: 560px;
  margin: 0 auto;
  transform: none;
}

.post-detail-shell > .tpl-sequence { padding: 0 28px; }

.tpl-dump-wall-head h2 { font-size: 32px; line-height: 1.2; }
.tpl-dump-note { align-content: start; overflow: auto; }
.tpl-dump-note h3 { width: 100%; font-size: var(--block-title-size, 36px); line-height: 1.2; text-align: var(--block-title-align, left); overflow-wrap: anywhere; }
.tpl-dump-note .tpl-richtext { font-family: var(--body-font); font-size: var(--block-body-size, 18px); line-height: 1.7; text-align: left; }
.tpl-dump-note .tpl-richtext p { font: inherit; color: inherit; text-align: inherit; }

@container blog-block (max-width: 640px) {
  .tpl-editorial .tpl-block-heading h2 { font-size: min(var(--block-title-size, 36px), 34px); }
  .tpl-editorial.tpl-block-gazete .tpl-block-heading h2 { font-size: min(var(--block-title-size, 52px), 38px); }
  .tpl-block-gazete .tpl-newspaper-copy .tpl-richtext::first-letter { font-size: 3.3em; }
  .tpl-block-heading { margin-bottom: 20px; }
  .tpl-editorial .tpl-block-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tpl-editorial .tpl-block-layout > :is(.tpl-block-media, .tpl-block-copy) { grid-column: auto; grid-row: auto; }
  .tpl-editorial.tpl-block-image-duo.tpl-block-media-only .tpl-block-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tpl-editorial .tpl-richtext { font-size: min(var(--block-body-size, 18px), 16px); line-height: 1.75; }
  .tpl-editorial .tpl-newspaper-image { width: 42%; margin: 4px 18px 10px 0; }
  .tpl-block-media img, .tpl-block-media video { max-height: 440px; }
  .tpl-block-wrap > .tpl-block-media { width: 42%; margin: 4px 16px 12px 0; }
  .tpl-block-image-right .tpl-block-wrap > .tpl-block-media { margin: 4px 0 12px 16px; }
  .tpl-block-image-duo .tpl-block-wrap > .tpl-block-media { width: 25%; margin: 4px 12px 12px 0; }
  .tpl-block-image-duo .tpl-block-wrap > .tpl-block-media-second { margin: 4px 0 12px 12px; }
}

/* Editor controls do not change the typography inside the reading preview. */
.post-editor-page .content-block-editor {
  min-width: 0;
  border-radius: 8px;
  background: var(--paper);
  box-shadow: none;
  scroll-margin-top: 140px;
  font-family: var(--menu-font);
  font-size: 14px;
}

.post-editor-page .content-block-editor > header select { border-radius: 6px; }
.post-editor-page .content-block-editor input:not([type="range"]),
.post-editor-page .content-block-editor select { min-height: 42px; padding: 10px 12px; border-radius: 6px; }
.post-editor-page .block-card-actions button { border-radius: 4px; }

.post-editor-page .block-title-tools {
  margin: 0;
  padding: 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.block-title-tools .block-title-options {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

.post-editor-page .block-title-tools input,
.post-editor-page .block-title-tools select { min-width: 0; border-radius: 6px; }
.post-editor-page .block-title-tools input[type="range"] { border: 0; }
.block-title-tools output { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.post-editor-page .block-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0 20px 20px; }
.block-editor-fields { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 24px; align-items: start; }
.block-editor-fields.is-text-only { grid-template-columns: minmax(0, 1fr); }
.block-editor-fields > * { min-width: 0; }
.block-media-fields { display: grid; gap: 20px; }
.block-media-slot { position: relative; min-width: 0; }
.post-editor-page .block-media-slot label { margin: 0 0 12px; }
.block-media-slot input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
.block-media-slot:focus-within .image-upload-box { outline: 2px solid var(--sea); outline-offset: 2px; }
.block-media-slot .image-upload-box { margin: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.block-media-slot .image-upload-box > i { font-size: 24px; color: var(--ink-soft); }
.block-media-slot [data-media-status] { overflow-wrap: anywhere; }
.block-editor-fields [hidden] { display: none; }

.post-editor-page .richtext-field { display: grid; gap: 10px; }
.post-editor-page .richtext-toolbar { gap: 4px; }
.post-editor-page .richtext-toolbar button { width: 34px; height: 34px; padding: 0; border-radius: 4px; font-size: 14px; }
.post-editor-page .richtext-toolbar button:hover { background: var(--sun); }
.post-editor-page .richtext-editor {
  min-height: 240px;
  max-height: 520px;
  overflow: auto;
  border-radius: 6px;
  padding: 16px;
  background: var(--paper);
  font-family: var(--body-font);
  font-size: var(--block-body-size, 18px);
  font-weight: 400;
  line-height: 1.8;
}
.post-editor-page .richtext-editor:focus { outline: 2px solid var(--sea); outline-offset: 2px; }
.post-editor-page .tpl-richtext span { font-size: inherit; color: inherit; }
.block-card-actions button:disabled { opacity: 0.3; cursor: default; }
.post-editor-page .block-preview-section { min-width: 0; border-top: 1px solid var(--line); }
.block-preview-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; font-family: var(--menu-font); }
.block-preview-bar button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: transparent; cursor: pointer; }
.block-live-preview { display: block; min-width: 0; padding: 24px 0; }
.block-live-preview .tpl-dump-wall,
.category-preview-dialog .tpl-dump-wall { left: auto; width: 100%; margin: 0; transform: none; }
.block-live-preview .tpl-dump-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

@media (max-width: 760px) {
  .tpl-sequence { gap: 36px; }
  .post-editor-page .block-title-tools { padding: 16px; }
  .post-editor-page .block-editor-grid { padding: 0 16px 16px; }
  .block-title-tools .block-title-options { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .block-editor-fields { grid-template-columns: minmax(0, 1fr); }
  .block-live-preview { padding: 12px 0; }
  .post-detail-shell > .tpl-sequence { padding: 0 16px; }
  .tpl-dump-note h3 { font-size: min(var(--block-title-size, 36px), 32px); }
  .tpl-dump-note .tpl-richtext { font-size: min(var(--block-body-size, 18px), 16px); }
}
