/* LLK Roundups — front-end card list. Loaded as both the block style and an editor
   style, so the editor preview uses these exact rules.

   Everything is built from the theme's `--llk-*` tokens (style.css section 1), which
   the theme also loads into the block editor via add_editor_style(). The cards are
   deliberately NOT `.llk-card`: that class pins its thumbnail to aspect-ratio 3/2 for
   the archive grids, and this layout wants a portrait crop of our portrait recipe photos.

   Several rules here carry an extra class or an !important to outrank the theme's
   in-content typography (`.entry-content p`, `.entry-content a`, and the per-level
   heading sizes). Each one is annotated with the selector it's beating — they are not
   incidental, and dropping them silently changes the card's spacing or size.

   Star ratings reuse `.llk-card-rating` markup from the theme's llk_archive_rating_html(),
   but the theme only styles that class under `body.llk-cardgrid` (archives and search),
   so the rules are restated here — same approach as llk-popular-recipes' popular.css. */

.llk-roundup {
  margin: 0 0 42px;

  /* Top inset of the text block, shared by the body's padding-top and the number badge's
     `top`. They live in different subtrees (the badge is positioned against the thumbnail,
     the text flows in the body column), so driving both from one value is what keeps them
     locked together — change this alone to move the whole title row up or down.

     It works as a single number because the two land level by construction: the badge is
     38px tall and the title's first line box is ~37px (31px at 2.9vw x 1.2), so their
     centres differ by half a pixel at any offset. */
  --llk-rnd-top: 1.5rem;
}

/* `stretch` (not flex-start) so the body fills the card's full height and the button can
   sit at the bottom. The thumb opts out with align-self, or stretching would override its
   aspect-ratio and break the 4:5 crop whenever the text ran taller than the image. */
.llk-roundup-item {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 3vw, 34px);
  padding-bottom: clamp(26px, 3vw, 34px);
  margin-bottom: clamp(26px, 3vw, 34px);
  border-bottom: 1px solid var(--llk-line);
}
.llk-roundup-item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

/* Image side. `top` stacks and widens the crop, since a full-width square is too tall. */
.llk-roundup--img-right .llk-roundup-item { flex-direction: row-reverse; }
.llk-roundup--img-top .llk-roundup-item { flex-direction: column; }
.llk-roundup--img-top .llk-roundup-thumb { flex: 0 0 auto; width: 100%; aspect-ratio: 3 / 2; }

/* Stacked, so the item's flex gap now runs vertically and already separates the image from
   the title — the body's own top inset would stack on top of it. The right inset goes too:
   with the image above rather than beside, there's no left gap to balance it against and
   the text would sit visibly off-centre in its column. */
.llk-roundup--img-top .llk-roundup-body { padding: 0; }

/* Portrait crop, 4:5. Our recipe photos are shot 1200x1800 (2:3), so anything
   square-or-taller crops from the middle rather than lopping off the top and bottom.
   Go to 3/4 or the native 2/3 for taller still. medium_large (768px wide) covers 2x. */
.llk-roundup-thumb {
  position: relative; /* positioning context for the number badge */
  align-self: flex-start; /* keep the aspect ratio; don't stretch with the row */
  flex: 0 0 clamp(160px, 34%, 300px);
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  background: var(--llk-mist);
}
.llk-roundup-thumb a { display: block; height: 100%; }

/* The rounded crop lives on the image, NOT as overflow:hidden on the container — the
   number badge hangs outside that box and would be clipped away by it. */
.llk-roundup-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* The top inset lives here rather than on the title's margin: padding is a property the
   theme's heading rules don't compete for, so the offset is tunable without !important and
   can't be shifted by a future change to in-content heading spacing.

   Top and bottom both read --llk-rnd-top, so the button is inset from the foot of the card
   by exactly what the title is inset from the head — symmetric by construction rather than
   by two values that have to be kept in step. Without it the anchored button sits flush
   with the bottom of the image while the title floats 1.5rem clear of the top.

   No padding-left; that side is the flex gap next to the image. */
.llk-roundup-body {
  display: flex;
  flex-direction: column; /* lets the button take the leftover height as margin-top:auto */
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--llk-rnd-top) 1.5rem var(--llk-rnd-top) 0;
}

/* Sized by class, not by tag, so the heading-level setting (h2/h3/h4) doesn't change the
   look and nothing outside .llk-roundup is affected either way.

   !important because the theme sizes in-content headings per level and per post type
   (style.css:731-732):
     body.single-post .entry-content h3 -> (0,3,2), font-size 22px, margin-top 30px
   which outranks any sane selector here, and differs again for h2. Without this the card
   silently changed size and vertical rhythm depending on the heading level chosen, and
   the roundup inherited the 30px of prose section spacing it has no use for.

   margin-top is zeroed rather than set to the offset — the text block's top inset is the
   body's padding-top (see --llk-rnd-top), so the !important here only neutralises the
   theme's 30px of prose section spacing instead of competing for a value. */
