/* Related Recipes block (eph/related-recipes). Front end and editor.
   Builds on the homepage card styles in eph-homepage.css (.eph-hp, .cards, .card, headings),
   but sits inside the post's content column instead of spanning the viewport.
   Every rule is .eph-hp.eph-hp-related-qualified so it outranks the homepage rules and
   does not depend on stylesheet order. Grid columns follow the section's own width
   (container query), so the cards fit any content column: always 2 x 2, roomier in wide columns. */

.eph-hp.eph-hp-related{
  width:auto;max-width:100%;
  margin:36px 0 32px;padding:30px 16px 26px;
  background:var(--linen);
  border:0;border-radius:8px;
  container-type:inline-size;
  clear:both;
  text-align:center;
}
.eph-hp.eph-hp-related > .wrap{width:100%;max-width:none;margin:0;padding:0}

/* Heading: copper Lora, centered, with room above it inside the cream band. */
.eph-hp.eph-hp-related :is(h2,h3).section-heading{
  font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.25;color:var(--copper);
  margin:0 0 18px;padding:0;text-align:center;text-wrap:balance;letter-spacing:0;text-transform:none;
}
.eph-hp.eph-hp-related :is(h2,h3).duo-heading{margin:0 0 18px}
.eph-hp.eph-hp-related .duo-heading .kicker{font-size:15px}
.eph-hp.eph-hp-related .duo-heading .accent{font-size:30px}

/* Compact 2 x 2 on phones, so all four photos and titles fit on one screen. */
.eph-hp.eph-hp-related .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin:0;padding:0;list-style:none}
.eph-hp.eph-hp-related .card{margin:0;padding:0}
.eph-hp.eph-hp-related .card a,
.eph-hp.eph-hp-related .card a:is(:hover,:focus-visible){color:var(--ink);text-decoration:none;box-shadow:none}
.eph-hp.eph-hp-related .card-image{aspect-ratio:3/2;border-radius:6px}
.eph-hp.eph-hp-related .card-image img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0}
.eph-hp.eph-hp-related .card h3{
  font-family:var(--serif);font-weight:600;font-size:14.5px;line-height:1.25;color:var(--ink);
  margin:8px 0 0;padding:0;text-decoration:none;text-wrap:balance;
}
.eph-hp.eph-hp-related .card a:is(:hover,:focus-visible) h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.eph-hp.eph-hp-related .card .flavor-label{display:block;font-size:11px;line-height:1.2;margin-top:8px}
.eph-hp.eph-hp-related .card .flavor-label + h3{margin-top:3px}

/* See All link: the homepage's text-and-arrow style (eph-homepage.css .more-link). The extra .wrap outranks the theme's ".entry-content a:not(…)" weight rule. */
.eph-hp.eph-hp-related .wrap a.more-link,.eph-hp.eph-hp-related .wrap a.more-link:hover{margin:14px auto 0;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--ink);text-decoration:none;border:0;box-shadow:none}

/* Wider columns: still 2 x 2 (Marlene found four across too small), with wider side padding, a wider column gap and slightly shorter photos so the cards stay mid-sized and fill the box evenly. */
@container (min-width:560px){
  .eph-hp.eph-hp-related .cards{gap:20px 32px}
  .eph-hp.eph-hp-related .card-image{aspect-ratio:16/10}
  .eph-hp.eph-hp-related :is(h2,h3).section-heading{font-size:26px;margin-bottom:16px}
  .eph-hp.eph-hp-related .card h3{font-size:16px;margin-top:9px}
  .eph-hp.eph-hp-related .card .flavor-label{font-size:12px;margin-top:10px}
  .eph-hp.eph-hp-related .wrap a.more-link{margin-top:16px}
}
@media (min-width:768px){
  .eph-hp.eph-hp-related{padding:24px 44px 26px}
}

/* Editor: keep the preview unclickable but readable, and space the sidebar pickers. */
.wp-block-eph-related-recipes .eph-hp.eph-hp-related{margin-block:8px}
.eph-rr-slot{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid #e0e0e0}
.eph-rr-slot:last-child{border-bottom:0;margin-bottom:0}
.eph-rr-help{margin:0;color:#757575;font-size:12px}

/* Vertical 4:5 photos on phones (Marlene, Oct 13: matches the homepage and keeps more of the phone
   screen on the next recipes). Wider boxes (desktop) keep the horizontal 16:10 photos above. */
@container (max-width:559px){
  .eph-hp.eph-hp-related .card-image{aspect-ratio:4/5}
}