/* ============================================================
   TRIBECA LISBOA — PROGRAMME page (main website)
   Black editorial canvas. Reuses --gut/--maxw/.r-wrap, CardLabel,
   IconPin, Druk/Basis type, square corners, hairline borders.
   ============================================================ */
.pg-page{ background:#000; color:#fff; font-family:var(--font-text); -webkit-font-smoothing:antialiased; }
.pg-page img{ display:block; }

/* ---- contextual header ---- */
.pg-hero{ padding-top:var(--band-y); padding-bottom:28px; border-bottom:1px solid var(--line-dark); }
.pg-eyebrow{ font-family:var(--font-text); font-weight:700; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pink); margin-bottom:14px; }
.pg-h1{ margin:0; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(48px,9vw,112px); line-height:.86; letter-spacing:-.01em; }
.pg-desc{ margin:18px 0 0; font-family:var(--font-text); font-size:clamp(16px,1.8vw,19px);
  line-height:1.5; color:var(--fg-3); max-width:48ch; }
.pg-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.pg-tab{ background:transparent; border:1px solid var(--line-dark2); color:#fff; cursor:pointer;
  font-family:var(--font-text); font-weight:700; font-size:13px; letter-spacing:.02em; text-transform:uppercase;
  padding:11px 18px; transition:background .15s, color .15s, border-color .15s; }
