@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 {
  /* Quiet by design: the link is a way out of the section, not part of the
     headline, so it stays grey and plain and only firms up on hover. */
  color: #999;
  text-decoration: none;
}
.owldraft-block .owldraft-heading__more:hover {
  color: #444;
}

/* ── 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: 2em;
  margin-bottom: 2em;
  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: 1em;
}
.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 ────────────────────────────────────────────────────────
   The picture is a <figure class="owldraft-entry-thumbnail"> holding a link
   around the image and, on the blocks that ask for one, a caption under it.

   The figure is what every layout below sizes, orders and positions — it is
   "the picture" as far as this stylesheet is concerned, caption included. The
   crop is one level in, on the link: inc/blocks.php sets an inline
   aspect-ratio there, and a ratio on the figure would count the caption's
   words as part of the 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;
  /* A <figure> arrives with a browser default margin; the card's own gaps
     do the spacing here. */
  margin: 0;
}
.owldraft-block .owldraft-entry-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.owldraft-block .owldraft-entry-thumbnail__link {
  display: block;
  width: 100%;
  overflow: hidden;
  /* No height here, deliberately. The stacked card is a column flex
     container, which makes its items' heights definite — so a height:100%
     on this link would resolve against the figure's own height, caption
     included, and the picture would grow until the caption was pushed out
     of the figure and printed over the headline below it. The link's
     height comes from its inline aspect-ratio instead, and the two
     layouts that do give the figure a fixed height ask for the fill
     themselves (see the row and overlay rules). */
}
.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;
}
.owldraft-block .owldraft-card--row .owldraft-entry-thumbnail .owldraft-entry-thumbnail__link {
  /* That 60px is a real height, so the link fills it and the image is
     cropped to the square even when no ratio was asked for. A block
     that sets its own height:auto here hands the height back to the
     image, and this resolves to auto with it. */
  height: 100%;
}

/* ── The image's caption ─────────────────────────────────────────────────────
   Printed by owldraft_editorial_blocks_entry_caption() as the <figcaption> of
   the thumbnail figure, for the blocks that show one story large enough to
   read a cutline: the lead
   of a Post Group and the Hero. Small, grey and quiet — it explains the
   picture, it is not part of the story's headline stack. */
.owldraft-block .owldraft-entry-caption {
  /* Inside the figure, directly under the image, so it needs no help from
     any layout to stay there — in a row card it sits under the picture and
     beside the text, which is where a cutline belongs. */
  margin: 0.5em 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gray, #6b7280);
}
.owldraft-block .owldraft-entry-caption a {
  color: inherit;
}
@media (max-width: 767.98px) {
  .owldraft-block .owldraft-entry-caption {
    /* A phone gives the cutline the full measure of the column — the
       same measure the story's own text gets — so at the size above it
       stops reading as the small print under a picture. A step down
       keeps it subordinate to the headline stack it sits in. */
    font-size: 0.7rem;
  }
}

/* ── The members / paid chip ─────────────────────────────────────────────────
   Printed by owldraft_editorial_blocks_entry_badge() inside the thumbnail
   figure, beside the link rather than within it — that link is aria-hidden,
   and a chip nested in it would be hidden from a screen reader with it.

   The figure is what it is positioned against, because the figure IS the
   picture: whatever a layout does with the image, the chip goes with it. That
   matters most in a row, where the picture is centred against text that is
   often taller than it — a chip pinned to the card would sit at the card's top
   corner with nothing but whitespace under it, which is what happens on a
   phone as soon as the headline wraps to a third line. Positioning against the
   figure also means no layout has to move the chip: a row with its thumbnail on
   the right carries the figure to the right and the chip rides along.

   The figure's top-left corner is the image's top-left corner in every layout,
   caption included: a <figcaption> prints under the picture, never above it.
   Only cards that have a picture print a chip. */
