@charset "UTF-8";
/**
 * The look of the one part every block shares: the post card itself.
 *
 * Generated from assets/shared.scss. Edit that file and recompile; anything
 * written here is overwritten the next time it is built.
 *
 * This is the stylesheet twin of inc/blocks.php. That file has one function that
 * prints a card, so every block draws the same markup — and this file styles
 * that markup once, in one place. A block's own style.css is then only about
 * that block's arrangement: how many columns, how wide the lead is. If you are
 * looking for "why is the date grey", it is here. If you are looking for "why
 * are there three columns", it is in the block.
 *
 * Every class here starts with owldraft-. The plugin owns those names outright,
 * so a theme styling its own .entry-title or .entry-meta cannot reach inside a
 * block and change it — and nothing here can reach out and restyle the theme.
 *
 * Rules are written under .owldraft-block, the wrapper each block prints. That
 * is for weight, not naming, and it is worth being exact about which fight it
 * wins. A lone class like .owldraft-entry-meta already beats any number of
 * element selectors a theme writes — article a loses to a single class, because
 * specificity counts classes before elements. So the wrapper is not there for
 * those. It is there for the shape themes actually use: one class plus an
 * element. The stoat theme ships .editor-styles-wrapper a, and our blocks
 * render inside that wrapper in the editor. Against a lone .owldraft-entry-meta
 * a, that is an exact tie, and ties go to whichever stylesheet loaded last —
 * so the meta links would take the theme's accent colour in the editor while
 * staying grey on the front end, and the preview would stop matching the page.
 * The wrapper adds a second class, which wins outright and never depends on
 * load order.
 *
 * Colours and sizes are read as var(--name, fallback) — CSS custom properties,
 * deliberately, not Sass variables. A Sass variable would be resolved at compile
 * time and a theme could never touch it. A custom property survives into this
 * file, so a theme that defines --gray or --size-lg gets to set them; otherwise
 * the fallback applies. The plugin deliberately defines no custom properties of
 * its own, so it can never overwrite a theme's.
 *
 * Loaded on the front end and in the editor canvas, so a preview matches the
 * real page.
 */
/* ── The block's heading ─────────────────────────────────────────────────────
   Printed by owldraft_editorial_blocks_heading(): the section title a block can
   carry above its posts, with an optional "more" link beside it. A flex row, so
   the two sit on one line and the link lands at the far end of it. */
.owldraft-block .owldraft-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em 1em;
  margin: 0 0 1.5rem;
}
.owldraft-block .owldraft-heading__title {
  /* Takes up the whole row, which is what pushes the "more" link to the
     far edge; without it the two would sit side by side in the middle. */
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--size-base, 1rem);
  text-transform: uppercase;
}
.owldraft-block .owldraft-heading__title a {
  color: inherit;
  text-decoration: none;
}
.owldraft-block .owldraft-heading__title a:hover {
  text-decoration: underline;
}
.owldraft-block .owldraft-heading__more {
  color: inherit;
  font-size: 0.8em;
  text-transform: uppercase;
  text-decoration: underline;
}

/* ── The heading's alignment ─────────────────────────────────────────────────
   The choice moves the words; the "more" link takes the opposite edge, so a
   right-aligned heading is the one case where the link moves to the left. */
.owldraft-block .owldraft-heading--center .owldraft-heading__title {
  text-align: center;
}
.owldraft-block .owldraft-heading--right .owldraft-heading__title {
  text-align: right;
}
.owldraft-block .owldraft-heading--right .owldraft-heading__more {
  order: -1;
}

/* ── The heading's rule ──────────────────────────────────────────────────────
   Top and bottom draw the line across the block; middle draws it beside the
   words instead, filling whatever is left of the line. */
.owldraft-block .owldraft-heading--top {
  padding-top: 0.75rem;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.15));
}
.owldraft-block .owldraft-heading--bottom {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.15));
}
.owldraft-block .owldraft-heading--middle .owldraft-heading__title {
  /* The title becomes a row of its own: the words, with an empty
     pseudo-element on either side that stretches to the end of the row
     carrying the rule.

     Those two are also what place the words. A flex row ignores
     text-align, so the alignment set above cannot reach the words here —
     what a centred heading gets instead is a rule on both sides, which
     pushes the words to the middle. Left and right keep one rule each,
     below. */
  display: flex;
  align-items: center;
  gap: 1em;
}
.owldraft-block .owldraft-heading--middle .owldraft-heading__title::before, .owldraft-block .owldraft-heading--middle .owldraft-heading__title::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.15));
}
.owldraft-block .owldraft-heading--middle.owldraft-heading--left .owldraft-heading__title::before,
.owldraft-block .owldraft-heading--middle.owldraft-heading--right .owldraft-heading__title::after {
  display: none;
}

/* ── The post card ───────────────────────────────────────────────────────────
   Printed by owldraft_editorial_blocks_post_card() in one of three shapes:
   stacked (image above text), row (image beside text), overlay (text on top). */
