/* ============================================================================
   Greek Theater Festival Berlin — Programme page + single production page
   ----------------------------------------------------------------------------
   Scopes:  .gtfb-prog  = programme listing page (intro / plays / schedule)
            .gtfb-prod  = single production ("play detail") page
   Divi-safe: tokens live on the two scopes (never :root), every selector is
   prefixed, no bare element selectors.
   Montserrat is already enqueued by the theme — no @import here.
   Header height: the sticky day headers read --gtfb-header-h, which
   programme.js measures from the real header and writes on <html>.
   ============================================================================ */

/* --- Tokens ---------------------------------------------------------------- */
.gtfb-prog,
.gtfb-prod {
  /* grounds */
  --gtfb-ink: #161513;
  --gtfb-bg: #f6f4ef;
  --gtfb-white: #ffffff;
  --gtfb-sand: #ece8e0;
  --gtfb-black: #0f0e0d;
  --gtfb-blue: #0041fa;

  /* accents */
  --gtfb-accent: #a84a2a;      /* labels/links on light grounds */
  --gtfb-accent-alt: #93a0f4;  /* same role on dark grounds */

  /* type colours */
  --gtfb-text-secondary: #5f5a52;
  /* The handoff says #7a746a. That is 4.21:1 on the off-white ground and every
     rule that uses it is 12px — normal-size text under WCAG 1.4.3, which wants
     4.5:1. One step darker: 5.02:1, and indistinguishable at that size. */
  --gtfb-text-tertiary: #6e685e;
  --gtfb-text-alt: #3a3732;
  --gtfb-text-sand: #2c2a26;
  --gtfb-ondark-secondary: #c9c3b8;
  --gtfb-ondark-body: #dcd6cb;

  /* lines & hovers */
  --gtfb-divider: #d9d4ca;
  --gtfb-divider-dark: #3d3a35;
  --gtfb-row-hover: #f6f4ef;
  --gtfb-row-hover-dark: #1f1e1b;

  /* image placeholders (prototype only — real photos replace these) */
  --gtfb-ph-light-a: #e6e1d7;
  --gtfb-ph-light-b: #ddd7cb;
  --gtfb-ph-dark-a: #2a2825;
  --gtfb-ph-dark-b: #23211f;
  --gtfb-ph-sand-a: #dcd6ca;
  --gtfb-ph-sand-b: #d3ccbf;

  /* type & metrics */
  --gtfb-font: 'Montserrat', Helvetica, Arial, sans-serif;
  --gtfb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gtfb-maxw: 1440px;
  --gtfb-pad: clamp(20px, 5vw, 64px);       /* never below the 20px gutter */
  --gtfb-section-y: clamp(56px, 8vw, 112px); /* programme sections */
  --gtfb-section-y-detail: clamp(56px, 7vw, 96px);
  --gtfb-pill: 999px;
  --gtfb-ease: .3s ease;

  /* per-section overridables */
  --gtfb-link-hover: var(--gtfb-accent);
  --gtfb-focus: var(--gtfb-accent);

  font-family: var(--gtfb-font);

  /* No weight here on purpose. Body copy inherits the site's own, which is
     what it looked like before and what it goes back to. A 300 was tried and
     read too thin. Headings, eyebrows and buttons each state their own weight
     below. */

  color: var(--gtfb-ink);
  background: var(--gtfb-bg);
  -webkit-font-smoothing: antialiased;
}

.gtfb-prog *,
.gtfb-prog *::before,
.gtfb-prog *::after,
.gtfb-prod *,
.gtfb-prod *::before,
.gtfb-prod *::after {
  box-sizing: border-box;
}

.gtfb-prog a,
.gtfb-prod a {
  color: inherit;             /* dark sections inherit their own ink */
  text-decoration: none;
  transition: color var(--gtfb-ease), background-color var(--gtfb-ease), border-color var(--gtfb-ease);
}

.gtfb-prog a:hover,
.gtfb-prod a:hover {
  color: var(--gtfb-link-hover);
}

.gtfb-prog img,
.gtfb-prod img {
  max-width: 100%;
}

/* One focus ring for everything interactive; sections that sit on dark or blue
   grounds re-point --gtfb-focus so the ring stays visible. */
.gtfb-prog :focus-visible,
.gtfb-prod :focus-visible {
  outline: 2px solid var(--gtfb-focus);
  outline-offset: 3px;
}

/* --- Shared width shell ---------------------------------------------------- */
.gtfb-prog__shell,
.gtfb-prod__shell {
  max-width: var(--gtfb-maxw);
  margin-inline: auto;
  padding-inline: var(--gtfb-pad);
}

/* Prototype placeholder caption — delete once real photos are in. */
.gtfb-prog__ph,
.gtfb-prod__ph {
  font-family: var(--gtfb-font-mono);
  font-size: 11px;
  color: var(--gtfb-ondark-secondary);
  background: var(--gtfb-ink);
  padding: 4px 8px;
}

