/* @label.en Course card
   @description.en One course, class or workshop: its photo, then a heading linking to its page, and a
   few lines about it. The whole card is the link; a card whose heading has no link just shows.

   @label.he כרטיס קורס
   @description.he קורס, שיעור או סדנה אחת: התמונה, אחריה כותרת שמקשרת לעמוד שלה, וכמה שורות עליה. כל
   הכרטיס הוא קישור; כרטיס שהכותרת שלו בלי קישור מוצג בלבד.

   @example
   <div class="block-style-course-card"><action-text-attachment content-type="image/jpeg" url="/block-styles/zohar/course-card.jpg" width="408" height="600"></action-text-attachment><h3><a href="#">הוראת פרנאימה למורים ליוגה</a></h3><p>קורס להוראת תרגילי נשימה יוגים בהסתכלות נוירו-פיזיולוגית.</p></div> */
@layer components {
  .lexxy-content div.block-style-course-card {
    position: relative;
    display: grid;
    grid-template-columns: clamp(6rem, 28%, 11rem) minmax(0, 1fr);
    grid-auto-flow: dense;
    align-items: start;
    gap: 0 var(--inline-space-double);
    margin-block: var(--block-space);
    padding: 1rem;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    transition: background var(--transition), border-color var(--transition);
    > * { grid-column: 2; margin-block: 0 0.5rem; }
    > :last-child { margin-block-end: 0; }
    > :is(action-text-attachment, .attachment-gallery) { grid-column: 1; grid-row: 1 / span 20; margin: 0; }
    figure { margin: 0; padding: 0; }
    figure img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius); }
    figcaption { display: none; }
    > :is(h2, h3, h4) { font-size: var(--text-large); line-height: 1.3; }
    /* The heading's link is stretched over the card; 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. */
    > :is(h2, h3, h4) a:not(action-text-attachment a, [href*="wa.me/"], [href*="whatsapp.com"], [href*="/whatsapp"])::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
    > :is(h2, h3, h4) a:not(action-text-attachment a, [href*="wa.me/"], [href*="whatsapp.com"], [href*="/whatsapp"]):focus-visible { outline: none; }
    a:not(:is(h2, h3, h4) a:not(action-text-attachment a, [href*="wa.me/"], [href*="whatsapp.com"], [href*="/whatsapp"])) { position: relative; z-index: 1; }
  }
  .lexxy-content div.block-style-course-card:has(> :is(h2, h3, h4) a:not(action-text-attachment a, [href*="wa.me/"], [href*="whatsapp.com"], [href*="/whatsapp"])) {
    padding-block-end: 2.25rem;
    &::after {
      content: "→";
      position: absolute;
      inset-inline-end: 1rem;
      inset-block-end: 0.6rem;
      color: var(--color-link);
      font-size: 1.25rem;
      line-height: 1;
      transition: translate var(--transition);
    }
    &:hover { background: var(--color-surface-raised); border-color: var(--color-brand); }
    &:hover::after { translate: 0.25rem 0; }
    &:has(> :is(h2, h3, h4) a:not(action-text-attachment a, [href*="wa.me/"], [href*="whatsapp.com"], [href*="/whatsapp"]):focus-visible) { box-shadow: 0 0 0 3px var(--color-brand-soft); }
  }
  [dir="rtl"] .lexxy-content div.block-style-course-card:has(> :is(h2, h3, h4) a:not(action-text-attachment a, [href*="wa.me/"], [href*="whatsapp.com"], [href*="/whatsapp"]))::after { content: "←"; }
  [dir="rtl"] .lexxy-content div.block-style-course-card:has(> :is(h2, h3, h4) a:not(action-text-attachment a, [href*="wa.me/"], [href*="whatsapp.com"], [href*="/whatsapp"])):hover::after { translate: -0.25rem 0; }
}