.owldraft-block .owldraft-card {
  margin: 0;
}
.owldraft-block .owldraft-card--stacked {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.owldraft-block .owldraft-card--row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
}
.owldraft-block .owldraft-card--row.owldraft-card--thumb-right .owldraft-entry-thumbnail {
  /* Thumbnail on the right: the row keeps its natural left-to-right
     order and the thumbnail alone is moved to the end, then pushed
     against the right edge. Reversing the row instead would pack both
     items against the right, so a card whose text is shorter than the
     row would leave a gap on the left and the text would drift away
     from the cards above and below it. */
  order: 2;
  margin-left: auto;
}
.owldraft-block .owldraft-card--row .owldraft-entry-text {
  min-width: 0;
}

/* ── The card's image ────────────────────────────────────────────────────────
   render.php may set an inline aspect-ratio on .owldraft-entry-thumbnail to crop the
   image to a chosen shape. The crop only works if the image is told to fill
   its box, which is what object-fit does here. */
.owldraft-block .owldraft-entry-thumbnail {
  display: block;
  overflow: hidden;
}
.owldraft-block .owldraft-entry-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.owldraft-block .owldraft-entry-thumbnail--natural img {
  /* No crop was asked for, so let the image keep its own height instead
     of stretching to fill a box that has no set shape. */
  height: auto;
}
.owldraft-block .owldraft-card--stacked .owldraft-entry-thumbnail {
  width: 100%;
}
.owldraft-block .owldraft-card--row .owldraft-entry-thumbnail {
  /* Rows use a small square thumbnail unless the block says otherwise. */
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
}

/* ── Overlay: the text sits on the image ─────────────────────────────────── */
.owldraft-block .owldraft-card--overlay {
  position: relative;
  display: block;
  overflow: hidden;
}
.owldraft-block .owldraft-card--overlay .owldraft-entry-thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.owldraft-block .owldraft-card--overlay .owldraft-entry-text {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2rem 1.5rem 1.5rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.owldraft-block .owldraft-card--overlay .owldraft-entry-categories a,
.owldraft-block .owldraft-card--overlay .owldraft-entry-title a,
.owldraft-block .owldraft-card--overlay .owldraft-entry-summary,
.owldraft-block .owldraft-card--overlay .owldraft-entry-meta,
.owldraft-block .owldraft-card--overlay .owldraft-entry-meta a {
  color: #fff;
}

/* ── The card's text ─────────────────────────────────────────────────────── */
.owldraft-block .owldraft-entry-title {
  margin: 0;
}
.owldraft-block .owldraft-entry-title a {
  color: inherit;
  text-decoration: none;
}
.owldraft-block .owldraft-entry-title a:hover {
  text-decoration: underline;
}
.owldraft-block .owldraft-entry-title--small {
  /* The four title sizes a block can ask for — Post Grid and Post List
     offer them in their Components panel. The size is deliberately its own
     setting, separate from the heading level: h2/h3/h4 is about the page's
     outline, this is about how big the title looks.

     There is a fifth choice, "Default (theme)", and it is the absence of
     these classes: no font-size is written at all, so the title keeps the
     theme's own h2/h3/h4 size. That is why .owldraft-entry-title above sets
     no font-size of its own — it must stay something a theme can style.

     Each is read as var(--name, fallback), so a theme with its own type
     scale gets to set them; without one the fallback applies. The two
     larger sizes tighten their line height, which is what a headline of
     that size needs to stay readable across two lines. */
  font-size: var(--size-base, 1rem);
}
.owldraft-block .owldraft-entry-title--medium {
  font-size: var(--size-md, 1.125rem);
}
.owldraft-block .owldraft-entry-title--large {
  font-size: var(--size-lg, 1.5rem);
  line-height: 1.25;
}
.owldraft-block .owldraft-entry-title--huge {
  font-size: var(--size-xl, 2.1rem);
  line-height: 1.15;
}
.owldraft-block .owldraft-entry-categories {
  /* The category sits above the title as an eyebrow, not in the meta row. */
  margin-bottom: 0.35em;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.owldraft-block .owldraft-entry-categories a {
  text-decoration: none;
}
.owldraft-block .owldraft-entry-categories a:hover {
  text-decoration: underline;
}
.owldraft-block .owldraft-entry-categories-sep {
  margin: 0 4px;
  opacity: 0.5;
}
.owldraft-block .owldraft-entry-summary {
  margin-top: 0.5em;
}
.owldraft-block .owldraft-entry-summary p {
  margin: 0;
}
.owldraft-block .owldraft-entry-meta {
  /* The meta row: author, date and comment count, separated by a middot
     that CSS adds between whichever of them the user chose to show. */
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  color: rgba(0, 0, 0, 0.4);
}
.owldraft-block .owldraft-entry-meta > * + *::before {
  content: "·";
  margin: 0 6px;
  opacity: 0.5;
}
.owldraft-block .owldraft-entry-meta a {
  color: inherit;
  text-decoration: none;
}
.owldraft-block .owldraft-entry-comments {
  /* The comment count: icon and number as one unit, so the middot before
     it lands to the left of the icon rather than between the icon and its
     number. */
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.owldraft-block .owldraft-entry-comments__icon {
  /* The icon takes its colour from the meta row's text and sits on the
     number's baseline rather than riding above it. */
  flex: none;
  color: inherit;
}