/* ============================================================================
   PROGRAMME PAGE
   ============================================================================ */

/* --- 1. Intro (warm off-white) -------------------------------------------- */
.gtfb-prog__intro {
  --gtfb-prog-title-size: clamp(40px, 5.3vw, 76px);
  max-width: var(--gtfb-maxw);
  margin-inline: auto;
  /* The same above and below: 90px on a desktop, 65px on a laptop or
     tablet, 30px on a phone (the breakpoints are below the rule). */
  padding: 90px var(--gtfb-pad);
  display: grid;
  gap: 28px;
}

@media (max-width: 1279px) {
  .gtfb-prog__intro {
    padding-block: 65px;
  }
}

@media (max-width: 767px) {
  .gtfb-prog__intro {
    padding-block: 30px;
  }
}

.gtfb-prog__eyebrow {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gtfb-text-secondary);
}

.gtfb-prog__title {
  margin: 0;
  font-family: var(--gtfb-font);
  font-weight: 800;
  /* 76px on desktop, 40px on a phone. The floor keeps it a title on a
     phone; overflow-wrap below keeps it inside the screen at the floor. */
  font-size: var(--gtfb-prog-title-size);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  /* `anywhere`, not `break-word`: only `anywhere` is counted when the browser
     works out the element's min-content width. With `break-word` the word
     «Programme» at the 64px floor measured 389px and dragged the whole intro
     grid past the width of a phone — 89px of sideways scroll at 320px, which
     is a 400% zoom on a laptop and a WCAG 1.4.10 failure. */
  overflow-wrap: anywhere;
}

.gtfb-prog__lede {
  margin: 0;
  max-width: 720px;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--gtfb-text-alt);
  text-wrap: pretty;
}

.gtfb-prog__lede-group {
  display: grid;
  gap: 0;
}

/* Divi pads every <p> with 1em underneath, which is what still stood between
   the lede and its note. */
.gtfb-prog__lede-group > .gtfb-prog__lede {
  padding-bottom: 0;
}

/* The practical line under the lede: smaller and lighter, so it reads as a
   note rather than as a second lede. */
.gtfb-prog__lede-note {
  margin: 0;
  max-width: 720px;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--gtfb-text-secondary);
  text-wrap: pretty;
}

.gtfb-prog__info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  padding-top: 8px;
  font-size: 15px;
  color: var(--gtfb-text-alt);
}

.gtfb-prog__info-item {
  display: grid;
  gap: 2px;
}

.gtfb-prog__info-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gtfb-text-tertiary);
}

/* --- 1b. Ticket pre-sale notice: a ticket stub, top right of the intro -- */
.gtfb-prog__notice {
  --gtfb-notice-pad: clamp(24px, 2.6vw, 36px);
  position: relative;
  display: grid;
  align-content: start;
  padding: var(--gtfb-notice-pad) var(--gtfb-notice-pad) calc(var(--gtfb-notice-pad) - 4px);
  background: var(--gtfb-blue);
  color: var(--gtfb-white);
  /* The dates below are sized to the card's own width. */
  container-type: inline-size;
}

.gtfb-prog__notice > * {
  margin: 0;
  padding: 0;
}

/* Top line: what it is on the left, the stub's serial on the right. */
.gtfb-prog__notice-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}

.gtfb-prog__notice-head p {
  margin: 0;
  padding: 0;
}

.gtfb-prog__notice-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gtfb-prog__notice-stub {
  font-family: var(--gtfb-font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.gtfb-prog__notice-title {
  display: grid;
  gap: 10px;
  padding: 26px 0 0;
  font-family: var(--gtfb-font);
  color: inherit;
}

/* The festival's dates, on one line. "20.–22. NOV" fills a wide screen's
   card and is wider than a small phone's at the same size, so the days and
   the month each take the smaller of their size and a share of the card's
   width (cqi), in the same proportion — 22 to 9, as 88px to 36px. */
.gtfb-prog__notice-date {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-weight: 700;
  line-height: 0.85;
}

.gtfb-prog__notice-day {
  font-size: min(clamp(64px, 6vw, 88px), 22cqi);
  letter-spacing: -0.02em;
}

.gtfb-prog__notice-month {
  font-size: min(clamp(28px, 2.4vw, 36px), 9cqi);
  text-transform: uppercase;
}

.gtfb-prog__notice-label {
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 600;
  line-height: 1.3;
}

/* The perforation: a dashed line from notch to notch, the notches being two
   circles of the page's own colour biting into the card's edges. */
.gtfb-prog__notice-tear {
  position: relative;
  margin: 26px calc(14px - var(--gtfb-notice-pad)) 22px;
  border-top: 2px dashed rgba(255, 255, 255, 0.9);
}

.gtfb-prog__notice-tear::before,
.gtfb-prog__notice-tear::after {
  content: "";
  position: absolute;
  top: -15px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gtfb-bg);
}

.gtfb-prog__notice-tear::before { left: -28px; }
.gtfb-prog__notice-tear::after  { right: -28px; }

.gtfb-prog__notice-text {
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

.gtfb-prog__notice-action {
  margin-top: 16px;
}

/* The way to the tickets: one filled button across the card, white on the
   blue. The pointer turns it inside out. Scoped to the card, to outweigh
   `.gtfb-prog a`, which hands every link its parent's colour. */
.gtfb-prog__notice .gtfb-prog__notice-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--gtfb-pill);
  background: var(--gtfb-white);
  color: var(--gtfb-blue);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--gtfb-ease), color var(--gtfb-ease);
}

