/* @label.en Site section
   @description.en A doorway to one part of the site: a photo, then a heading linking there and a line
   about it. Consecutive sections form a mosaic sized by their order, so put the most important first:
   the first is large, the second stands tall beside it, the next three share a row, and the sixth is a
   wide strip that closes the set. The whole section is the link; pick photographs, as they're cropped.

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

   @example
   <div class="block-style-site-section"><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 {
  /* A body holding sections becomes a six-column grid: the sections fill it in order, and everything
     else in the body spans the full row. */
  .lexxy-content:has(> div.block-style-site-section) {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: min(2.5rem, 4vw);
    > :not(div.block-style-site-section) { grid-column: 1 / -1; }
    > :not(div.block-style-site-section):has(+ div.block-style-site-section) { margin-block-end: 2.5rem; }
  }

  /* No card: a rounded photo, then the heading and a muted line, with room between sections. */
  .lexxy-content div.block-style-site-section {
    --section-photo: 15rem;

    position: relative;
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    margin-block-end: 3.25rem;
    > * { margin: 0; }
    > :is(action-text-attachment, figure.attachment, .attachment-gallery) { display: block; margin-block-end: 1.1rem; }
    figure { inline-size: 100%; margin: 0; padding: 0; }
    figure img {
      display: block;
      inline-size: 100%;
      max-inline-size: none;
      block-size: var(--section-photo);
      object-fit: cover;
      border-radius: 18px;
      transition: filter var(--transition);
    }
    figcaption { display: none; }
    > :is(h2, h3, h4) { margin-block-end: 0.35rem; font-size: 1.6rem; line-height: 1.25; }
    > p { max-inline-size: 30rem; font-size: 1.02rem; line-height: 1.55; color: var(--color-muted); }
    > :is(h2, h3, h4) a { color: inherit; text-decoration: none; transition: color var(--transition); }
    > :is(h2, h3, h4) a::after { content: ""; position: absolute; inset: 0; }
    > :is(h2, h3, h4) a:focus-visible { outline: none; }
    &:hover > :is(h2, h3, h4) a { color: var(--color-link); }
    &:hover figure img { filter: brightness(1.08); }
    &:has(> :is(h2, h3, h4) a:focus-visible) figure img { box-shadow: 0 0 0 3px var(--color-brand-soft); }
  }

  /* Size follows order: the lead, a tall companion beside it, a row of three, then a closing strip. */
  .lexxy-content div.block-style-site-section:nth-child(1 of div.block-style-site-section) {
    --section-photo: 27rem;

    grid-column: span 4;
    figure img { object-position: center 15%; }
    > :is(h2, h3, h4) { font-size: 2.3rem; }
    > p { font-size: 1.15rem; }
  }
  .lexxy-content div.block-style-site-section:nth-child(2 of div.block-style-site-section) { --section-photo: 27rem; }
  .lexxy-content div.block-style-site-section:nth-child(6 of div.block-style-site-section) {
    --section-photo: 13rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto auto 1fr;
    grid-column: 1 / -1;
    column-gap: 2.5rem;
    > :is(action-text-attachment, figure.attachment, .attachment-gallery) { grid-column: 1; grid-row: 1 / -1; margin: 0; }
    > :not(action-text-attachment, figure.attachment, .attachment-gallery) { grid-column: 2; }
    > :is(h2, h3, h4) { grid-row: 2; font-size: 2rem; }
    > p { grid-row: 3; }
  }

  /* A phone pairs the sections up; the lead and the strip keep the full width. The grid itself is the
     query's container, so the pairing is in the sections' spans, not its columns. */
  @container prose (width < 40rem) {
    .lexxy-content div.block-style-site-section {
      --section-photo: 9.5rem;

      grid-column: span 3;
      margin-block-end: 2.25rem;
      > :is(action-text-attachment, figure.attachment, .attachment-gallery) { margin-block-end: 0.7rem; }
      figure img { border-radius: 14px; }
      > :is(h2, h3, h4) { font-size: 1.15rem; }
      > p { font-size: 0.88rem; }
    }
    .lexxy-content div.block-style-site-section:nth-child(1 of div.block-style-site-section) {
      --section-photo: 15rem;

      grid-column: 1 / -1;
      > :is(h2, h3, h4) { font-size: 1.7rem; }
      > p { font-size: 1rem; }
    }
    .lexxy-content div.block-style-site-section:nth-child(2 of div.block-style-site-section) { --section-photo: 9.5rem; }
    .lexxy-content div.block-style-site-section:nth-child(6 of div.block-style-site-section) {
      --section-photo: 10rem;

      display: flex;
      > :is(action-text-attachment, figure.attachment, .attachment-gallery) { margin-block-end: 0.7rem; }
      > :is(h2, h3, h4) { font-size: 1.4rem; }
    }
  }
}