/*
 * Masterclass page (template-parts/page-fsalone.php) — the page's own rules.
 *
 * Loaded in the <head> for that template only (functions.php
 * mwf_enqueue_event_assets), after custom-css/mwf.css (the .mwfe design system
 * whose tokens every colour here uses) and after the wh-exhibitors plugin's
 * exhibitors.css (the feed's masterclass and wine-row markup). Until 2026-09-08
 * these rules were an inline <style> block at the end of the template.
 */
/* 2026-09-08 (admins, via the owner): the page joins the .mwfe design
   system — the deep-plum wave ground, cream text, gold headings and brass
   hairlines of /winehunter-area/. The layout, the day buttons and the slot
   behaviour are unchanged; every colour below is a design-system token
   (custom-css/mwf.css, `.mwfe`), so the page follows the identity if the
   tokens move. The template wraps the page in <main class="mwfe
   mwfe--masterclass">, which brings the ground, the serif and the grain. */
.mwfe--masterclass { padding-bottom: clamp(2rem, 6vh, 4rem); }
/* the hero's general text; the "programme being updated" status leads it while the feed is empty */
.mwfe--masterclass .mwfe-hero-lead { max-width: 62ch; }
.mwfe--masterclass .mc-hero-status { color: var(--mwfe-gold-light); }
.mwfe--masterclass .mc-hero-status strong { color: var(--mwfe-brass); text-transform: uppercase; letter-spacing: .06em; font-size: .9em; }

.programma{
  --ink: var(--mwfe-cream);
  --muted: var(--mwfe-cream-dim);
  --accent: var(--mwfe-brass);
  --gold: #a87c0b;                 /* the selected day (owner, 2026-09-06) */
  --line: var(--mwfe-line);
  --glass: var(--mwfe-glass);
  --gap:28px;
  --radius:18px;
  --container-w:min(71.875rem, 92vw); /* was 1150px: rem, so it follows the root scale above 1920px (2026-09-12) */
  color:var(--ink);
  font-size: 1rem;
  line-height: 1.5;
}
.programma *{box-sizing:border-box;font-family: var(--mwfe-serif);}

.programma .wrap{
  width:var(--container-w);
  margin:0 auto;
  padding:0 0 80px;
}

.programma .masthead {
		text-align: center;
		font-size: 2.5rem;
		font-weight: 600;
		color: var(--mwfe-gold-light);
		text-transform: uppercase;
		letter-spacing: 2px;
		border: 1px solid var(--mwfe-brass);
		border-radius: 50px;
		background: var(--glass);
		backdrop-filter: blur(4px);
		width: max-content;
		padding: 15px 50px;
		margin: 35px auto;
	}

.programma .day-selector {
  display: grid;
  /* auto-fit, NOT repeat(2, 1fr): the days come from the feed and are
     published incrementally, so this has to look right at 1, 3 and 5
     buttons as well as the old fixed 4. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.programma .day-btn {
  padding: 30px;
  /* A glass panel on the wave ground; the selected day is told apart by
     the gold fill below (owner, 2026-09-06). */
  background: var(--glass);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 2rem;                 /* was 32px */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  line-height: 1.2;
  backdrop-filter: blur(4px);
}

.programma .day-btn span {
  display: block;
  font-family: var(--mwfe-sans);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 8px;
  color: var(--muted);
}