.owldraft-block .owldraft-entry-thumbnail {
  position: relative;
}
.owldraft-block .owldraft-entry-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.65em;
  border-radius: 2em;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  /* Not flat black: the chip sits on a photograph, and a translucent dark
     keeps the picture readable underneath it while staying legible on a
     light image. */
  background: rgba(17, 17, 17, 0.78);
}
.owldraft-block .owldraft-entry-badge--paid {
  /* The amber the posts list already uses for a paid post, so the mark on
     the front end and the mark in wp-admin are the same colour. */
  background: rgba(158, 116, 12, 0.92);
}
.owldraft-block .owldraft-entry-badge__icon {
  flex: none;
}
.owldraft-block .owldraft-card--row .owldraft-entry-badge {
  /* A row's thumbnail is a 60px square. A chip with a word in it would
     cover the whole picture, so here the lock alone is drawn and the
     word is left for screen readers. */
  top: 0.25rem;
  left: 0.25rem;
  gap: 0;
  padding: 0.3em;
  border-radius: 50%;
}
.owldraft-block .owldraft-card--row .owldraft-entry-badge__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 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-thumbnail__link {
  /* No caption is printed in this layout, so the link has the whole
     figure to fill. */
  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,
.owldraft-block .owldraft-card--overlay .owldraft-entry-author a:hover {
  color: #fff;
}

/* ── The card's text ─────────────────────────────────────────────────────── */
.owldraft-block .owldraft-entry-title {
  margin: 0;
}
.owldraft-block .owldraft-entry-title a {
  color: inherit;
  text-decoration: none;
  transition: all 0.1s;
  /* Matches the Stoat theme: a headline fades on hover rather than
     growing a rule under it, so a grid of cards does not shift a
     pixel as the pointer crosses it. */
}
.owldraft-block .owldraft-entry-title a:hover {
  opacity: 0.8;
}
.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.

     Every fallback above the base is a clamp, the same shape the hero
     block already uses, and this is the whole of the plugin's responsive
     type. A size is chosen for the card it will sit in, and on a laptop
     that card is a column; on a phone the same card is the screen, and a
     headline picked for a 380px column becomes one that fills a 340px
     screen before the story starts. The clamp is what makes the choice
     mean "this big, at the width it was chosen for" — it hits its named
     size around the laptop width and eases down from there, so there is
     no breakpoint where the type jumps, and nothing to keep in step in
     the blocks that use it. A theme setting --size-* still replaces the
     whole thing, clamp included. */
  font-size: var(--size-base, 1rem);
}
.owldraft-block .owldraft-entry-title--medium {
  font-size: var(--size-md, clamp(1rem, 0.928rem + 0.31vw, 1.125rem));
}
.owldraft-block .owldraft-entry-title--large {
  font-size: var(--size-lg, clamp(1.25rem, 1.106rem + 0.62vw, 1.5rem));
  line-height: 1.25;
}
.owldraft-block .owldraft-entry-title--huge {
  font-size: var(--size-xl, clamp(1.5rem, 1.153rem + 1.48vw, 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.5em;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.owldraft-block .owldraft-entry-categories a {
  font-weight: 600;
  text-decoration: none;
}
.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. It
     closes the card, under the excerpt. */
  margin-top: 0.3em;
  font-size: 0.9em;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  color: rgba(0, 0, 0, 0.4);
  /* Wrapping only helps when there is more than one piece in the row. A
     single piece wider than the row - a two-word byline beside a 100px
     thumbnail on a 320px phone - has nothing to wrap onto, and a flex
     item's default min-width:auto forbids it from shrinking below its own
     content, so it holds the row open and the card, the column and the
     page all widen behind it. Letting the pieces shrink puts the wrapping
     where it belongs: inside the text. */
}
.owldraft-block .owldraft-entry-meta > * {
  min-width: 0;
}
.owldraft-block .owldraft-entry-meta > * + *::before {
  content: "·";
  margin: 0 6px;
  opacity: 0.5;
}
.owldraft-block .owldraft-entry-meta a {
  color: #777;
  font-weight: 600;
  text-decoration: none;
}
.owldraft-block .owldraft-entry-author {
  /* Avatar, "By" and name as one unit, so the middot the meta row draws
     between its pieces lands to the left of the whole byline rather than
     inside it. The gap — not a literal space in the markup — is what
     spaces the three, so hiding the "By" closes its gap with it. */
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  /* Same reason as the meta row above, one level in: the byline is itself
     a flex row, so the name has to be allowed to shrink before the byline
     can. The avatar is flex:none and keeps its size regardless. */
}
.owldraft-block .owldraft-entry-author > * {
  min-width: 0;
}
.owldraft-block .owldraft-entry-author a:hover {
  color: #444;
}
.owldraft-block .owldraft-entry-author__avatar-link {
  /* Its own link, so it must not add its own spacing around the image. */
  display: inline-flex;
  flex: none;
}
.owldraft-block .owldraft-entry-author__avatar {
  /* A small round mark that keeps its size whatever the meta row's font
     size is doing, and never stretches if the source image is not square. */
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.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;
}

/* ── The card on a phone ─────────────────────────────────────────────────────
   Everything above is written for a card that has a column to itself. A phone
   gives it the whole screen, and the whole screen is narrower than that column
   was: a row card's picture and its text are now competing for the same handful
   of characters, and every gap sized for a desktop card is spending width the
   text needs.

   So the card tightens rather than redraws. The gaps close, the pieces sit
   closer to what they follow, and the small type — the eyebrow, the excerpt,
   the byline — steps down a notch so that a headline still reads as the loudest
   thing in the card once the headline itself has stepped down (the clamps in
   the type scale above). Nothing here changes what a card IS, which is why it
   is one block at the bottom of the file rather than a phone branch inside each
   of the sections above.

   Every value is relative — em, or a share of the row — so a block that sets a
   larger base size keeps the same proportions. */
@media (max-width: 767.98px) {
  .owldraft-block {
    /* The picture and the text stop being two columns with air between them
       and become one unit. */
  }
  .owldraft-block .owldraft-card--row {
    gap: 0.75rem;
  }
  .owldraft-block .owldraft-card--stacked {
    gap: 0.75em;
  }
  .owldraft-block .owldraft-entry-categories {
    margin-bottom: 0.35em;
    font-size: 0.8em;
  }
  .owldraft-block {
    /* The excerpt is support for the headline, not a second headline: on a
       narrow card it has to look clearly subordinate or the two run
       together into one grey block. */
  }
  .owldraft-block .owldraft-entry-summary {
    margin-top: 0.35em;
    font-size: 0.9em;
  }
  .owldraft-block .owldraft-entry-meta {
    margin-top: 0.2em;
    font-size: 0.8em;
  }
  .owldraft-block {
    /* The avatar is a fixed 36px, chosen against a full-size byline. Under
       type that has stepped down twice it becomes the largest thing in the
       meta row, and in a narrow row card it is 36px of the measure the name
       beside it needs. */
  }
  .owldraft-block .owldraft-entry-author__avatar {
    width: 24px;
    height: 24px;
  }
}