@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 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%;
  -o-object-fit: cover;
     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-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;
}