.programma .day-btn:hover {
  transform: translateY(-2px);
  border-color: var(--mwfe-brass);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.programma .day-btn.active {
  border-color: var(--mwfe-gold-light);
  background: var(--gold);
  color: var(--mwfe-bg-deep);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.programma .day-btn.active span { color: var(--mwfe-bg-deep); }

	.programma .content-area {
		position: relative;
		margin-bottom: 30px;
	}

	.programma p{
		margin: 10px 0;
	}

	.programma ul{
		list-style-position: inside;
	}

	.programma strong {
		color: var(--mwfe-gold-light);
	}

.programma .default-content {
  display: none;
  padding: 40px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--muted);
  backdrop-filter: blur(4px);
}

.programma .default-content.active {
  display: block;
}

.programma .default-content p {
  margin: 0 0 15px 0;
  line-height: 1.7;
}

/* The "programme is being updated" panel: this is the whole page until the
   first masterclass is published, so it carries the weight the day cards
   normally would. */
.programma .default-content .mc-status {
  margin: 0 0 14px 0;
  font-size: clamp(26px, 4.5vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mwfe-gold-light);
}

.programma .default-content .mc-status-note {
  margin: 0 0 22px 0;
  font-size: 1.2rem;               /* was 19px */
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}

/* The presenter (2026-09-06): the default view whenever no day is
   selected — what the masterclasses are, then where the proceeds go. */
.programma .mc-presenter-wrap {
  margin-top: -30px;
}
.programma .mc-presenter .mc-pick {
  font-weight: 700;
  color: var(--mwfe-brass);
}
.programma .mc-charity {
  margin: 28px 0 8px;
  padding: 24px 28px;
  border-left: 4px solid var(--mwfe-brass);
  border-radius: 0 16px 16px 0;
  background: rgba(205, 173, 89, 0.08);
}
.programma .mc-charity__kicker {
  margin: 0 0 4px;
  font-family: var(--mwfe-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--mwfe-brass);
}
.programma .mc-charity__name {
  margin: 0 0 12px;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--mwfe-gold-light);
}
.programma .mc-charity__projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px 28px;
  margin: 16px 0 4px;
  padding: 0;
  list-style: none;
}
.programma .mc-charity__projects li {
  position: relative;
  padding-left: 18px;
  line-height: 1.55;
}
.programma .mc-charity__projects li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mwfe-brass);
}
.programma .mc-charity__note {
  margin: 12px 0 0;
  font-style: italic;
  color: var(--muted);
}
@media (max-width: 770px) {
  .programma .mc-presenter {
    padding: 24px;
  }
  .programma .mc-charity {
    padding: 18px 20px;
  }
}

.programma .day-content {
  display: none;
  color: var(--ink);
}

.programma .day-content.active {
  display: block;
}

.programma .dayhead{
  padding: 20px;
  color: var(--mwfe-gold-light);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 20px;
  margin-bottom: 20px;
}

.programma .dayhead h2{
  margin: 0;
  font-size: 1.75rem;              /* was 28px */
  font-weight: 600;
}

