/* ==========================================================================
   pages.css : plain styles for the bundled default contents of the content pages
   (inc/default-content/*.php): about, encounters, the heart, the gallery pages, videos,
   contact (written about us: page-media.css). Only .pil-* classes. Loaded on every page after base.css;
   uses base.css tokens (the fallbacks are the site palette). Fonts: Assistant and Alef only.
   RTL: logical properties only. The designer refines the look later.
   ========================================================================== */

/* ---------- titles, prose, lead ---------- */
.pil-title {
  font: 700 var(--t-h1, 2.25rem)/var(--lh-head, 1.3) var(--font-heading, "Yehuda CLM", "Alef", "Assistant", Arial, sans-serif);
  color: var(--plum, #9F1E62);
  text-wrap: balance;
  margin-block-end: var(--s-5, 24px);
}
.pil-title--center { text-align: center; }
.pil-title--olive { color: var(--olive, #576A13); }
.pil-prose { max-width: 72ch; margin-inline: auto; font-size: var(--t-read, 1.125rem); line-height: var(--lh-read, 1.75); color: var(--text-muted, #5E5E5E); }
.pil-prose > * + * { margin-block-start: 1em; }
.pil-prose strong { color: var(--text, #333); }
.pil-prose a strong, .pil-lead a strong, .pil-card a strong { color: inherit; }   /* a link is one blue (--link), the same for the plain and the bold ones (Change 15, the author: the links are in different colours) */
.pil-lead {
  max-width: 62rem; margin-inline: auto; margin-block-end: var(--s-7, 48px);
  text-align: center; font-size: var(--t-lead, 1.25rem); line-height: 1.7; color: var(--text-muted, #5E5E5E);
  text-wrap: balance;
}
.pil-lead strong { color: var(--text, #333); }
.pil-about { width: min(900px, 100%); margin-inline: auto; }
.pil-about .pil-prose { max-width: none; }
.pil-about .pil-title { margin-block-end: var(--s-4, 16px); }

/* an image floated to the end side of the text (the author's portrait): text wraps under it */
.pil-float-end { float: inline-end; width: 350px; max-width: 45%; margin-inline-start: var(--s-5, 24px); margin-block-end: var(--s-3, 12px); }
.pil-float-end img { display: block; width: 100%; height: auto; }
.pil-prose::after { content: ""; display: block; clear: both; }
@media (max-width: 599px) {
  .pil-float-end { float: none; max-width: min(320px, 100%); margin-inline: auto; }   /* 100%: at 320px the 288px column is narrower than 320 and the portrait reached the screen's edge */
}

.pil-figure { margin-inline: auto; }
.pil-figure img { display: block; width: 100%; height: auto; }
.pil-figure--wide { max-width: 800px; }

/* the five encounters (cards, slider, buttons): assets/css/page-encounters.css (Change 15) */

/* ---------- gallery hub: two tiles ---------- */
.pil-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4, 16px); }
.pil-tile {
  display: flex; align-items: center; justify-content: center;
  width: min(380px, calc(100vw - 2 * var(--gutter, 24px))); min-height: 200px;
  background: var(--sky, #73BCEB); color: #000; text-decoration: none;
  font: 700 2.1875rem/1.2 var(--font-heading, "Yehuda CLM", "Alef", "Assistant", Arial, sans-serif);
  transition: background-color var(--dur-state, 200ms) var(--ease-standard, ease);
}
.pil-tile:hover, .pil-tile:focus-visible { background: #5AAEE3; }
/* on a desktop screen the two tiles take the height the page would otherwise leave empty under them */
@media (min-width: 900px) {
  .pil-tile { min-height: clamp(200px, calc(100vh - 520px), 360px); min-height: clamp(200px, calc(100svh - 520px), 360px); }
}

/* ---------- gallery: rows that keep every image's own ratio (no crop); the order is the DOM order ---------- */
.pil-gallery { display: flex; flex-wrap: wrap; gap: var(--s-3, 12px); margin: 0; padding: 0; list-style: none; }
.pil-gallery > li {
  flex-grow: calc(var(--w) / var(--h) * 100);
  flex-basis: calc(var(--w) / var(--h) * 220px);
  min-width: 0; max-width: calc(var(--w) / var(--h) * 520px);
}
.pil-gallery::after { content: ""; flex-grow: 1000000; }
.pil-gallery a { display: block; line-height: 0; background: var(--paper-light, #F3F1EC); }
.pil-gallery img { display: block; width: 100%; height: auto; }
.pil-gallery a:hover img, .pil-gallery a:focus-visible img { opacity: .9; }
.pil-gallery--drawings > li { flex-basis: calc(var(--w) / var(--h) * 260px); }
.pil-gallery--drawings a { background: #fff; }
@media (max-width: 599px) {
  .pil-gallery { gap: var(--s-2, 8px); }
  .pil-gallery > li { flex-basis: calc(var(--w) / var(--h) * 130px); }
}

/* ---------- videos ---------- */
.pil-videos { display: grid; grid-template-columns: minmax(0, 470px); gap: var(--s-5, 24px); justify-content: center; margin-block-end: var(--s-7, 48px); }
@media (min-width: 720px) {
  .pil-videos { grid-template-columns: repeat(2, minmax(0, 470px)); }
}
.pil-video { position: relative; background: #000; }
.pil-video iframe, .pil-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pil-video { aspect-ratio: 16 / 9; }
.pil-video--square { aspect-ratio: 1 / 1; }
.pil-video--portrait { aspect-ratio: 480 / 848; width: 100%; max-width: 360px; justify-self: center; }
.pil-video video { object-fit: contain; }
.pil-videos--you-filmed { margin-block-end: 0; }
.pil-videos--you-filmed .pil-video--square { max-width: 420px; width: 100%; justify-self: center; }

/* «כותבים עלינו» (written about us): its own file, assets/css/page-media.css (that page only). */

/* ---------- contact: moved to page-contact.css (Change 9), which loads on that page only ---------- */