.gtfb-prog__notice .gtfb-prog__notice-cta:hover,
.gtfb-prog__notice .gtfb-prog__notice-cta:focus-visible {
  background: transparent;
  color: var(--gtfb-white);
}

.gtfb-prog__notice a:focus-visible {
  outline: 2px solid var(--gtfb-white);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .gtfb-prog__notice .gtfb-prog__notice-cta {
    height: 48px;
  }
}

/* Wide screens: the ticket takes a column of its own on the right, and the
   two sides are centred on each other. An empty 1fr row above and below the
   text gives whichever side is shorter somewhere to sit in the middle. */
@media (min-width: 981px) {
  .gtfb-prog__intro:has(> .gtfb-prog__notice) {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
    grid-template-rows: 1fr repeat(4, auto) 1fr;
    column-gap: clamp(32px, 4vw, 64px);
  }

  .gtfb-prog__intro:has(> .gtfb-prog__notice) > * {
    grid-column: 1;
  }

  /* Placed by name rather than by order, so a missing eyebrow leaves its
     row empty instead of shifting everything up into the spacer. */
  .gtfb-prog__intro:has(> .gtfb-prog__notice) > .gtfb-prog__eyebrow   { grid-row: 2; }
  .gtfb-prog__intro:has(> .gtfb-prog__notice) > .gtfb-prog__title     { grid-row: 3; }
  .gtfb-prog__intro:has(> .gtfb-prog__notice) > .gtfb-prog__lede-group { grid-row: 4; }
  .gtfb-prog__intro:has(> .gtfb-prog__notice) > .gtfb-prog__info      { grid-row: 5; }

  .gtfb-prog__intro > .gtfb-prog__notice {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
  }
}

/* --- 2. Τα έργα (black) ---------------------------------------------------- */
.gtfb-prog__plays {
  background: var(--gtfb-ink);
  color: var(--gtfb-bg);
  --gtfb-link-hover: var(--gtfb-accent-alt);
  --gtfb-focus: var(--gtfb-accent-alt);
}

.gtfb-prog__plays-inner {
  max-width: var(--gtfb-maxw);
  margin-inline: auto;
  padding: var(--gtfb-section-y) var(--gtfb-pad);
}

.gtfb-prog__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid var(--gtfb-bg);
  padding-top: 20px;
  margin-bottom: 40px;
}

.gtfb-prog__h2 {
  margin: 0;
  font-family: var(--gtfb-font);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 52px);
}

.gtfb-prog__count {
  font-size: 14px;
  color: var(--gtfb-ondark-secondary);
}

/* 2a. Card grid (default layout) */
.gtfb-prog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 48px 24px;
}

.gtfb-prog__card {
  position: relative;               /* anchor for the stretched card link */
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--gtfb-bg);
  transition: transform var(--gtfb-ease);
}

.gtfb-prog__card:hover {
  transform: translateY(-4px);
}

.gtfb-prog__card-media {
  /* Square only while the frame is empty. A poster keeps its own ratio. */
  aspect-ratio: 1 / 1;
  max-width: 100%;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--gtfb-ph-dark-a) 0 10px, var(--gtfb-ph-dark-b) 10px 20px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
}

.gtfb-prog__card-media img {
  width: 100%;
  height: auto;
  display: block;
}

.gtfb-prog__card-body {
  display: grid;
  gap: 6px;
}

.gtfb-prog__card-date {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gtfb-accent-alt);
}

.gtfb-prog__card-title {
  font-family: var(--gtfb-font);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* The card title carries the only link; its ::after covers the whole card so
   the card stays one tab stop and no anchor is nested inside another. */
.gtfb-prog__card-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.gtfb-prog__card-author {
  font-size: 15px;
  color: var(--gtfb-ondark-secondary);
}

.gtfb-prog__card:has(.gtfb-prog__card-link:focus-visible) {
  outline: 2px solid var(--gtfb-focus);
  outline-offset: 6px;
}

/* Ticket link — same type on both grounds, colour comes from the section. */
.gtfb-prog__tickets {
  position: relative;               /* lifts it above the card/row overlay */
  z-index: 1;
  justify-self: start;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.gtfb-prog__card .gtfb-prog__tickets {
  margin-bottom: 6px;
}

.gtfb-prog__event .gtfb-prog__tickets {
  margin-top: 6px;
}

/* 2b. List layout (.gtfb-prog__plays--list) */
.gtfb-prog__list {
  display: grid;
}

.gtfb-prog__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--gtfb-divider-dark);
  color: var(--gtfb-bg);
  transition: background-color var(--gtfb-ease);
}