.pg-tab:hover{ border-color:#fff; }
.pg-tab.is-active{ background:#fff; color:#000; border-color:#fff; }

/* ---- sticky controls ---- */
.pg-controls{ position:sticky; top:var(--hdr-h); z-index:30; background:#000;
  border-bottom:1px solid var(--line-dark); padding:16px 0; }
.pg-controls-row{ display:flex; gap:12px; align-items:stretch; }
.pg-search{ position:relative; flex:1; min-width:0; display:flex; align-items:center; gap:10px;
  background:#0d0d0d; border:1px solid var(--line-dark2); padding:0 14px; }
.pg-search > svg{ color:var(--fg-3); flex:none; }
.pg-search input{ flex:1; background:transparent; border:none; outline:none; color:#fff; min-width:0;
  font-family:var(--font-text); font-size:16px; padding:13px 0; }
.pg-search input::placeholder{ color:var(--fg-3); }
.pg-search-clear{ background:none; border:none; color:var(--fg-3); cursor:pointer; font-size:14px; padding:4px; flex:none; }
.pg-filter-btn{ position:relative; display:inline-flex; align-items:center; gap:8px; flex:none;
  background:#fff; color:#000; border:1px solid #fff; cursor:pointer; padding:0 18px;
  font-family:var(--font-text); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.02em; transition:background .15s; }
.pg-filter-btn:hover{ background:var(--pink); border-color:var(--pink); }
.pg-filter-count{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 6px; background:#000; color:#fff; font-size:12px; font-weight:700; }

/* date rail (quick-jump, not a calendar) */
.pg-rail{ display:flex; gap:8px; overflow-x:auto; margin-top:12px; padding-bottom:2px; scrollbar-width:none; }
.pg-rail::-webkit-scrollbar{ display:none; }
.pg-rail-chip{ flex:none; background:transparent; border:1px solid var(--line-dark2); color:var(--fg-2);
  cursor:pointer; padding:8px 14px; font-family:var(--font-text); font-weight:700; font-size:12px;
  letter-spacing:.02em; white-space:nowrap; transition:color .15s, border-color .15s; }
.pg-rail-chip:hover{ color:#fff; border-color:#fff; }

/* ---- list + groups ---- */
.pg-list{ padding-top:32px; padding-bottom:var(--band-y); }
.pg-group{ margin-bottom:40px; scroll-margin-top:170px; }
.pg-group-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:18px;
  padding-bottom:12px; border-bottom:1px solid var(--line-dark); }
.pg-group-label{ margin:0; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:32px; line-height:1; letter-spacing:-.01em; }
.pg-group-count{ font-family:var(--font-text); font-weight:700; font-size:13px; color:var(--fg-3); }
.pg-group-items{ display:flex; flex-direction:column; gap:30px; }

/* ---- event row card (existing card language) ----
   the title links, stretched over the whole card by ::after;
   the .pg-cta control lifts above the overlay */
.pg-card{ display:flex; flex-direction:column; border:1px solid var(--line-dark2); background:#000;
  cursor:pointer; transition:border-color .15s; position:relative; }
.pg-card:hover{ border-color:#fff; }
.pg-card-media{ position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; background:#1a1a1a; }
.pg-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.pg-card:hover .pg-card-media img{ transform:scale(1.04); }
.pg-card-label{ position:absolute; left:0; top:0; }
.pg-status{ position:absolute; right:10px; top:10px; display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; font-family:var(--font-text); font-weight:700; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background:rgba(0,0,0,.7); }
.pg-status::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pg-status.is-available{ color:var(--light-green); }
.pg-status.is-soldout{ color:var(--red); }
.pg-status.is-soon{ color:var(--yellow); }
.pg-card-body{ display:flex; flex-direction:column; gap:16px; padding:18px 18px 16px; flex:1; }
.pg-card-main{ display:flex; flex-direction:column; gap:8px; }
.pg-card-title{ margin:0; font-family:var(--font-text); font-weight:700; font-size:22px; line-height:1.1; text-wrap:pretty; }
.pg-card-title a{ display:block; color:inherit; text-decoration:none; } /* block: keeps the title's text-wrap:pretty line breaks identical to before */
.pg-card-title a::after{ content:''; position:absolute; inset:0; }
.pg-card-title a:focus-visible{ outline:2px solid var(--pink); outline-offset:2px; }
.pg-card-meta{ display:flex; align-items:center; gap:8px; font-family:var(--font-text); font-weight:700;
  font-size:14px; color:#fff; }
.pg-card-meta .pg-dot{ color:var(--fg-3); }
.pg-card-venue{ display:flex; align-items:center; gap:6px; font-family:var(--font-text); font-size:14px; color:var(--fg-3); }
.pg-card-venue svg{ flex:none; color:var(--fg-3); }
.pg-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:14px; border-top:1px solid var(--line-dark); margin-top:auto; }
.pg-access{ font-family:var(--font-text); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.pg-access--paid{ color:#fff; }
.pg-access--reg{ color:var(--light-blue); }
.pg-access--free{ color:var(--light-green); }
/* the CTA is an <a> that navigates like the card does */
.pg-cta{ display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer;
  color:var(--pink); font-family:var(--font-text); font-weight:700; font-size:14px; text-transform:uppercase;
  letter-spacing:.02em; border-bottom:2px solid var(--pink); padding:0 0 4px; transition:gap .15s;
  text-decoration:none; position:relative; z-index:1; }
.pg-cta:hover{ gap:12px; }
.pg-cta:focus-visible{ outline:2px solid var(--pink); outline-offset:2px; }
.pg-cta-none{ font-family:var(--font-text); font-size:12px; color:var(--fg-3); text-transform:uppercase; letter-spacing:.04em; }

/* wide: card becomes horizontal row */
@media (min-width:680px){
  .pg-card{ flex-direction:row; }
  .pg-card-media{ width:260px; flex:none; aspect-ratio:4/3; }
  .pg-card-body{ flex-direction:row; align-items:center; gap:24px; }
  .pg-card-main{ flex:1; }
  .pg-card-foot{ flex-direction:column; align-items:flex-end; gap:14px; padding-top:0; border-top:none;
    margin-top:0; border-left:1px solid var(--line-dark); padding-left:24px; min-width:190px; text-align:right; }
}
@media (min-width:1024px){
  .pg-list{ padding-top:40px; }
  .pg-card-media{ width:240px; aspect-ratio:4/3; }
}
@media (min-width:1320px){
  .pg-card-media{ width:300px; aspect-ratio:16/9; }
  .pg-card-body{ gap:40px; }
  .pg-card-foot{ min-width:220px; }
}

/* ---- empty state ---- */
.pg-empty{ padding:64px 0; text-align:center; }
.pg-empty-h{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:32px; }
.pg-empty p{ color:var(--fg-3); margin-top:10px; }

/* ---- filter drawer (bottom sheet on mobile, side panel on desktop) ---- */
.pg-drawer{ position:fixed; inset:0; z-index:90; visibility:hidden; }
.pg-drawer.is-open{ visibility:visible; }
.pg-drawer-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.6); opacity:0; transition:opacity .25s; }
.pg-drawer.is-open .pg-drawer-scrim{ opacity:1; }
.pg-drawer-panel{ position:absolute; left:0; right:0; bottom:0; max-height:86vh; background:var(--indigo);
  border-top:1px solid rgba(255,255,255,.22); display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .3s cubic-bezier(.16,1,.3,1); }
.pg-drawer.is-open .pg-drawer-panel{ transform:none; }
.pg-drawer-top{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px;
  border-bottom:1px solid rgba(255,255,255,.2); }
.pg-drawer-h{ margin:0; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:26px; }
.pg-drawer-x{ background:none; border:none; color:#fff; font-size:18px; cursor:pointer; padding:6px; }
.pg-drawer-scroll{ overflow-y:auto; padding:8px 24px 16px; }
.pg-fgroup{ padding:20px 0; border-bottom:1px solid rgba(255,255,255,.2); }
.pg-fgroup:last-child{ border-bottom:none; }
.pg-flabel{ font-family:var(--font-text); font-weight:700; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--pink); margin-bottom:14px; }
.pg-seg{ display:flex; gap:0; border:1px solid rgba(255,255,255,.4); }
.pg-seg-btn{ flex:1; background:transparent; border:none; border-right:1px solid rgba(255,255,255,.4); color:#fff;
  cursor:pointer; padding:12px 8px; font-family:var(--font-text); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.02em; transition:background .15s, color .15s; }
.pg-seg-btn:last-child{ border-right:none; }
.pg-seg-btn.is-on{ background:#fff; color:var(--indigo); }
.pg-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pg-chip{ background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff; cursor:pointer;
  padding:9px 14px; font-family:var(--font-text); font-weight:700; font-size:13px; transition:background .15s, color .15s, border-color .15s; }
.pg-chip:hover{ border-color:#fff; }
.pg-chip.is-on{ background:var(--pink); border-color:var(--pink); color:#000; }
.pg-drawer-foot{ display:flex; gap:12px; padding:16px 24px; border-top:1px solid rgba(255,255,255,.2); background:var(--indigo); }
.pg-drawer-clear{ flex:none; background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff; cursor:pointer;
  padding:14px 20px; font-family:var(--font-text); font-weight:700; font-size:13px; text-transform:uppercase; }
.pg-drawer-apply{ flex:1; background:#fff; color:var(--indigo); border:none; cursor:pointer; padding:14px 20px;
  font-family:var(--font-text); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.02em; transition:background .15s; }
.pg-drawer-apply:hover{ background:var(--pink); color:#000; }

@media (min-width:760px){
  .pg-drawer-panel{ left:auto; top:0; bottom:0; width:420px; max-height:none;
    border-top:none; border-left:1px solid rgba(255,255,255,.22); transform:translateX(100%); }
  .pg-drawer.is-open .pg-drawer-panel{ transform:none; }
}

/* pillar tabs reuse homepage .r-tabs — already inside .r-wrap, so drop its own gutter */
.pg-cattabs .r-tabs{ padding-left:0; padding-right:0; }