.programma .slot{
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.programma .slot .toggle{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 14px;
  text-align: left;
  align-items: center;
  font: inherit;
  cursor: pointer;
}

.programma .time {
  /* The one element in a slot that has to be read at a glance: a brass
     hairline pill with the light gold numerals, tabular so times align. */
  font-family: var(--mwfe-sans);
  font-weight: 700;
  letter-spacing: .04em;
  font-size: .95rem;
  color: var(--mwfe-gold-light);
  font-variant-numeric: tabular-nums;
  background: var(--glass);
  border: 1px solid var(--mwfe-brass);
  text-align: center;
  padding: 12px 16px;
  border-radius: 25px;
	  width: max-content;
}

	.programma .title {
		width: fit-content;
		margin-left: 35px;
	}

.programma .event-name {
  font-size: 1.75rem;              /* was 24px (1.5rem): larger, and rem so 4K scales it (owner, 2026-09-12) */
  font-weight: 600;
  color: var(--mwfe-gold-light);
}

.programma .subtitle{
  font-size: 1.15rem;              /* was 16px (1rem) */
  font-weight: 400;
  color: var(--muted);
}

	.programma .chev {
		font-variant-numeric: tabular-nums;
		color: var(--mwfe-brass);
		font-weight: 900;
		transition: transform .25s ease;
		font-size: 2rem;
	}

.programma .slot.open .chev{
  transform: rotate(90deg);
}

.programma .content{
  max-height: 0;
  overflow: hidden;
  padding: 0 14px;
  transition: max-height .3s ease, opacity .2s ease;
  opacity: .7;
}

.programma .slot.open .content{
  opacity: 1;
  padding: 0 14px 14px;
  margin-bottom: 30px;
}

/* The feed's masterclass detail and its wine rows (plugin markup, styled
   for the cream espositori cards) on the dark ground: the plugin's text
   tokens are re-pointed at the design system's. The tipologia icons are
   white-on-transparent and need nothing. */
.mwfe--masterclass .wh-exhibitors {
  --text-primary: var(--mwfe-cream);
  --text-muted: var(--mwfe-cream-dim);
  --border-subtle: var(--mwfe-line);
  color: var(--mwfe-cream);
}
.mwfe--masterclass .wh-exhibitors .wh-catalogue-row__title,
.mwfe--masterclass .wh-exhibitors .wh-catalogue-row__link { color: var(--mwfe-cream); }
.mwfe--masterclass .wh-exhibitors .wh-catalogue-row__secondary,
.mwfe--masterclass .wh-exhibitors .wh-catalogue-row__producer { color: var(--mwfe-cream-dim); }
.mwfe--masterclass .wh-exhibitors .wh-catalogue-row__link { border-bottom-color: var(--mwfe-brass); }
.mwfe--masterclass .wh-exhibitors .wh-catalogue-row__link:hover,
.mwfe--masterclass .wh-exhibitors .wh-catalogue-row__link::after { color: var(--mwfe-brass); }
.mwfe--masterclass .wh-mc-meta { color: var(--mwfe-cream-dim); }

/* 2026-09-12 (owner): the opened masterclass — speakers, description, the
   "Wines tasted" label and the three text lines of every wine row — steps up
   by the same ratio as the slot type did (≈ ×1.16). Scoped to this page: the
   espositori catalogue keeps the plugin's sizes. Measured before, at 1920:
   content 16px, title 15.2, producer 12, secondary 12.8. */
.mwfe--masterclass .programma .content { font-size: 1.15rem; }                                   /* 16   → 18.4px */
.mwfe--masterclass .wh-exhibitors .wh-catalogue-row__title { font-size: 1.1rem; }                /* 15.2 → 17.6px */
.mwfe--masterclass .wh-exhibitors.wh-mc-wines .wh-catalogue-row__producer { font-size: .875rem; } /* 12   → 14px   */
.mwfe--masterclass .wh-exhibitors .wh-catalogue-row__secondary { font-size: .925rem; }           /* 12.8 → 14.8px */
.mwfe--masterclass .wh-mc-card img {
  border: 1px solid var(--mwfe-line);
  border-radius: 16px;
  box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .75);
}

	.mc-map {
		width: 100%;
		border: 1px solid var(--mwfe-line);
		border-radius: 16px;
	}

	.buy-link,
	.book-now-button {
		color: var(--mwfe-bg-deep);
		background: var(--mwfe-brass);
		width: fit-content;
		border-radius: 50px;
		font-family: var(--mwfe-sans);
		font-size: .8rem;
		font-weight: 700;
		letter-spacing: .18em;
		text-transform: uppercase;
		display: block;
		border: 1px solid var(--mwfe-gold-light);
		position: relative;
		margin: 30px 0 0;
		padding: .8em 1.6em;
		box-shadow: 0 4px 0 #6e5410, 0 5px 10px rgba(0, 0, 0, 0.35);
		transition: all 0.1s ease;
		top: 0;
	}

	.buy-link:hover,
	.book-now-button:hover {
		top: 3px;
		box-shadow: 0 1px 0 #6e5410, 0 2px 5px rgba(0, 0, 0, 0.35);
	}

	.buy-link:active,
	.book-now-button:active {
		top: 4px;
		box-shadow: 0 0 0 #6e5410, 0 1px 3px rgba(0, 0, 0, 0.25);
	}

	.location-info {
		color: var(--mwfe-cream-dim);
		width: 80%;
		margin: 0 auto 1.5rem;
		text-align: center;
		font-style: italic;
		font-size: 1.1rem;               /* was 0.95rem */
	}

	.tba{
		cursor: crosshair;
		display:inline;
	}

@media (max-width: 880px){
  .programma .slot .toggle{
    grid-template-columns: auto 1fr auto;
  }

	  .programma .chev{
		  transform: rotate(90deg);
	  }

	  .programma .slot.open .chev {
		transform: rotate(-90deg);
	}

	.programma .title {
		margin-left: 0;
		text-align: center;
	}

		.buy-link,
		.book-now-button{
			margin: 30px auto 0;
		}
}

@media screen and (max-width: 770px) {
  .programma .masthead{
    /* Mobile overflow fix (2026-09-02): the longest single word in the EN
       masthead ("WineFestival") is unbreakable at ~283px; trim the
       horizontal padding and font a step, cap the box to the viewport. */
    font-size: 1.55rem;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 26px;
    margin: 28px auto;
  }

  .programma .day-selector {
    gap: 15px;
  }

  .programma .day-btn {
    padding: 20px;
    font-size: 1.5rem;             /* was 24px */
  }

  .programma .day-btn span {
    font-size: .75rem;
  }

  .programma .dayhead{
    text-align: center;
  }

  .programma .dayhead h2 {
    font-size: 1.8rem;
  }

  .programma .slot .toggle {
    display: flex;
    flex-direction: column;
  }

  .programma .time {
    width: 100%;
  }
}