.gtfb-prog__row:hover {
  background: var(--gtfb-row-hover-dark);
}

.gtfb-prog__row-media {
  aspect-ratio: 4 / 3;
  max-width: 100%;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--gtfb-ph-dark-a) 0 10px, var(--gtfb-ph-dark-b) 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gtfb-prog__row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gtfb-prog__row-media .gtfb-prog__ph {
  font-size: 10px;
  padding: 3px 6px;
}

.gtfb-prog__row-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.gtfb-prog__row-title {
  font-family: var(--gtfb-font);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  overflow-wrap: break-word;
}

.gtfb-prog__row-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.gtfb-prog__row:has(.gtfb-prog__row-link:focus-visible) {
  outline: 2px solid var(--gtfb-focus);
  outline-offset: -2px;
}

.gtfb-prog__row-mark {
  font-size: 28px;
  padding-right: 8px;
}

/* --- 3. Schedule (white) --------------------------------------------------- */
.gtfb-prog__schedule {
  background: var(--gtfb-white);
  color: var(--gtfb-ink);
}

.gtfb-prog__schedule-inner {
  max-width: var(--gtfb-maxw);
  margin-inline: auto;
  padding: var(--gtfb-section-y) var(--gtfb-pad);
}

.gtfb-prog__schedule-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid var(--gtfb-ink);
  padding-top: 20px;
  margin-bottom: 40px;
}

/* Optional day tabs */
.gtfb-prog__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gtfb-prog__tab {
  font: inherit;
  font-size: 14px;
  padding: 10px 18px;
  border: 1px solid var(--gtfb-ink);
  border-radius: var(--gtfb-pill);
  background: transparent;
  color: var(--gtfb-ink);
  cursor: pointer;
  transition: background-color var(--gtfb-ease), color var(--gtfb-ease);
}

.gtfb-prog__tab--active,
.gtfb-prog__tab[aria-selected='true'] {
  background: var(--gtfb-ink);
  color: var(--gtfb-white);
}

.gtfb-prog__days {
  display: grid;
  gap: 72px;
}

.gtfb-prog__day {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px 64px;
  align-items: start;
}

/* Sticky day header. The white ground has to reach the section edges, so the
   block is pulled out by exactly the page padding and puts it back inside.
   `--gtfb-header-h` is measured from the real header by programme.js and set
   on the root; the fallbacks below are what a visitor sees for the one frame
   before that, and all this page ever gets with scripting off. They are the
   measured heights of this site's Theme Builder header, not the design's
   assumed 80px. */
.gtfb-prog__day-head {
  position: sticky;
  top: var(--gtfb-header-h, 102px);
  z-index: 5;
  display: grid;
  gap: 8px;
  background: var(--gtfb-white);
  margin-inline: calc(-1 * var(--gtfb-pad));
  padding: 16px var(--gtfb-pad);
}

.gtfb-prog__day-name {
  font-family: var(--gtfb-font);
  font-weight: 800;
  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 1;
  text-transform: uppercase;
}

.gtfb-prog__day-date {
  font-size: 18px;
  color: var(--gtfb-text-secondary);
}

.gtfb-prog__day-venue {
  font-size: 14px;
  color: var(--gtfb-text-secondary);
  margin-top: 8px;
  max-width: 260px;
}

.gtfb-prog__events {
  display: grid;
  grid-column: span 2;
  min-width: 0;
}

/* Event row / accordion */
.gtfb-prog__event {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 32px;
  gap: 4px 20px;
  padding: 20px 16px;
  border-top: 1px solid var(--gtfb-divider);
  transition: background-color var(--gtfb-ease);
}

/* Hover ground only where there is something to click — a static row that
   lights up reads as a false affordance. */
.gtfb-prog__event--play:hover,
.gtfb-prog__event--expandable:hover {
  background: var(--gtfb-row-hover);
}

.gtfb-prog__event-time {
  font-family: var(--gtfb-font);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
}

.gtfb-prog__event-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.gtfb-prog__event-kicker {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gtfb-accent);
}

.gtfb-prog__event-title {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 500;
  overflow-wrap: break-word;
}

.gtfb-prog__event--play .gtfb-prog__event-title {
  font-family: var(--gtfb-font);
  font-size: 30px;
  line-height: 1.1;
}

