/* ==========================================================================
   edit.css - King & Sons Plumbing
   Custom CSS overrides. Loaded last, so rules here win over the theme.
   Upload to: /wp-content/themes/everlast/css/edit.css
   Enqueued from functions.php (see enqueue-edit-css.php)

   House rules for this file:
   - Newest edits go at the bottom, under a dated heading.
   - Keep every rule commented with what it fixes and where it shows.
   - Mobile styles go in the breakpoint blocks, never as desktop-only values.
   ========================================================================== */


/* --------------------------------------------------------------------------
   08 Sep 2026 - Blog single post: featured image banner was rendering
   full-screen tall on portrait uploads (920x1380 image stretched to
   1056x1584). Crops to a banner ratio instead, matching how the blog
   listing cards (.ks-card__media) already behave.
   -------------------------------------------------------------------------- */

.ks-article .ks-article__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 520px;
  object-fit: cover;           /* crop, never stretch */
  object-position: center 50%; /* favour the top, where subjects sit */
  border-radius: var(--ks-radius-sm);
  background: var(--ks-tint);  /* neutral fill while loading */
}

/* Tablet and small laptop: a little taller so the crop is not too thin */
@media (max-width: 900px) {
  .ks-article .ks-article__figure img {
    aspect-ratio: 3 / 2;
    max-height: 420px;
  }
}

/* Mobile: 4:3 keeps more of the subject on a narrow screen */
@media (max-width: 600px) {
  .ks-article .ks-article__figure img {
    aspect-ratio: 4 / 3;
    max-height: 300px;
  }
}

/* Safety net for images placed inside article body content */
.ks-article .ks-article__content img {
  max-width: 100%;
  height: auto;
}


/* --------------------------------------------------------------------------
   Next edit goes below this line
   -------------------------------------------------------------------------- */