.llk-roundup-title {
  font-family: var(--llk-serif);
  font-size: clamp(24px, 2.9vw, 31px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  margin: 0 0 10px !important;
}
.llk-roundup-title a { color: #222; }
.llk-roundup-title a:hover,
.llk-roundup-item:hover .llk-roundup-title a { color: var(--llk-teal-dark); }

/* The theme underlines in-content links (style.css:102):
     .entry-content a:not(.button):not(.wp-block-button__link)  -> (0,3,1)
   which .llk-btn isn't exempt from. !important rather than a specificity war, matching
   how the theme handles the same collision for .llk-collab .llk-btn and .llk-feature-title
   (see the note at style.css:520) — and it holds regardless of whether this stylesheet
   loads before or after the theme's. */
.llk-roundup-title a,
.llk-roundup-cta .llk-btn {
  text-decoration: none !important;
}

/* Teal circle badge, straddling the image's inner edge so it sits half over the photo and
   half in the gutter. Being absolutely positioned against the thumb keeps it out of the
   text flow entirely, so the title and description stay flush-left with each other.
   The white ring separates it from whatever it lands on in the photo.

   The badge is decorative — document order already conveys the sequence, and it's
   aria-hidden in the markup so heading navigation reads just the recipe name. */
.llk-roundup-num {
  position: absolute;
  top: var(--llk-rnd-top);
  right: -19px; /* half the width, so the circle is centred on the image edge */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--llk-teal);
  color: #fff;
  box-shadow: 0 0 0 3px #fff;
  font-family: var(--llk-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.llk-roundup--img-right .llk-roundup-num { right: auto; left: -19px; }

/* Stacked layouts: the image spans the full column, so there's no gutter to hang into —
   tuck the badge inside the top-left corner instead. A fixed inset here, NOT
   --llk-rnd-top: the badge is over the image with the title below it, so it has nothing
   to line up with and shouldn't inherit the title's offset. */
.llk-roundup--img-top .llk-roundup-num { top: 14px; right: auto; left: 14px; }

/* Sits between the description and the button. Space above the button lives on the CTA's
   own margin-top, so it's the same whether or not a recipe has ratings yet. */
.llk-roundup .llk-card-rating {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--llk-ink);
}
.llk-roundup .llk-card-rating .stars {
  color: var(--llk-star);
  letter-spacing: 1px;
  font-size: 14px;
}
.llk-roundup .llk-card-rating .cnt {
  color: var(--llk-muted);
  font-weight: 500;
}

/* The `.llk-roundup` prefix is load-bearing on both paragraph rules: the theme sets
   `.entry-content p{margin:0 0 20px}` (style.css:89) at (0,1,1), which outranks a bare
   `.llk-roundup-dek` at (0,1,0) — it was zeroing the button's margin-top and overriding
   the dek's spacing. Two classes (0,2,0) wins, since class count is compared before
   element count. Same trick the theme uses for .llk-arch-hero (see style.css:493). */
.llk-roundup .llk-roundup-dek {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--llk-muted);
  margin: 0 0 12px;
}

/* margin-top:auto absorbs the leftover height, dropping the button to the bottom of the
   card so the text column fills the image's height instead of floating at the top. The
   padding-top is the floor: when the text already fills the card there's no free space for
   the auto margin to claim, and this keeps the button off the rating.
   Prefixed for the same reason as the dek above.
   (To centre the text block against the image instead of anchoring the button, drop this
   rule back to `margin: 18px 0 0` and set align-items:center on .llk-roundup-item.) */
.llk-roundup .llk-roundup-cta {
  margin: auto 0 0;
  padding-top: 18px;
}
/* Uppercased in CSS rather than stored shouting, so the attribute stays sentence-case and
   any custom label an author types renders consistently. Extra letter-spacing because caps
   at this size need it; the theme's button rule already sets .03em.
 *
 * The colour is !important on all three states because GeneratePress' Customizer CSS emits
 * `.inside-article a:hover` at (0,2,1), which outranks the theme's own `.llk-btn:hover`
 * colour at (0,2,0) — GP's link-hover colour was winning and putting teal text on the
 * teal-dark hover background, which is what made the label unreadable. */
.llk-roundup-cta .llk-btn {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.llk-roundup .llk-roundup-cta .llk-btn,
.llk-roundup .llk-roundup-cta .llk-btn:hover,
.llk-roundup .llk-roundup-cta .llk-btn:focus,
.llk-roundup .llk-roundup-cta .llk-btn:active {
  color: #fff !important;
}

/* Stack below the point where a side-by-side image leaves too little text column. */
@media (max-width: 600px) {
  .llk-roundup-item,
  .llk-roundup--img-right .llk-roundup-item {
    flex-direction: column;
  }
  .llk-roundup-thumb {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 3 / 2;
  }
  /* Stacked here too, so drop the insets for the same reasons as the image-above case. */
  .llk-roundup-body { padding: 0; }
  /* Same as the image-above case: over the image, so a fixed corner inset. */
  .llk-roundup-num,
  .llk-roundup--img-right .llk-roundup-num {
    top: 14px;
    right: auto;
    left: 14px;
  }
}