.gtfb-prog__event-sub {
  font-size: 14px;
  color: var(--gtfb-text-secondary);
}

.gtfb-prog__event--play .gtfb-prog__event-sub {
  font-size: 15px;
}

/* Accordion trigger: a real button, stripped, whose ::after makes the whole
   row clickable while keeping one tab stop per row. */
.gtfb-prog__event-trigger {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.gtfb-prog__event-trigger::after {
  content: '';
  position: absolute;
  inset: 0;
}

.gtfb-prog__event-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.gtfb-prog__event-panel {
  position: relative;               /* above the row overlay, so text selects */
  z-index: 1;
  margin: 10px 0 4px;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gtfb-text-alt);
  text-wrap: pretty;
}

.gtfb-prog__event-mark {
  font-size: 22px;
  line-height: 1.3;
  text-align: right;
  color: var(--gtfb-accent);
}

.gtfb-prog__event:has(.gtfb-prog__event-trigger:focus-visible),
.gtfb-prog__event:has(.gtfb-prog__event-link:focus-visible) {
  outline: 2px solid var(--gtfb-focus);
  outline-offset: -2px;
}

/* ============================================================================
   SINGLE PRODUCTION PAGE (play detail)
   ============================================================================ */

.gtfb-prod__back-wrap {
  max-width: var(--gtfb-maxw);
  margin-inline: auto;
  padding: 28px var(--gtfb-pad) 0;
}

.gtfb-prod__back {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Hero ----------------------------------------------------------------- */
.gtfb-prod__hero {
  max-width: var(--gtfb-maxw);
  margin-inline: auto;
  padding: 40px var(--gtfb-pad) var(--gtfb-section-y-detail);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}

.gtfb-prod__hero-media {
  /* Empty frame only: a square with 20px corners, like the team photos.
     A poster drops both — see the :has(img) rule below. */
  aspect-ratio: 1 / 1;
  max-width: 100%;
  max-height: 760px;
  border-radius: 20px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--gtfb-ph-light-a) 0 12px, var(--gtfb-ph-light-b) 12px 24px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 28px;
}

.gtfb-prod__hero-media img {
  width: 100%;
  height: auto;
  display: block;
}

.gtfb-prod__hero-media .gtfb-prod__ph {
  font-size: 12px;
  color: #6b655b;
  background: var(--gtfb-bg);
  padding: 5px 10px;
}

.gtfb-prod__hero-body {
  display: grid;
  gap: 28px;
}

.gtfb-prod__eyebrow {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gtfb-accent);
}

.gtfb-prod__title {
  margin: 0;
  font-family: var(--gtfb-font);
  font-weight: 800;
  /* 48px from a 1300px screen up, ~37px on a tablet, 30px on a phone. */
  font-size: clamp(30px, calc(2vw + 22px), 48px);
  line-height: 0.95;
  /* Greek capitals lose their accents only because the page says lang="el";
     the browser does that, the title is stored as written. */
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;   /* see .gtfb-prog__title */
}

.gtfb-prod__author {
  font-size: clamp(20px, 2vw, 26px);
  color: var(--gtfb-text-alt);
}

.gtfb-prod__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  border-top: 1px solid var(--gtfb-ink);
  padding-top: 20px;
}

.gtfb-prod__meta-item {
  display: grid;
  gap: 4px;
}

.gtfb-prod__meta-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gtfb-text-tertiary);
}

.gtfb-prod__meta-value {
  font-size: 17px;
}

.gtfb-prod__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.gtfb-prod__cta {
  background: var(--gtfb-accent);
  color: var(--gtfb-white);
  padding: 18px 36px;
  border-radius: var(--gtfb-pill);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.gtfb-prod__cta:hover,
.gtfb-prod__cta:focus-visible {
  background: var(--gtfb-ink);
  color: var(--gtfb-white);
}

.gtfb-prod__cta-note {
  font-size: 14px;
  color: var(--gtfb-text-secondary);
}

/* --- Two-column section shell (synopsis, accessibility, author, credits, talk) */
.gtfb-prod__section-inner {
  max-width: var(--gtfb-maxw);
  margin-inline: auto;
  padding: var(--gtfb-section-y-detail) var(--gtfb-pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 32px 80px;
}

.gtfb-prod__h2 {
  margin: 0;
  font-family: var(--gtfb-font);
  font-weight: 800;
  font-size: 36px;
  text-transform: uppercase;
}

.gtfb-prod__body {
  display: grid;
  grid-column: span 2;
  max-width: 760px;
}

/* --- Σύνοψη --------------------------------------------------------------- */
.gtfb-prod__synopsis {
  border-top: 1px solid var(--gtfb-divider);
}

.gtfb-prod__synopsis .gtfb-prod__body {
  gap: 40px;
}

.gtfb-prod__synopsis-text {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.65;
  text-wrap: pretty;
}

.gtfb-prod__note {
  display: grid;
  gap: 12px;
  padding-left: 28px;
  border-left: 1px solid var(--gtfb-ink);
}

.gtfb-prod__note-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gtfb-text-tertiary);
}

