/* ==========================================================================
   page-encounters.css : «מפגשי ספרות» (inc/default-content/encounters.php, assets/js/page-encounters.js). Loads on that page only (enqueue convention).

   Change 16 (the client's reaction to the slider of Change 15 was «מזעזע, נורא»: she wants the page as it was in the ORIGINAL, but with all the meetings AND the three
   buttons in ONE view; the design «א» of the canvas «מפגשי ספרות: עיצובים לאישור», chosen by the owner, with his three notes).
   - Five open columns separated by thin rules, like the live page's three: the WHOLE picture in a frame tinted with the meeting's colour, the coloured title, the age
     line UNDER the title, a short summary, «להמשך קריאה». The words that open are the author's own.
   - At 1000px and up the columns stand in one row, and the page is sized to the screen's HEIGHT too: from 760px of height (a laptop's 1440x900 screen under its browser's bars)
     the intro, the five columns and the three buttons are all in view; under 720px of height the same page is tighter (a shorter picture, a smaller intro) and still fits 650px.
     The page's own top padding is smaller than the other pages' (body.pilpelet-page-encounters).
   - Under 1000px five columns cannot stand in one row: three and two (a tablet), one under the other (a phone); the three buttons then come right after the intro so that
     they are seen first.
   - Without script «להמשך קריאה» is a details element and opens the full words in place; with script (assets/js/page-encounters.js) it opens a modal dialog (.pil-dialog).
   RTL: logical properties only. Tokens from base.css. Colours of the meetings: blue, orange, olive and (swapped, Change 16) ink for Dubi and plum for Ariel.
   ========================================================================== */

/* the page's vertical rhythm (the owner, 1.10.1: «העמוד קצת דחוס מדי, אפשר טיפה לרווח בין החלקים»): the space between the parts is set in ONE place. A tall window gets the most air; a window up to 780px high a little
   less, and one up to 700px high the least, so that from 1000px wide the intro, the five columns and the three buttons still stand in ONE window (see the short-screen blocks below). */
.pilpelet-page-encounters {
  --pe-top: 28px; --pe-title-gap: 14px; --pe-lead-gap: 28px;
  --pe-card-t: 10px; --pe-card-b: 14px; --pe-name-t: 16px; --pe-name-b: 4px; --pe-age-b: 8px; --pe-sum-b: 12px;
  --pe-act-t: 34px;
}
.pilpelet-page-encounters .page-main { padding-block: var(--pe-top) 32px; }

/* the page is a column: the title, the intro, [the three buttons, under 1000px], the five meetings, [the three buttons, from 1000px]. The buttons are in the page twice, one copy shown at a
   time (see the end of this block), so the reading order and the Tab order are the order on the screen at every width: nothing is reordered with `order`. */
.pil-encounters { display: flex; flex-direction: column; }
.pil-encounters > .pil-title { margin-block-end: var(--pe-title-gap); }   /* the size is the other pages' (--t-h1, pages.css): Change 21, the owner: the meetings title was smaller than every other page's */
.pil-encounters > .pil-lead { font-size: 1rem; line-height: 1.6; max-width: 78rem; margin-block-end: var(--pe-lead-gap); text-wrap: pretty; }

/* ---------- the colour of each meeting: the title and the dialog's flourish (--accent), the picture's ground (--tint: 11% of the colour over the light paper), its edge (--edge: 70% over the paper) and the
   dialog's own very light wash (--wash: 6% over the light paper), written out as plain values because color-mix() is newer than the compatibility floor ---------- */
