/* ═══════════════════════════════════════════════════════════════
   TUSCANY EVENT PAGES — Tuscany, Hotels, Full itinerary
   Rebuilt to match the live pages at bluehorizonconferencing.com.
   Sizes, colours and spacing were measured from those pages at 1200px
   and 1440px wide. Loaded only on these three pages, in place of the
   main stylesheet (see bhc_is_tuscany_page() in functions.php).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --tsc-ink:    #413f3e;
  --tsc-brown:  #5e5247;
  --tsc-olive:  #a4a58e;
  --tsc-orange: #e85741;
  --tsc-red:    #be4530;
  --tsc-cream:  #fcfbf9;
  --tsc-sage:   #8a9f86;
  --tsc-stone:  #f0f0e9;
  --tsc-stone2: #edeee6;
  --tsc-blush:  #fbf7f5;
  --tsc-black:  #111111;

  /* ivymode comes from the business's Adobe Fonts kit, which only serves
     domains registered on that kit. Georgia stands in wherever it does
     not load, such as this local copy. */
  --tsc-serif: "ivymode", Georgia, "Times New Roman", serif;
  --tsc-sans:  "Mulish", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* The live site's fluid sizes. Each reaches its 1440px value at 1440
     and passes through the measured value at 1200. */
  --tsc-f-sm:   14px;
  --tsc-f-md:   clamp(16px, 1.1vw + 4.5px, 18px);     /* 17.7 @1200, 18 @1440 */
  --tsc-f-lg:   clamp(18px, 1.5vw + 3px, 22px);       /* 21 @1200, 22 @1440 */
  --tsc-f-xl:   clamp(20px, 1.9vw + 4px, 28px);       /* 26.9 @1200, 28 @1440 */
  --tsc-f-btn:  clamp(18px, 0.6vw + 19.4px, 28px);    /* 26.6 @1200 */
  --tsc-f-hero: clamp(20px, 2vw + 4.8px, 30.4px);     /* 28.9 @1200 */
  --tsc-f-date: clamp(15px, 0.35vw + 15px, 20px);     /* 19.2 @1200 */
  --tsc-f-tile: clamp(26px, 1vw + 27.3px, 41.6px);    /* 39.3 @1200 */
  --tsc-f-h3:   clamp(28px, 2.6vw + 10.3px, 44px);    /* 41.5 @1200 */
  --tsc-f-h2:   clamp(38px, 3.3vw + 20.4px, 64px);    /* 60 @1200, 64 @1440 */
}

/* ── Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body.tsc {
  margin: 0;
  background: #fff;
  color: var(--tsc-ink);
  font-family: var(--tsc-sans);
  font-size: var(--tsc-f-md);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.1px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Wrapped in :where() so these resets carry no weight at all. As plain
   ".tsc p" and ".tsc a" they outranked every single-class rule below:
   margins on intro text and date lines collapsed, and both button
   labels took the body colour instead of orange and white. */
:where(.tsc) img { display: block; max-width: 100%; height: auto; }
:where(.tsc) :where(h1, h2, h3, h4, p, figure, blockquote) { margin: 0; }
:where(.tsc) :where(h1, h2, h3, h4) { font-weight: inherit; }
:where(.tsc) a { color: inherit; }

.tsc-h2 {
  font-family: var(--tsc-serif);
  font-size: var(--tsc-f-h2);
  font-weight: 300;
  line-height: 1.125;
  color: var(--tsc-brown);
  text-align: center;
}
.tsc-h2--ink   { color: var(--tsc-ink); }
.tsc-h2--light { color: #fff; }
.tsc-h2--caps  { text-transform: uppercase; }

.tsc-eyebrow,
.tsc-dates {
  font-family: var(--tsc-serif);
  font-weight: 600;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--tsc-olive);
  line-height: 1.125;
  text-align: center;
}
.tsc-eyebrow { font-size: var(--tsc-f-md); max-width: 645px; margin: 0 auto; }
.tsc-dates   { font-size: var(--tsc-f-date); margin: 10px auto 0; padding: 10px 0; }

/* ── Overlay menu ──────────────────────────────────────────────── */
.tsc-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  height: 95px;
  padding: 0 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-bar .tsc-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .tsc-nav { top: 46px; } }