.gtfb-prod__note-quote {
  margin: 0;
  font-family: var(--gtfb-font);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.5;
  text-wrap: pretty;
}

.gtfb-prod__note-sign {
  font-size: 14px;
  color: var(--gtfb-text-secondary);
}

/* --- Προσβασιμότητα (festival blue) --------------------------------------- */
.gtfb-prod__access {
  background: var(--gtfb-blue);
  color: var(--gtfb-white);
  --gtfb-focus: var(--gtfb-white);
  --gtfb-link-hover: var(--gtfb-white);
}

.gtfb-prod__access .gtfb-prod__section-inner {
  padding-block: clamp(40px, 5vw, 64px);
  gap: 24px 80px;
}

.gtfb-prod__access .gtfb-prod__h2 {
  color: var(--gtfb-white);
}

.gtfb-prod__access .gtfb-prod__body {
  gap: 12px;
}

.gtfb-prod__access-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--gtfb-white);
  font-size: 16px;
  line-height: 1.55;
  color: var(--gtfb-white);
}

.gtfb-prod__access-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gtfb-white);
  flex: none;
  margin-top: 7px;
}

/* --- Ο συγγραφέας (sand) -------------------------------------------------- */
.gtfb-prod__author-sec {
  background: var(--gtfb-sand);
}

.gtfb-prod__author-aside {
  display: grid;
  gap: 24px;
  align-content: start;
}

.gtfb-prod__portrait {
  width: 180px;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--gtfb-ph-sand-a) 0 8px, var(--gtfb-ph-sand-b) 8px 16px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gtfb-prod__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gtfb-prod__portrait .gtfb-prod__ph {
  font-size: 10px;
  color: #6b655b;
  background: var(--gtfb-sand);
  padding: 3px 6px;
}

.gtfb-prod__author-sec .gtfb-prod__body {
  gap: 20px;
}

.gtfb-prod__author-name {
  font-family: var(--gtfb-font);
  font-weight: 600;
  font-size: clamp(28px, 2.6vw, 28px);
}

.gtfb-prod__bio-para {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--gtfb-text-sand);
  text-wrap: pretty;
}

/* --- Συντελεστές ---------------------------------------------------------- */
.gtfb-prod__credits .gtfb-prod__body {
  gap: 48px;
  max-width: none;            /* credit tables use the full right column */
}

.gtfb-prod__credits-group {
  display: grid;
  gap: 4px;
}

.gtfb-prod__credits-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gtfb-accent);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gtfb-ink);
}

.gtfb-prod__credits-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 4px 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gtfb-divider);
  font-size: 16px;
}

.gtfb-prod__credits-role {
  color: var(--gtfb-text-secondary);
}

/* --- Συζήτηση με το κοινό (black) ----------------------------------------- */
.gtfb-prod__talk {
  background: var(--gtfb-ink);
  color: var(--gtfb-bg);
  --gtfb-link-hover: var(--gtfb-accent-alt);
  --gtfb-focus: var(--gtfb-accent-alt);
}

.gtfb-prod__talk-aside {
  display: grid;
  gap: 12px;
  align-content: start;
}

.gtfb-prod__talk-eyebrow {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gtfb-accent-alt);
}

.gtfb-prod__talk .gtfb-prod__body {
  gap: 16px;
}

.gtfb-prod__talk-title {
  font-size: 20px;
  line-height: 1.4;
}

.gtfb-prod__talk-mod {
  font-size: 14px;
  color: var(--gtfb-ondark-secondary);
}

.gtfb-prod__talk-desc {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--gtfb-ondark-body);
  text-wrap: pretty;
}

/* --- Μοιραστείτε το ------------------------------------------------------- */
.gtfb-prod__share {
  border-bottom: 1px solid var(--gtfb-divider);
}