.pil-meet--blue   { --accent: #007AA8; --tint: #D8E4E5; --edge: #4599B7; --wash: #E4EAE8; }
.pil-meet--orange { --accent: #E34C0F; --tint: #F1DFD4; --edge: #E4794C; --wash: #F2E7DF; }
.pil-meet--olive  { --accent: #576A13; --tint: #E2E2D4; --edge: #828E4E; --wash: #EAE9DF; }
.pil-meet--ink    { --accent: #104848; --tint: #DADEDA; --edge: #507674; --wash: #E5E7E2; }
.pil-meet--plum   { --accent: #9F1E62; --tint: #EADADD; --edge: #B45986; --wash: #EEE4E4; }

/* ---------- the five columns ---------- */
.pil-meetings { --rule-line: rgba(30, 28, 22, .6); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pil-meet { display: flex; flex-direction: column; align-items: stretch; padding: var(--pe-card-t) 14px var(--pe-card-b); text-align: center; border-inline-start: 1px solid var(--rule-line); }
.pil-meet:last-child { border-inline-end: 1px solid var(--rule-line); }
/* the whole picture, whatever its shape (the owner's rule, Change 15), on a tint of the meeting's colour */
.pil-meet__media { position: relative; display: block; margin: 0; aspect-ratio: 16 / 10; background: var(--tint); border: 1px solid var(--edge); overflow: hidden; }
.pil-meet__media img, .pil-dialog__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.pil-meet__title {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.5em; margin: var(--pe-name-t) 0 var(--pe-name-b);
  font: 700 1.375rem/1.2 var(--font-heading); color: var(--accent); text-wrap: balance;
}
.pil-meet__age { margin: 0 0 var(--pe-age-b); color: var(--text); font: 700 .9375rem/1.4 var(--font-body); }
.pil-meet__summary { margin: 0 0 var(--pe-sum-b); min-height: 6em; font-size: .9375rem; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.pil-meet__more { margin-block-start: auto; align-self: center; }
.pil-meet__more > summary {
  display: inline-block; list-style: none; cursor: pointer; padding: 6px 4px; min-height: 44px; box-sizing: border-box;
  color: var(--link); font: 600 .9375rem/1.3 var(--font-body);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.pil-meet__more > summary::-webkit-details-marker { display: none; }
.pil-meet__more > summary:hover, .pil-meet__more > summary:focus-visible { text-decoration-thickness: 2px; }
.pil-meet__more > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.pil-meet__full { text-align: start; color: var(--text-muted); font-size: .9375rem; line-height: 1.6; }
.pil-meet__full p { margin: 0 0 .7em; }
/* with script the full words open in the dialog: the in-place copy stays out of sight (it is still in the page for search and for the no-script case) */
.pil-dialog-ready .pil-meet__full { display: none; }

/* ---------- the three ways to book ---------- */
.pil-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: var(--pe-act-t) 0 0; }
.pil-actions--top { display: none; }   /* the copy after the intro is for the narrow screens (below) */
.pil-button {
  --btn: var(--ink); --btn-hover: #0B3636;
  flex: 0 1 300px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 6px 20px; border-radius: var(--r-control, 3px);
  background: var(--btn); color: #fff; text-decoration: none; text-align: center;
  font: 700 1.125rem/1.2 var(--font-body, "Assistant", "Alef", Arial, sans-serif);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .35);
  transition: background-color var(--dur-state, 200ms) var(--ease-standard, ease), box-shadow var(--dur-feedback, 120ms) var(--ease-standard, ease), transform var(--dur-feedback, 120ms) var(--ease-standard, ease);
}
.pil-button__icon { flex: none; inline-size: 24px; block-size: 24px; }
.pil-button:hover, .pil-button:focus-visible { background: var(--btn-hover); color: #fff; box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .45); }
.pil-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pil-button:active { transform: translateY(1px); }
.pil-button--plum { --btn: var(--plum, #9F1E62); --btn-hover: #7E174E; }
.pil-button--ink  { --btn: var(--ink, #104848); --btn-hover: #0B3636; }
.pil-button--blue { --btn: var(--blue, #256F9F); --btn-hover: #1B5578; }

/* ---------- a short screen (up to 780px of height under the browser's bars: a laptop's 1440x900 screen, a small laptop's 650): the same page, tighter ---------- */
@media (min-width: 1000px) and (max-height: 780px), (min-width: 1000px) and (max-width: 1199px) and (max-height: 860px) {   /* narrower columns make the page taller: a little more room is asked of the same rules */
  .pilpelet-page-encounters {
    --pe-top: 20px; --pe-title-gap: 8px; --pe-lead-gap: 20px;
    --pe-card-t: 6px; --pe-card-b: 8px; --pe-name-t: 10px; --pe-name-b: 2px; --pe-age-b: 5px; --pe-sum-b: 5px;
    --pe-act-t: 20px;
  }
  .pilpelet-page-encounters .page-main { padding-block-end: 20px; }
  .pil-encounters > .pil-lead { font-size: .9375rem; line-height: 1.45; max-width: none; }
  .pil-meet__media { aspect-ratio: 5 / 2; }
  .pil-meet__title { min-height: 2.3em; font-size: 1.1875rem; }
  .pil-meet__age { font-size: .875rem; }
  .pil-meet__summary { min-height: 0; font-size: .875rem; line-height: 1.4; }
  .pil-meet__more > summary { padding-block: 2px; min-height: 40px; }
  .pil-actions { gap: 12px; }
  .pil-button { min-height: 44px; padding-block: 4px; font-size: 1.0625rem; }
}
/* a window up to 700px high (a small laptop under its browser's bars): the same, with the least air that keeps everything in the window */
@media (min-width: 1000px) and (max-height: 700px) {
  .pilpelet-page-encounters {
    --pe-top: 9px; --pe-title-gap: 5px; --pe-lead-gap: 12px;   /* Change 21: the title is the other pages' size now (41px at 1440), 14px taller than before: the air is taken here */
    --pe-card-t: 4px; --pe-card-b: 6px; --pe-name-t: 8px; --pe-name-b: 0px; --pe-age-b: 4px; --pe-sum-b: 3px;
    --pe-act-t: 16px;
  }
  .pil-encounters > .pil-title { line-height: 1.2; }
}

/* ---------- under 1000px: three and two (a tablet), the buttons right after the intro ---------- */
@media (max-width: 999px) {
  .pil-actions--top { display: flex; margin: 0 0 30px; }
  .pil-actions--bottom { display: none; }
  .pil-meetings { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 0; border-block-start: 1px solid var(--rule-line); }
  .pil-meet { grid-column: span 2; padding-block: 20px 16px; border-block-end: 1px solid var(--rule-line); }
  .pil-meet:nth-child(n + 4) { grid-column: span 3; }
  .pil-meet:last-child { border-inline-end: 1px solid var(--rule-line); }
  .pil-meet:nth-child(3) { border-inline-end: 1px solid var(--rule-line); }
  .pil-meet__title { min-height: 2.5em; }
}
/* ---------- a phone: one under the other, the picture beside the words ---------- */
@media (max-width: 599px) {
  .pil-encounters > .pil-lead { font-size: 1rem; }
  .pil-actions { gap: 10px; }
  .pil-button { flex: 1 1 100%; max-inline-size: none; }
  .pil-meetings { grid-template-columns: minmax(0, 1fr); }
  .pil-meet, .pil-meet:nth-child(n + 4) { grid-column: auto; border-inline: 0; padding-inline: 0; }
  .pil-meet:last-child, .pil-meet:nth-child(3) { border-inline-end: 0; }
  .pil-meet__title { min-height: 0; justify-content: center; }
  .pil-meet__summary { min-height: 0; }
  .pil-meet__media { aspect-ratio: 16 / 10; max-inline-size: 420px; inline-size: 100%; margin-inline: auto; }
}

/* ---------- «להמשך קריאה»: the dialog ----------
   The meeting's colour shows without a stripe on top (the owner, 1.10.1: the stripe «שמסגיר ו-צועק AI»): the page behind goes into a veil of that colour (a dark shade of it), the dialog has a very light wash of it,
   the picture stands on its tint with the meeting's edge and a soft shadow of it, the title is in the colour, and a hand-drawn wave in the colour stands between the age line and the words. */
.pil-modal-open { overflow: hidden; }
.pil-dialog {
  inline-size: min(920px, 100% - 32px); max-block-size: calc(100dvh - 32px); margin: auto; padding: 0;
  border: 0; border-radius: 3px;
  background: var(--wash, var(--paper-light, #F3F1EC)); color: var(--text);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .55);
  overflow: auto;
}
.pil-dialog::backdrop { background: rgba(24, 22, 16, .58); }
/* the veil of each colour, spelled out per class: a ::backdrop does not inherit custom properties in every browser */
.pil-dialog.pil-meet--blue::backdrop   { background: rgba(0, 50, 70, .66); }
.pil-dialog.pil-meet--orange::backdrop { background: rgba(102, 34, 7, .64); }
.pil-dialog.pil-meet--olive::backdrop  { background: rgba(39, 48, 9, .66); }
.pil-dialog.pil-meet--ink::backdrop    { background: rgba(6, 34, 34, .68); }
.pil-dialog.pil-meet--plum::backdrop   { background: rgba(72, 14, 44, .64); }
.pil-dialog[open] { animation: pil-dialog-in 180ms var(--ease-decelerate, ease-out); }
.pil-dialog[open]::backdrop { animation: pil-dialog-fade 180ms ease-out; }
@keyframes pil-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pil-dialog-fade { from { opacity: 0; } to { opacity: 1; } }
.pil-dialog__inner { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); column-gap: 30px; align-items: start; padding: 30px 32px 28px; }
.pil-dialog__media { position: relative; display: block; margin: 0; aspect-ratio: 4 / 3; background: var(--tint, #F3F1EC); border: 1px solid var(--edge, var(--pencil)); box-shadow: 0 14px 26px -14px var(--edge, rgba(0, 0, 0, .4)); overflow: hidden; }
.pil-dialog__title { margin: 0 0 6px; font: 700 2rem/1.2 var(--font-heading); color: var(--accent, var(--ink)); }
.pil-dialog__age { margin: 0 0 6px; color: var(--text); font: 700 1.0625rem/1.4 var(--font-body); }
.pil-dialog__wave { display: block; inline-size: 96px; block-size: 10px; margin: 0 0 14px; color: var(--accent, var(--ink)); }
.pil-dialog__body p { margin: 0 0 10px; font-size: 1.0625rem; line-height: 1.7; color: var(--text-muted); }
.pil-dialog__close {
  position: absolute; inset-block-start: 8px; inset-inline-end: 10px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 3px; background: transparent; color: var(--text);
  font: 600 1rem/1 var(--font-body); cursor: pointer;
}
.pil-dialog__close svg { inline-size: 18px; block-size: 18px; }
.pil-dialog__close:hover { background: rgba(30, 28, 22, .07); }
.pil-dialog__close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 699px) {
  .pil-dialog { inline-size: calc(100% - 16px); max-block-size: calc(100dvh - 16px); }
  .pil-dialog__inner { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding: 52px 18px 22px; }
  .pil-dialog__media { max-inline-size: 360px; inline-size: 100%; margin-inline: auto; }
  .pil-dialog__title { font-size: 1.625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pil-dialog[open], .pil-dialog[open]::backdrop { animation: none; }
  .pil-button { transition: none; }
}

/* forced colours (Windows contrast themes): the tints go, so the pictures, the columns' rules and the buttons keep an edge */
@media (forced-colors: active) {
  .pil-button { border: 1px solid CanvasText; }
  .pil-dialog__close { border: 1px solid ButtonText; }
  .pil-meet__media, .pil-dialog__media { border-color: CanvasText; }
  .pil-dialog { border: 1px solid CanvasText; }
}