.tsc-nav-logo img { width: 120px; height: auto; }
.tsc-nav-links { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.tsc-nav-links a {
  display: block;
  padding: 4px 16px;
  border-radius: 90px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: var(--tsc-f-md);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.tsc-nav-links a:hover { background: rgba(255, 255, 255, 0.25); }

/* ── Parallax ──────────────────────────────────────────────────── */
/* The image is pinned to the window and the section is a window onto it.
   clip-path on the clip layer trims the pinned image to the section's box;
   overflow: hidden cannot clip a fixed element, clip-path can. The browser
   scrolls the page and the image never moves, so nothing can lag behind the
   scroll.

   Two earlier versions moved the image at half the scroll speed, as the
   live pages' jarallax does: first from JavaScript, then as a scroll-driven
   CSS animation. Both read as jerky behind "La dolce vita begins in
   Tuscany". The trade is that the image now holds still instead of
   drifting. Phones and reduced motion get a plain image (below). */
.tsc-parallax { position: relative; }
.tsc-parallax-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0);
  z-index: 0;
}
.tsc-parallax-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  max-width: none;
  object-fit: cover;
  will-change: transform;
}

/* ── Scroll-in animations ──────────────────────────────────────── */
/* Matching the live pages' Blocks Animation plugin: each marked element is
   hidden until its top reaches 95% of the way down the window, then plays
   its effect once over 1s. Effects and delays per element were read from
   the live pages. Hidden only under .tsc-js, which the header sets inline,
   so nothing stays invisible if scripts do not run. */
@keyframes tsc-fadeIn     { from { opacity: 0; } to { opacity: 1; } }
@keyframes tsc-fadeInUp   { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes tsc-fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }

.tsc-js [data-tsc-anim] { visibility: hidden; }
.tsc-js [data-tsc-anim].tsc-in {
  visibility: visible;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: var(--tsc-delay, 0s);
}
.tsc-js [data-tsc-anim="fadeIn"].tsc-in     { animation-name: tsc-fadeIn; }
.tsc-js [data-tsc-anim="fadeInUp"].tsc-in   { animation-name: tsc-fadeInUp; }
.tsc-js [data-tsc-anim="fadeInDown"].tsc-in { animation-name: tsc-fadeInDown; }

/* ── Banner ────────────────────────────────────────────────────── */
.tsc-hero {
  min-height: 823px;
  padding: 160px 30px 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
}
.tsc-hero-kicker {
  position: relative;
  z-index: 1;
  max-width: 645px;
  text-align: center;
  text-transform: uppercase;
  font-size: var(--tsc-f-hero);
  font-weight: 300;
  line-height: 1.4;
}

/* ── Tuscany: intro, video, course director ────────────────────── */
.tsc-intro { margin-top: 70px; padding: 0 50px; text-align: center; }
.tsc-intro .tsc-h2 { margin-top: 20px; }
.tsc-intro-text {
  max-width: 610px;
  margin: 48px auto 0;
  font-size: var(--tsc-f-lg);
  line-height: 1.4;
  color: var(--tsc-olive);
}

.tsc-video { max-width: 1360px; margin: 70px auto 0; padding: 0 10px; }
.tsc-embed { position: relative; aspect-ratio: 16 / 9; }
.tsc-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.tsc-director {
  /* Wider than the live page's 1200px, on request, so "Under the Tuscan
     sun" sits on one line. The photo column takes only the photo's own
     width and the text column gets the rest: 674px at 1440 wide, where
     the heading needs 579px. It stays on one line down to about 1150px. */
  max-width: 1300px;
  margin: 84px auto 0;
  padding: 0 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 50px;
  align-items: center;
}
.tsc-director .tsc-h2 { text-align: left; }
.tsc-director-text p {
  max-width: 560px;
  margin-top: 20px;
  font-size: var(--tsc-f-lg);
  line-height: 1.8;
}
.tsc-director-figure { justify-self: center; text-align: center; }
.tsc-director-figure figcaption { margin-top: 8px; font-size: var(--tsc-f-md); color: rgb(59, 27, 8); }
.tsc-director-figure figcaption span { color: rgba(59, 27, 8, 0.39); }