.gtfb-prod__share-inner {
  max-width: var(--gtfb-maxw);
  margin-inline: auto;
  padding: 48px var(--gtfb-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.gtfb-prod__share-label {
  font-family: var(--gtfb-font);
  font-weight: 500;
  font-size: 28px;
}

.gtfb-prod__share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gtfb-prod__share-btn {
  /* Links and the copy button alike: one line height, label centred. The row
     stretches every button to the tallest one, and a label that is not
     centred stays at the top of the stretched box. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  padding: 12px 22px;
  border: 1px solid var(--gtfb-ink);
  border-radius: var(--gtfb-pill);
  background: transparent;
  color: var(--gtfb-ink);
  cursor: pointer;
  transition: background-color var(--gtfb-ease), color var(--gtfb-ease);
}

.gtfb-prod__share-btn:hover {
  background: var(--gtfb-ink);
  color: var(--gtfb-bg);
}

/* --- Prev / next ---------------------------------------------------------- */
.gtfb-prod__nav-inner {
  max-width: var(--gtfb-maxw);
  margin-inline: auto;
  padding: 40px var(--gtfb-pad) 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.gtfb-prod__nav-link {
  display: grid;
  gap: 6px;
}

.gtfb-prod__nav-link--next {
  text-align: right;
  justify-items: end;
}

.gtfb-prod__nav-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gtfb-text-tertiary);
}

.gtfb-prod__nav-title {
  font-family: var(--gtfb-font);
  font-weight: 500;
  font-size: 30px;
  overflow-wrap: break-word;
}

.gtfb-prod__nav-date {
  font-size: 14px;
  color: var(--gtfb-text-secondary);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* Below this width the auto-fit grids resolve to a single track, and a child
   with `grid-column: span 2` would then invent an implicit second column and
   push the page sideways. Pin those children to one column instead. */
/* No-script fallbacks: the measured heights of this site's header at each
   width. programme.js overrides them inline with what is actually pinned. */
@media (max-width: 980px) {
  .gtfb-prog {
    --gtfb-header-h: 86px;
  }
}

@media (max-width: 600px) {
  .gtfb-prog {
    --gtfb-header-h: 66px;
  }
}

@media (max-width: 760px) {
  .gtfb-prog__day {
    grid-template-columns: minmax(0, 1fr);
  }

  .gtfb-prog__events {
    grid-column: 1;
  }

  .gtfb-prod__section-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .gtfb-prod__body {
    grid-column: 1;
    max-width: 760px;
  }
}

/* Narrow phones: the 72px time column starves the title, so the time moves
   above it and the row gives its side padding back to the text. */
@media (max-width: 520px) {
  .gtfb-prog__event {
    grid-template-columns: minmax(0, 1fr) 32px;
    padding-inline: 0;
  }

  .gtfb-prog__event-time {
    grid-column: 1 / -1;
  }

  .gtfb-prog__days {
    gap: 48px;
  }

  .gtfb-prog__day-head {
    padding-block: 12px;
  }

  .gtfb-prod__nav-link--next {
    text-align: left;
    justify-items: start;
  }

  .gtfb-prod__note {
    padding-left: 20px;
  }
}

/* ============================================================================
   MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .gtfb-prog *,
  .gtfb-prog *::before,
  .gtfb-prog *::after,
  .gtfb-prod *,
  .gtfb-prod *::before,
  .gtfb-prod *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .gtfb-prog__card:hover {
    transform: none;
  }
}

/* ============================================================================
   ACCORDION WITHOUT JAVASCRIPT
   ----------------------------------------------------------------------------
   The expandable schedule rows are <details>/<summary>, not a button and a
   script. Native means they open with the keyboard, screen readers announce
   them as disclosures, the browser's own find-in-page opens them to reach the
   text inside — and a schedule of twenty-four rows still works with scripting
   off, which is the whole point of putting a programme on the web.

   The +/− follows [open] through a sibling selector, so even the mark needs no
   script.
   ============================================================================ */
details.gtfb-prog__event-body {
  display: block;              /* not grid: the gap lives on the summary */
}

.gtfb-prog__event-trigger {
  list-style: none;            /* Firefox's triangle */
}

.gtfb-prog__event-trigger::-webkit-details-marker {
  display: none;               /* Safari's */
}

.gtfb-prog__event-mark--toggle::before {
  content: '+';
}

.gtfb-prog__event-body[open] ~ .gtfb-prog__event-mark--toggle::before {
  content: '\2212';            /* a real minus sign, not a hyphen */
}

/* A photo fills its frame, so the striped placeholder must not show through
   the transparent edges of a PNG, and the caption is only for empty frames. */
.gtfb-prog__card-media:has(img),
.gtfb-prog__row-media:has(img),
.gtfb-prod__hero-media:has(img),
.gtfb-prod__portrait:has(img) {
  background: none;
  padding: 0;
}

/* The covers are portrait (the exports are 860×1209, white margin included).
   The 1/1 above is only the empty placeholder. With a photo set, the frame
   follows the file, so the festival mark and the title are not cropped.
   On the play page the column is wide enough to make that poster ~900px
   tall, so the width is capped and the image scales with it. No radius:
   the mark sits in the top-left corner of the file. */
.gtfb-prog__card-media:has(img) {
  aspect-ratio: auto;
  display: block;
}

.gtfb-prod__hero-media:has(img) {
  aspect-ratio: auto;
  display: block;
  max-height: none;
  max-width: min(100%, 420px);
  border-radius: 0;
  justify-self: start;
}

/* With the poster capped at 420px, two equal columns left half the hero's
   width to a 420px image and an empty strip beside it. On a desktop the
   poster's column is the poster's width and the title takes the rest. Below
   981px the auto-fit columns are already about 420px or stacked, and stay. */
@media (min-width: 981px) {
  .gtfb-prod__hero:has(.gtfb-prod__hero-media img) {
    grid-template-columns: min(100%, 420px) minmax(0, 1fr);
  }
}

/* Copy-link button: it swaps its own label, so it must not resize the row.
   15em clears the longest of the six strings — «Αντιγραφή συνδέσμου» is the
   widest, and at 13em the Greek button shrank by 25px on copy, which is the
   jump this rule exists to prevent. */
.gtfb-prod__share-btn[data-copy] {
  min-width: 15em;
}

/* Visible to a screen reader, not to the eye. Divi ships no such class and
   WordPress core does not add one, so it is defined here rather than assumed.
   Clip-path with a 1px box is the form that survives being inside a grid or a
   flex row, which `position:absolute;left:-9999px` does not. */
.gtfb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   MARKUP THE STYLES ABOVE ASSUME, MADE EXPLICIT
   ----------------------------------------------------------------------------
   The design is a prototype of <div>s and <span>s. The templates use the
   element that says what each thing is — a list for the accessibility items, a
   figure and a blockquote for the director's note, headings where the page has
   headings — which brings the theme's own margins with it. Those are reset
   here, inside the two scopes, rather than by flattening the markup back to
   divs.
   ============================================================================ */
/* `:where()` on BOTH halves, so the whole selector weighs nothing. At its
   natural weight — one class and one element — this reset sat at the end of
   the file and beat four of the rules above it: the director's note lost its
   28px indent, the accessibility boxes their padding, the share row its
   spacing. Zero specificity means every BEM rule in this file wins, which is
   what a reset is for. */
:where(.gtfb-prog, .gtfb-prod) :where(h1, h2, h3, h4, p, figure, blockquote, ul) {
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------------------------------------
   ANSWERING DIVI, AT THE RIGHT WEIGHT

   Divi styles bare elements site-wide from its generated stylesheet:
   `h1,h2,…{color:#333}`, and `blockquote{margin:20px 0 30px;border-left:5px
   solid;padding-left:20px}` with `border-color:#2ea3f2`. Those are element
   selectors — (0,0,1).

   The reset above is `:where()`, which is (0,0,0) on purpose, so that it
   cannot outrank the design rules in this file. That also means it cannot
   outrank Divi. Two different jobs, and only one of them can be done at zero
   weight — a lesson this file learned twice: the headings in the black
   sections went back to dark-on-dark and the blue blockquote rule reappeared
   the moment the reset was demoted.

   So Divi is answered HERE instead, by class. One class is (0,1,0): enough to
   beat a bare element, and still below the two-class rules that colour a
   heading inside a particular section, which have to keep winning.
   ---------------------------------------------------------------------------- */
.gtfb-prog__title,
.gtfb-prog__h2,
.gtfb-prog__day-name,
.gtfb-prog__card-title,
.gtfb-prod__title,
.gtfb-prod__h2,
.gtfb-prod__credits-label,
.gtfb-prod__share-label {
  margin: 0;
  padding: 0;
  color: inherit;   /* each section already says what its children should be */
}

.gtfb-prod__access-list {
  list-style: none;
}

/* The director's note is a <figure> carrying the design's 1px rule and its
   28px indent. The <blockquote> inside it is text and nothing else, so Divi's
   own 5px blue border, its 20px padding and its margins are cleared: one rule
   is drawn, not two, and the quote lines up with the label above it. */
.gtfb-prod__note-quote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* Both wysiwyg fields arrive as <p>…</p>, so the type is set on the container
   and the paragraphs only carry their rhythm. */
.gtfb-prod__synopsis-text > p + p,
.gtfb-prod__bio > p + p {
  margin-top: 1em;
}

.gtfb-prod__bio > p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--gtfb-text-sand);
  text-wrap: pretty;
}

/* ----------------------------------------------------------------------------
   Two links that are drawn as filled buttons.

   `.gtfb-prod a` and `.gtfb-prod a:hover` are one class and one element, so
   they outrank the single class of `.gtfb-prod__cta` and repaint the label:
   at rest with the section's own ink, dark on the button, and on hover with
   the section's link colour — terracotta on terracotta, which is invisible.
   The button's own colour has to win, so it is restated at matching weight.
   ---------------------------------------------------------------------------- */
.gtfb-prod a.gtfb-prod__cta,
.gtfb-prod a.gtfb-prod__cta:hover,
.gtfb-prod a.gtfb-prod__cta:focus-visible {
  color: var(--gtfb-white);
}

.gtfb-prod a.gtfb-prod__share-btn:hover {
  color: var(--gtfb-bg);
}

.gtfb-prod__share-btn[disabled] {
  opacity: .55;
  cursor: default;
}