/* ============================================================
   מועדון האזור — /events/ page styles
   Extends base.css tokens. Luxury Editorial / Music-Journal.
   ============================================================ */

.page-head h1{
  display:flex;
  flex-wrap:wrap;
  gap:.35em;
}

/* ---------- programme sections ---------- */
.programme{
  padding-block:clamp(2.5rem,6vw,4.5rem);
}
.programme-tail{
  padding-block-start:clamp(3rem,7vw,5rem);
}

.month-group + .month-group{
  margin-block-start:clamp(3rem,7vw,5rem);
}

/* ---------- month divider ---------- */
.month-div{
  display:flex;
  align-items:baseline;
  gap:clamp(1.25rem,3vw,2rem);
  margin-block-end:clamp(1.25rem,3vw,2rem);
}
.month-name{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.85rem);
  color:var(--accent);
  white-space:nowrap;
}
.month-rule{
  flex:1;
  block-size:1px;
  background:var(--line);
}

/* ---------- programme rows ---------- */
.prog-list{ display:flex; flex-direction:column; }

.prog-row{
  position:relative;
  display:grid;
  grid-template-areas:"date poster info cta";
  grid-template-columns:76px 128px 1fr 108px;
  column-gap:clamp(1.5rem,3vw,2.5rem);
  align-items:center;
  padding-block:clamp(1.5rem,3vw,2.25rem);
  border-block-end:1px solid var(--line);
  transition:background-color .5s var(--ease-std);
}
.js-anim .prog-row{ border-block-end-color:transparent; }
.prog-row:hover{ background:rgba(23,19,15,.035); }

.prog-line{
  content:'';
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  block-size:1px;
  background:var(--line-strong);
  transform-origin:100% 50%;
  pointer-events:none;
}

/* ---------- date column ---------- */
.prog-date{
  grid-area:date;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.prog-day-mask{
  display:block;
  overflow:hidden;
  padding-block-end:.06em;
}
.prog-day-inner{
  display:block;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2.1rem,3.6vw,3rem);
  line-height:.85;
  color:var(--ink);
}
.prog-weekday{
  font-size:.78rem;
  color:var(--ink-faint);
}

/* ---------- poster plate ---------- */
.prog-poster{
  grid-area:poster;
  aspect-ratio:3/4;
  overflow:hidden;
  position:relative;
  transition:transform .6s var(--ease-std);
}
.prog-poster img{
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
}
/* posters are printed flyers (type-heavy), not photography: the site-wide
   warm duotone (base.css) is calibrated for photos and turns flyer text
   to mush. Use a gentler, still on-palette tint so type stays legible,
   still resolving to full color on hover per the row's duo mechanic. */
.prog-poster.duo img{
  filter:grayscale(.82) sepia(.15) hue-rotate(310deg) saturate(1.05) brightness(.97) contrast(1.03);
}
@media (hover:hover) and (pointer:fine){
  .prog-row:hover .prog-poster{ transform:rotate(-2deg) scale(1.05); }
  .prog-row:hover .prog-poster img{ filter:none; }
  .prog-row:focus-within .prog-poster{ transform:rotate(-2deg) scale(1.05); }
  .prog-row:focus-within .prog-poster img{ filter:none; }
}

/* ---------- info column ---------- */
.prog-info{ grid-area:info; min-width:0; }
.prog-name{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.2rem,1.8vw,1.55rem);
  line-height:1.25;
  margin:0 0 .35rem;
  color:var(--ink);
}
.prog-meta{
  font-size:.92rem;
  color:var(--ink-soft);
  margin:0 0 .55rem;
}
.prog-desc{
  font-size:.92rem;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0;
  max-width:56ch;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------- cta ---------- */
.prog-cta{
  grid-area:cta;
  justify-self:start;
  font-weight:600;
}

/* ---------- band: guarantee caption contrast regardless of the photo's
   local brightness (text-shadow alone isn't reliable across arbitrary
   source photos) ---------- */
.band::after{
  content:'';
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  block-size:60%;
  background:linear-gradient(to top, rgba(23,19,15,.7), rgba(23,19,15,0));
  pointer-events:none;
}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .prog-row{
    grid-template-columns:70px 108px 1fr 92px;
    column-gap:1.5rem;
  }
  .prog-desc{ max-width:44ch; }
}

@media (max-width:859px){
  .prog-row{
    grid-template-areas:
      "date poster"
      "info info"
      "cta cta";
    grid-template-columns:1fr 100px;
    column-gap:1.25rem;
    row-gap:.9rem;
    align-items:start;
    padding-block:1.6rem;
  }
  .prog-date{ flex-direction:row; align-items:baseline; gap:.6rem; }
  .prog-poster{ inline-size:100px; justify-self:end; }
  .prog-desc{ max-width:none; }
  .prog-cta{ justify-self:start; }
  .month-group + .month-group{ margin-block-start:clamp(2.5rem,10vw,3.5rem); }
}