/* ── Buttons ───────────────────────────────────────────────────── */
.tsc-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 0 50px; }
.tsc-buttons--director  { margin: 120px 0 250px; }
.tsc-buttons--itinerary { margin: 70px 0 250px; }

.tsc-btn {
  display: inline-block;
  padding: 16px 50px;
  border: 0;
  border-radius: 9999px;
  background: var(--tsc-orange);
  color: #fff;
  font-family: var(--tsc-sans);
  font-size: var(--tsc-f-btn);
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
  transition: filter 0.2s ease;
}
.tsc-btn:hover { filter: brightness(0.94); }
.tsc-btn--outline {
  padding: 15px 50px;
  border: 1px solid var(--tsc-orange);
  background: transparent;
  color: var(--tsc-orange);
}

/* ── Tiles over the landscape ──────────────────────────────────── */
.tsc-dolce {
  padding: 20px 30px clamp(240px, 30vw, 430px);
  color: #fff;
}
.tsc-tiles {
  position: relative;
  z-index: 1;
  margin-top: -64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.tsc-tile { aspect-ratio: 1; border-radius: 24px; overflow: hidden; }
.tsc-tile--img img { width: 100%; height: 100%; object-fit: cover; }
.tsc-tile--text {
  background: var(--tsc-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}
.tsc-tile--text h2 {
  font-family: var(--tsc-serif);
  font-size: var(--tsc-f-tile);
  font-weight: 700;
  line-height: 1.125;
  text-transform: uppercase;
  color: var(--tsc-olive);
}
.tsc-tile--text p { margin-top: 10px; color: var(--tsc-ink); }
.tsc-dolce-title {
  position: relative;
  z-index: 1;
  margin-top: clamp(260px, 33.5vw, 480px);
  font-family: var(--tsc-serif);
  font-size: var(--tsc-f-h3);
  font-weight: 300;
  line-height: 1.125;
  text-align: center;
}

/* ── Testimonials ──────────────────────────────────────────────── */
.tsc-quotes { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 70px; }
.tsc-quote {
  min-height: 396px;
  padding: 84px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #d79d60;
  color: #fff;
  text-align: center;
}
.tsc-quote--dark { background: #ca8b4a; }
.tsc-quote p { font-size: var(--tsc-f-xl); line-height: 1.4; }
.tsc-quote cite { display: block; margin-top: 16px; font-size: var(--tsc-f-sm); font-style: normal; }

/* ── Headings between sections ─────────────────────────────────── */
.tsc-heading { padding: 0 50px; text-align: center; }
.tsc-heading--pricing { margin-top: 120px; }
.tsc-heading-text {
  max-width: 645px;
  margin: 20px auto 0;
  font-size: var(--tsc-f-md);
  line-height: 1.4;
  color: var(--tsc-olive);
}

/* ── Tuscany: itinerary summary ────────────────────────────────── */
.tsc-days {
  max-width: 1187px;
  margin: 70px auto 0;
  padding: 0 50px;
  display: grid;
  gap: 24px;
}
/* 168px is the live rows' height: 120px of content box plus 24px
   padding top and bottom, with the text centred in it. */
.tsc-day { display: grid; grid-template-columns: 272fr 815fr; min-height: 168px; }
.tsc-day-date {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 24px 0 0 24px;
  background: var(--tsc-sage);
  color: #fff;
  font-size: var(--tsc-f-lg);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
.tsc-day-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 34px;
  border-radius: 0 24px 24px 0;
  background: var(--tsc-stone);
}
/* The live text sits in a 645px column centred in the cream panel. */
.tsc-day-body p { width: 100%; max-width: 645px; margin-left: auto; margin-right: auto; }
.tsc-day-title { font-size: var(--tsc-f-xl); font-weight: 600; line-height: 1.4; }
.tsc-day-body p + p { margin-top: 10px; }

/* ── Tuscany: curated experiences ──────────────────────────────── */
.tsc-curated {
  margin-top: 120px;
  padding: 120px 30px;
  background-size: cover;
  background-position: center;
  text-align: center;
}
.tsc-curated-intro {
  max-width: 700px;
  margin: 30px auto 0;
  color: #fff;
  font-size: var(--tsc-f-lg);
  line-height: 1.8;
}
.tsc-cards {
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 410px));
  justify-content: center;
  gap: 20px;
  text-align: left;
}
.tsc-card { border-radius: 24px; overflow: hidden; background: #fff; }
.tsc-card img { width: 100%; height: 273px; object-fit: cover; }
.tsc-card-body { padding: 30px 30px 40px; }
.tsc-card h4 { font-size: var(--tsc-f-btn); font-weight: 400; line-height: 1.125; color: var(--tsc-ink); }
.tsc-card p {
  margin-top: 20px;
  font-size: var(--tsc-f-lg);
  line-height: 1.6;
  color: rgba(64, 62, 61, 0.6);
}

/* ── Tuscany: gallery ──────────────────────────────────────────── */
.tsc-gallery {
  max-width: 1440px;
  margin: 120px auto 0;
  padding: 0 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tsc-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.tsc-gallery-wide { aspect-ratio: 3 / 2; }
.tsc-gallery-tall { aspect-ratio: 2 / 3; }

/* ── Tuscany: pricing ──────────────────────────────────────────── */
.tsc-packages {
  max-width: 1060px;
  margin: 70px auto;
  padding: 0 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* 36px: the live card's 24px padding plus a 12px inner margin. */
.tsc-package { padding: 36px; border-radius: 24px; background: var(--tsc-stone2); }
.tsc-package-name {
  font-family: var(--tsc-serif);
  font-size: var(--tsc-f-md);
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.4;
}
.tsc-package-price {
  margin-top: 20px;
  font-family: var(--tsc-serif);
  font-size: var(--tsc-f-xl);
  font-weight: 800;
  line-height: 1.4;
  color: var(--tsc-orange);
}
.tsc-package-text { margin-top: 20px; font-weight: 500; line-height: 1.8; }

/* ── Register ──────────────────────────────────────────────────── */
.tsc-register {
  padding: 120px 50px;
  background: var(--tsc-red);
  color: #fff;
  text-align: center;
}
.tsc-register .tsc-h2 { color: #fff; }
.tsc-register-intro {
  max-width: 645px;
  margin: 20px auto 0;
  font-size: var(--tsc-f-lg);
  line-height: 1.8;
}
.tsc-register-intro a { text-decoration: none; }
.tsc-register-form { max-width: 645px; margin: 20px auto 0; }
.tsc-register-form iframe { display: block; }

/* ── Tuscany: terms ────────────────────────────────────────────── */
.tsc-terms {
  max-width: 745px;
  margin: 0 auto;
  padding: 50px;
  font-size: var(--tsc-f-sm);
  line-height: 1.4;
  color: var(--tsc-olive);
}
.tsc-terms-head { margin-top: 24px; font-size: var(--tsc-f-md); font-weight: 400; color: var(--tsc-black); }
.tsc-terms-head:first-child { margin-top: 0; }
.tsc-terms-head + p { margin-top: 6px; }
.tsc-terms p + p:not(.tsc-terms-head) { margin-top: 6px; }
.tsc-terms ul { margin: 10px 0 0; padding-left: 40px; color: var(--tsc-black); }

/* ── Hotels ────────────────────────────────────────────────────── */
.tsc-hotel { padding-bottom: 120px; }
.tsc-hotel--tint { background: var(--tsc-blush); }
.tsc-hotel-head { padding: 84px 50px; text-align: center; }
.tsc-hotel-note {
  margin-top: 10px;
  font-family: var(--tsc-serif);
  font-size: var(--tsc-f-md);
  font-weight: 400;
  color: var(--tsc-brown);
}
.tsc-hotel-intro {
  max-width: 645px;
  margin: 30px auto 0;
  font-size: var(--tsc-f-xl);
  line-height: 1.8;
}

.tsc-rows {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 50px;
  display: grid;
  row-gap: 50px;
}
.tsc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 120px;
  align-items: center;
}
.tsc-row--media-left .tsc-row-media { order: -1; }
.tsc-row-text p { font-size: var(--tsc-f-xl); line-height: 1.8; }
.tsc-row-text p + p { margin-top: 20px; }
.tsc-row-media img { width: 100%; }

/* ── Full itinerary ────────────────────────────────────────────── */
.tsc-hero + .tsc-stage-head { margin-top: 50px; }
.tsc-stage-head { padding: 84px 50px; text-align: center; }
.tsc-stage {
  max-width: 1200px;
  margin: 0 auto 120px;
  padding: 0 50px;
  display: grid;
  gap: 50px;
}
.tsc-plan {
  display: grid;
  grid-template-columns: 623fr 428fr;
  column-gap: 49px;
  min-height: 240px;
  border-radius: 25px;
  overflow: hidden;
  background: var(--tsc-stone);
}
.tsc-plan-text { align-self: center; padding: 30px 0 30px 45px; }
.tsc-plan-day {
  font-family: var(--tsc-sans);
  font-size: var(--tsc-f-xl);
  font-weight: 700;
  line-height: 1.125;
  color: var(--tsc-ink);
}
.tsc-plan-title { margin-top: 6px; font-weight: 700; color: var(--tsc-black); }
.tsc-plan-text ul { margin: 20px 0 0; padding-left: 20px; color: var(--tsc-black); }
/* The text sets the card's height and the photo is cropped to fill it,
   so every card has the same space around its text. */
.tsc-plan-media { position: relative; }
.tsc-plan-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tsc-notes {
  margin-bottom: 120px;
  padding: 0 30px 84px;
  font-size: var(--tsc-f-xl);
  line-height: 1.4;
  text-align: center;
}
.tsc-notes strong { font-weight: 700; }
.tsc-notes-small { font-size: var(--tsc-f-lg); }

/* ── Phones and small tablets ──────────────────────────────────── */
@media (max-width: 781px) {
  .tsc-nav { height: auto; padding: 16px 20px; flex-wrap: wrap; gap: 12px; }
  .tsc-nav-logo img { width: 96px; }
  .tsc-nav-links { gap: 8px; }
  .tsc-nav-links a { padding: 4px 12px; font-size: 14px; }

  .tsc-hero { min-height: auto; aspect-ratio: 780 / 1288; padding-top: 130px; }
  /* A plain image on phones. The portrait banner is exactly the banner's
     shape and its title runs almost edge to edge, so pinning it to the
     window would crop the words. */
  .tsc-parallax-img { position: absolute; height: 100%; }

  .tsc-intro, .tsc-heading, .tsc-hotel-head, .tsc-stage-head { padding-left: 20px; padding-right: 20px; }
  .tsc-director, .tsc-rows, .tsc-days, .tsc-stage, .tsc-packages, .tsc-gallery { padding-left: 20px; padding-right: 20px; }

  .tsc-director { grid-template-columns: 1fr; row-gap: 40px; }
  .tsc-director .tsc-h2 { text-align: center; }
  .tsc-director-text p { max-width: none; }

  .tsc-buttons--director  { margin: 60px 0 140px; }
  .tsc-buttons--itinerary { margin: 50px 0 120px; }
  .tsc-btn { padding: 12px 32px; }
  .tsc-btn--outline { padding: 11px 32px; }

  .tsc-dolce { padding-left: 16px; padding-right: 16px; }
  .tsc-tiles { grid-template-columns: repeat(2, 1fr); }

  .tsc-quotes { grid-template-columns: 1fr; }
  .tsc-quote { min-height: 0; padding: 60px 30px; }

  .tsc-day { grid-template-columns: 1fr; }
  .tsc-day-date { border-radius: 24px 24px 0 0; }
  .tsc-day-body { border-radius: 0 0 24px 24px; }

  .tsc-cards { grid-template-columns: minmax(0, 410px); }
  .tsc-gallery { grid-template-columns: 1fr; }
  .tsc-packages { grid-template-columns: 1fr; }

  .tsc-register { padding: 80px 20px; }

  .tsc-row { grid-template-columns: 1fr; row-gap: 24px; }
  .tsc-row--media-left .tsc-row-media { order: 0; }

  .tsc-plan { grid-template-columns: 1fr; }
  .tsc-plan-text { padding: 30px 24px 24px; }
  .tsc-plan-media img { position: static; height: auto; aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .tsc-parallax-img { position: absolute; height: 100%; }
  .tsc-js [data-tsc-anim] { visibility: visible; animation: none !important; }
}

/* Visually hidden, still read by search engines and screen readers: the
   banner's heading is part of its image. */
.tsc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}