/* @label.en Related reading
   @description.en Points to something else to read — a post, an article, a PDF: a small photo, then a
   line or two whose first link is where it leads. The whole row is that link.

   @label.he קריאה נוספת
   @description.he מפנה לעוד משהו לקרוא — פוסט, כתבה, PDF: תמונה קטנה, ואחריה שורה או שתיים שהקישור
   הראשון בהן הוא היעד. כל השורה היא הקישור.

   @example
   <div class="block-style-related-reading"><action-text-attachment content-type="image/jpeg" url="/block-styles/zohar/related-reading.jpg" width="480" height="240"></action-text-attachment><p><a href="#">ארטיום דולגופיאט מיישם: איך מפחיתים מתח ושומרים על ריכוז</a></p></div> */
@layer components {
  .lexxy-content div.block-style-related-reading {
    position: relative;
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    grid-auto-flow: dense;
    align-items: center;
    gap: 0 var(--inline-space-double);
    margin-block: var(--block-space-half);
    padding: 0.6rem;
    padding-inline-end: 2.5rem;
    border-radius: var(--radius-large);
    background: var(--color-surface);
    transition: background var(--transition);
    > * { grid-column: 2; margin: 0; }
    > * + :not(action-text-attachment, .attachment-gallery) { margin-block-start: 0.15rem; }
    > :is(action-text-attachment, .attachment-gallery) { grid-column: 1; grid-row: 1 / span 20; align-self: start; }
    figure { margin: 0; padding: 0; }
    figure img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
    figcaption { display: none; }
    /* The first line's first link is stretched over the row; any other link stays clickable above it.
       An embed's link (a WhatsApp group) or a link to WhatsApp draws its mark on ::after, so it never leads. */
    > :nth-child(1 of :not(action-text-attachment, .attachment-gallery)) a:first-of-type:not(action-text-attachment a, [href*="wa.me/"], [href*="whatsapp.com"], [href*="/whatsapp"])::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
    }
    > :nth-child(1 of :not(action-text-attachment, .attachment-gallery)) a:first-of-type:not(action-text-attachment a, [href*="wa.me/"], [href*="whatsapp.com"], [href*="/whatsapp"]):focus-visible { outline: none; }
    > :nth-child(n + 2 of :not(action-text-attachment, .attachment-gallery)) a { position: relative; z-index: 1; }
    &::after {
      content: "→";
      position: absolute;
      inset-inline-end: 0.9rem;
      inset-block-start: 50%;
      translate: 0 -50%;
      color: var(--color-link);
      font-size: 1.25rem;
      line-height: 1;
      transition: translate var(--transition);
    }
    &:hover { background: var(--color-surface-raised); }
    &:hover::after { translate: 0.25rem -50%; }
    &:has(a:focus-visible) { box-shadow: 0 0 0 3px var(--color-brand-soft); }
  }
  [dir="rtl"] .lexxy-content div.block-style-related-reading::after { content: "←"; }
  [dir="rtl"] .lexxy-content div.block-style-related-reading:hover::after { translate: -0.25rem -50%; }
}