/* Workshops component styles */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Bungee+Shade&display=swap');
:root{
  /* general colors */
  --bg: #000;
  --card-bg: #0f0f0f;
  --text: #fff;
  --muted: #cfcfcf;

  /* Poster defaults */
  --poster-bg: #ffffff;
  --poster-accent: #6b5aa6;
  --poster-price: #8e44ad; /* deep amethyst per user choice */
  --poster-light: #ececec;
  --poster-white: #ffffff;
  --poster-black: #000000;

  --poster-title-color: #000;
  --poster-day-size: 7.5rem;
  --poster-title-size: 2.2rem;
  --poster-title-align: left;
}

/* timeline year decoration */
.past-row.timeline-right::after,
    .past-row.timeline-left::after{
      content: attr(data-year);
      position:absolute;
      /* align with the top of the timeline card (cards are pulled up by -32px) */
      top:32px;
      transform: none;
      /* position a safe distance from the left edge (responsive) */
      left: clamp(1rem, 6vw, 6rem);
      z-index: 0; /* ensure the timeline card (z-index:1) sits above the year */
      pointer-events:none;
      user-select:none;
      line-height:1;
      white-space:nowrap;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1;
      /* Use the vintage display CoreCircus font for the large year */
      font-family: 'CoreCircus', 'Bungee', 'Avenir Next Pro', Arial, Helvetica, sans-serif;
      font-weight: 700;
      /* smaller hero size so it doesn't overwhelm the layout */
      font-size: clamp(1rem, 2.2vw, 1.6rem);
      letter-spacing: -0.06em; /* tighten spacing for display year */
      color: #ffd6a6; /* front fill: pastel orange */
      -webkit-text-stroke: 0px;
      /* layered neon/pastel shadows: purple then orange accents behind the pastel front */
      text-shadow:
        /* subtle dark backbone for contrast (reduced) */
        0 0 0 rgba(12,8,10,0.9),
        0.8px 0.8px 0 rgba(12,8,10,0.85),
        1.6px 1.6px 0 rgba(12,8,10,0.8),
        /* neon purple layer (reduced) */
        2.6px 2.6px 0 #9b59ff,
        4px 4px 0 #9b59ff,
        /* neon orange layer (reduced) */
        5.5px 4.8px 0 #ff7a18,
        7px 6px 0 #ff7a18,
        /* soft depth */
        8px 8px 14px rgba(0,0,0,0.18);
      z-index: 2; /* keep front pastel above other decorations */
    }

/* Instructor hero: full-width orange band and Bebas Neue heading */
#instructor-title {
  background: #f08a24; /* orange band across full width */
  width: 100%;
}

/* Ensure only the page (body) scrolls — prevent nested elements from
   creating their own vertical scrollbar. */
#wrapper, #one-one, #one-one > .inner, #workshopsList, .workshop-list, .workshop-row, #two, #two > .inner {
  overflow: visible !important;
}

#instructor-title > .inner {
  /* let the inner follow its parent full-width rather than being centered */
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0.5rem 1rem; /* tighten vertical band for minimal look */
  box-sizing: border-box;
}

/* Ensure the instructors area has horizontal breathing room so
   individual instructor `section` cards don't touch the viewport
   or the sidebar. Use !important to override earlier global resets. */
#two > .inner {
  padding-left: clamp(1rem, 3vw, 4rem) !important;
  padding-right: clamp(1rem, 3vw, 4rem) !important;
  padding-top: clamp(1rem, 3vw, 4rem) !important;
  box-sizing: border-box;
}

/* Add internal padding to each instructor card so content doesn't
   run flush against the left/right edges. */
#two .features section {
  /* remove top padding so images sit flush with the card top */
  padding: 0 1.25rem 1rem 1.25rem !important;
  box-sizing: border-box;
}

/* Special layout for instructor cards: make the photo a full-width
   rectangular image above the heading and text, and hide the small
   decorative icon so the card reads like a profile. */
#two .features section {
  /* remove top padding so images sit flush with the card top */
  padding: 0 1.25rem 1rem 1.25rem !important;
  width: 100% !important;
  box-sizing: border-box;
}

#two .features section .icon {
  display: none !important; /* remove small circular icon */
}

#two .features section img{
  display: block !important;
  /* make the image span the full card width (bleed past the section padding)
     so it sits flush at the top. Adjust using the section padding (1.25rem). */
  width: calc(100% + 2.5rem) !important;
  margin-left: -1.25rem !important;
  margin-right: -1.25rem !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 2px 2px 0 0 !important; /* only round top corners (minimalistic) */
  margin-bottom: 0.75rem !important;
  box-shadow: none !important;
  border: none !important;
}

/* Remove any inner frame around the image and ensure the card body sits
   directly under the image with no extra gap */
#two .features section {
  background: transparent !important;
}

/* Ensure headings and paragraphs sit below the image and are centered */
#two .features section h3,
#two .features section p{
  margin-left: 0 !important;
  text-align: center;
}

.instructors-title, .instructors-title .h1 {
  font-family: 'Bebas Neue', Arial, sans-serif;
  color: #ffffff;
  font-size: clamp(2.2rem, 5.5vw, 4.8rem);
  text-align: center;
  margin: 0;
  letter-spacing: -0.1em;
  text-transform: uppercase;
  text-shadow: 0 6px 18px rgba(0,0,0,0.12);
}


/* Reduce excessive top spacing for the 'Instructors' area only. This
   is scoped to #instructor-title and #two so other wrappers keep their
   original padding. */
#instructor-title > .inner,
#two > .inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Tighten features section spacing inside the instructors area to
   avoid a large blank band above the cards. */
#two .features {
  margin-top: 0 !important;
}
#two .features section {
  padding-top: 0 !important; /* ensure no extra gap above images */
}

.workshop-list{
    display:flex;
    flex-direction:column;
    gap:0;
  padding:0;
  margin:0 0 2rem 0;
}

.workshop-card{
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  border-radius:0px;
  width:100%;
  margin:0;
}

.workshop-card .panel{
  display:flex;
  flex-direction:column;
}

/* Instructors section title (centered with underline) */
.instructors-title {
  text-align:center;
  font-weight:800;
  text-transform: uppercase;
  font-size:10cqmin;
  margin:0;
  position:relative;
  color: black;
  letter-spacing: 0.05em;
  font-size: 5cqmin;
  font-family: 'Avenir Next Pro', cursive;
}

/* Apply the same display font and outline used for the instructors title
   to the 'Reserve your seat' heading in section #three */
#three h1,
#three .inner h1{
  font-family: 'CoreCircus', 'Bungee', 'Avenir Next Pro', Arial, Helvetica, sans-serif !important;
  text-transform: uppercase;
  -webkit-text-stroke: 1px #000;
  color: #f6d9c2; /* match instructors heading fill */
  letter-spacing: -0.02em;
  line-height:1;
}
.instructors-title::after{
  content:'';
  display:block;
  width:0rem;
  height:3px;
  background:#cda86b;
  margin:0.6rem auto 0;
  border-radius:2px;
  opacity:0.95;
}
/* Instructors section title (centered with Bebas Neue) */
.instructors-title {
  text-align: center;
  font-family: 'CoreCircus', 'Bungee', 'Avenir Next Pro', Arial, Helvetica, sans-serif !important;
  color: #f6d9c2 !important; /* warm cream fill */
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: -0.02em;
  font-size: clamp(2.4rem, 8vw, 7.5rem) !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-stroke: 0.5px #000; /* stronger black outline */
  text-shadow:
    0.8px 0.8px 0 rgba(12,8,10,0.9),
    4px 4px 0 #9b59ff,
    7px 7px 0 #ff7a18,
    10px 10px 20px rgba(0,0,0,0.28);
}
.instructors-title::after{
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  margin: 0.6rem auto 0;
  background: #cda86b;
  border-radius: 2px;
  opacity: 0.95;
}

/* Hide decorative underline beneath instructors title per request */
.instructors-title::after{ display: none !important; }

.workshop-card .left{
  flex:0 0 30%;
  max-width:30%;
  position:relative;
  min-height:300px;
}

.workshop-card .left img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Poster (legacy pure HTML block) */
.poster-card{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  font-family:inherit;
  border-radius:0px;
  overflow:hidden;
  background:var(--poster-bg);
}

.poster-top{
  padding:22px 18px;
  background:var(--poster-bg);
  color:var(--poster-title-color);
  font-weight:700;
  font-size:22px;
  height: 100%;
}



.poster-mid{
  display:flex;
  flex:1;
  min-height:180px;
  background:var(--poster-accent);
  color:var(--poster-title-color);
}

.poster-mid-left{
  color:#fff;
  flex:0 0 58%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:18px;
  position:relative;
}

.poster-mid-left::after{
  content:'';
  position:absolute;
  right:-6px;
  top:6%;
  height:88%;
  width:12px;
  background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
  pointer-events:none;
}

.poster-mid-left .day{
  font-size:var(--poster-day-size);
  font-weight:700;
  line-height:0.9;
}

.poster-mid-left .month{
  font-size:1.05rem;
  margin-top:6px;
}

.poster-mid-left .year{
  font-size:0.95rem;
  margin-top:6px;
  opacity:0.95;
}

.poster-mid-right{
  flex:1;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  color:var(--poster-title-color);
}

.poster-mid-right .venue{
  font-weight:700;
  margin-bottom:8px;
}

.poster-bottom{
  background:var(--poster-price);
  color:#fff;
  padding:16px;
  text-align:center;
  font-weight:700;
  font-size:1.2rem;
  flex-shrink:0;
}

.day-number{
  font-size:var(--poster-day-size);
  font-weight:700;
  line-height:0.9;
}

.day-suffix{
  font-size:calc(var(--poster-day-size) * 0.22);
  transform:translateY(-58%);
  margin-top:-0.6rem;
  opacity:0.95;
}

.venue-small{
  font-size:0.95rem;
  opacity:0.95;
  margin-bottom:0.25rem;
}

.location-wrap{
  width:100%;
  margin-bottom:0.5rem;
}

.location-big{
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:0.5px;
  display:inline-block;
  padding-bottom:0.25rem;
  border-bottom:6px solid rgba(255,255,255,0.18);
}

.time-wrap{
  margin-top:0.5rem;
  color:rgba(255,255,255,0.98);
}

.time-large{
  font-size:1.05rem;
  font-weight:700;
}

.time-small{
  font-size:0.9rem;
  opacity:0.95;
}

.poster-card,
.poster-card *{
  box-sizing:border-box;
}

.workshop-card .right{
  flex:1;
  padding:2rem;
  background:transparent;
}

.workshop-card h2{
  margin:0 0 0.5rem;
  font-size:1.6rem;
  line-height:1.1;
}

.workshop-meta{
  color:var(--muted);
  margin-bottom:1rem;
}

.workshop-summary{
  color:var(--text);
  line-height:1.6;
}

.workshop-actions{
  margin-top:1.25rem;
}

.workshop-actions .button{
  display:inline-block;
  padding:0.75rem 1.25rem;
  border-radius:999px;
  background:#fff;
  color:#000;
  text-decoration:none;
  font-family: 'CoreCircus', 'Bungee', 'Avenir Next Pro', Arial, Helvetica, sans-serif !important;
  text-transform:uppercase;
}

@media (min-width:800px){
  .workshop-card{
    display:flex;
  }

  .workshop-card .left{
    height:auto;
  }

  .workshop-card .right{
    min-width:0;
    padding:2.5rem;
  }
}

#one-one > .inner{
  padding:0;
}

#one-one .workshop-list{
  padding:0;
  margin:0;
}

/* Collapse any leftover vertical space between the workshops area and
   the nested instructor sections. */
#one-one > .inner { padding-bottom: 0 !important; }
#one-one .workshop-list { min-height: 0 !important; }
#one-one > section { margin-top: 0 !important; padding-top: 0 !important; }
#one-one .features { margin-top: 0 !important; }

/* Strong override: force sections and inner containers in the workshops
  area to be flush. Scoped to avoid touching other site sections. */
#workshopsList,
#one-one > .inner,
#one-one .workshop-list,
#instructor-title,
#instructor-title > .inner,
#two,
#two > .inner {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

#instructor-title, #two { display: block !important; }

/* reduce any large top padding added by generic .wrapper > .inner rules */
#instructor-title > .inner h1.instructors-title { margin-top: 0.5rem !important; }

/* The global reset above zeroed out the instructor-title padding; restore
   a comfortable padding so the orange band and heading are visible. */
#instructor-title > .inner {
  padding: 1.5rem 1rem !important;
  box-sizing: border-box;
}

/* Make the instructors heading a bit smaller so it doesn't overpower
   the section on typical desktop viewports. Use a scoped selector and
   !important to override earlier large clamp() values. */
#instructor-title .instructors-title,
#instructor-title > .inner h1.instructors-title {
  font-size: clamp(1.8rem, 4.5vw, 3.2rem) !important;
  letter-spacing: 0.04em !important;
}

@media (max-width:799px){
  .workshop-card{
    display:block;
  }

  .workshop-card .left,
  .workshop-card .right{
    max-width:100%;
    flex:unset;
  }

  .workshop-card .left{
    height:220px;
  }

  .workshop-card .right{
    padding:1rem;
  }
}

.workshop-error{
  padding:1rem;
  border:1px solid #6b6b6b;
  border-radius:4px;
  color:#ffdddd;
  background:#2b0000;
}

/* Compact 'leaf' timeline for Past Workshops */
.past-list{
  position:relative;
  padding:2rem 3rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.past-list{ box-sizing: border-box; max-width: 100%; }
.past-list::before{
  content:'';
  position:absolute;
  left:50%; /* center line */
  top:0.75rem;
  bottom:0.75rem;
  width:4px;
  background:linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
  border-radius:4px;
  transform:translateX(-50%);
  z-index:0;
}
.past-row{
  position:relative;
  display:block;
  padding:32px 0 0 0; /* reserve space so card can be pulled up to meet marker */
}

/* timeline card that sits on either side */
.timeline-card{
  width:calc(50% - 4rem);
  /* glass-style card */
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  border-radius:2px;
  padding:1rem;
  box-shadow:0 12px 30px rgba(6,10,18,0.45);
  border:1px solid rgba(255,255,255,0.06);
  position:relative;
  z-index:1;
}
/* make text inside glass cards bright so it reads over the blurred background */
.timeline-card{
  color: rgba(255,255,255,0.96);
}
.timeline-card .past-article-body{
  color: rgba(255,255,255,0.88);
}
.timeline-card .past-article-title{
  color: #ffffff;
}
.timeline-card a{
  color: rgba(255,255,255,0.95);
}
.past-row.timeline-right .timeline-card{
  /* move left edge so the top-left corner meets the center-line marker */
  margin-left: calc(50% + 32px);
  margin-top: -32px; /* pull up so corner touches marker vertical center */
}
.past-row.timeline-left .timeline-card{
  /* move right edge so the top-right corner meets the center-line marker */
  margin-right: calc(50% + 32px);
  margin-left: 0;
  margin-top: -32px;
}

/* centered circular marker */
.past-row::before{
  /* circular marker showing a FontAwesome star instead of the year */
  content: "\f005";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position:absolute;
  left:50%;
  top:12px;
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--sidebar-bg);
  transform:translateX(-50%);
  box-shadow:0 10px 26px rgba(30,19,36,0.12);
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.6rem;
  line-height:1;
}

/* Large standalone year near the card (subtle background text) */
.past-row.timeline-right::after,
.past-row.timeline-left::after{
  content: attr(data-year);
  position:absolute;
  top:8px;
  z-index:0;
  pointer-events:none;
  user-select:none;
  line-height:1;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  /* Use the vintage display CoreCircus font for the large year */
  font-family: 'CoreCircus', 'Bungee', 'Avenir Next Pro', Arial, Helvetica, sans-serif;
  font-weight: 700;
  /* smaller hero size to keep the year subtle */
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  letter-spacing: -0.06em; /* tighten spacing for display year */
  color: #ffd6a6; /* front fill: pastel orange */
  -webkit-text-stroke: 0px;
  /* layered neon/pastel shadows: purple then orange accents behind the pastel front */
  text-shadow:
    /* subtle dark backbone for contrast (reduced) */
    0 0 0 rgba(12,8,10,0.9),
    0.8px 0.8px 0 rgba(12,8,10,0.85),
    1.6px 1.6px 0 rgba(12,8,10,0.8),
    /* neon purple layer (reduced) */
    2.6px 2.6px 0 #9b59ff,
    4px 4px 0 #9b59ff,
    /* neon orange layer (reduced) */
    5.5px 4.8px 0 #ff7a18,
    7px 6px 0 #ff7a18,
    /* soft depth */
    8px 8px 14px rgba(0,0,0,0.18);
  z-index: 2; /* keep front pastel above other decorations */
}
/* position on the left side for cards on the right */
.past-row.timeline-right::after{
  left:2rem;
}
/* position on the right side for cards on the left */
.past-row.timeline-left::after{
  right:2rem;
}

@media (max-width:900px){
  /* Keep the large year visible on small screens but reduce size/positioning to fit */
  .past-row.timeline-right::after,
  .past-row.timeline-left::after{
    font-size: clamp(0.9rem, 1.6vw, 1.2rem);
    left:12px;
    right:auto;
    top:6px;
    /* smaller offsets on small screens; scaled down for legibility */
    text-shadow:
      0 0 0 rgba(12,8,10,0.9),
      0.6px 0.6px 0 rgba(12,8,10,0.82),
      1.2px 1.2px 0 #9b59ff,
      1.8px 1.8px 0 #ff7a18,
      3px 3px 6px rgba(0,0,0,0.10);
  }
}

.timeline-card-header{
  /* darker semi-opaque header to sit on glass card */
  background: rgba(8,6,10,0.32) !important;
  color: #ffffff;
  padding:0.9rem 1rem;
  border-radius:2px 2px 0 0;
  font-weight:700;
  border-left:6px solid #f08a24; /* thin accent bar */
}
.timeline-card-header .past-article-title{ color: #ffffff !important; margin:0; font-size:1.08rem; letter-spacing:0.6px; text-transform:uppercase; }
.timeline-card-body{
  padding:1rem 0 0 0;
}
.past-article-content{ /* ensure spacing and readable width */
  max-width:54ch;
}
.past-article-title{
  font-size:1.05rem;
  margin-bottom:0.25rem;
  color:#ffffff;
  text-transform: uppercase;
}
.past-article-body{
  color:#2b3942;
  font-size:0.95rem;
}

@media (max-width:900px){
  .past-list{
    padding:1rem 1rem;
  }
  .past-list::before{ left:8px; }
  .past-row::before{ left:8px; top:18px; width:48px; height:48px; font-size:0.95rem; }
  .past-row{ padding:0.6rem 0; }
  .timeline-card{ width:100%; margin:0; }
  .past-row.timeline-left .timeline-card, .past-row.timeline-right .timeline-card{ margin:0; }
  .timeline-card-header{ border-radius:2px; }
}

/* ==== merged content from workshop-section.css BEGIN ==== */

.workshop-row{
  display:flex;
  align-items:stretch;
  margin:0;
  width:100%;
  box-sizing:border-box;
  gap:0;
  min-height: 400px;
}

/* alternating layout removed: posters remain on the left */

/* ===== Alternating poster/description layout =====
   - For wide viewports, alternate the order using nth-child.
   - Poster panels keep a fixed width so they never stretch.
   - Optional: add `poster-pin-viewport` class to the `.workshop-row`
     to pin the poster to the right edge of the viewport (fixed).
*/
@media (min-width:900px){
  :root{ --poster-width: 320px; --poster-height: clamp(320px, 45vh, 520px); --instructor-image-height: clamp(320px, 44vh, 520px); }

  .workshop-row{
    align-items:stretch;
  }

  /* odd: poster left, description right (default) */
  .workshop-row:nth-child(odd){
    flex-direction:row;
  }

  /* even: poster after description — reverse the row so poster sits at the right */
  .workshop-row:nth-child(even){
    flex-direction:row-reverse;
  }

  /* Keep poster column at a fixed width so it never stretches */
  .workshop-row .workshop-row-left{
    flex: 0 0 var(--poster-width);
    max-width: var(--poster-width);
    min-width: 180px;
    box-sizing: border-box;
  }

  /* Let the description stretch to fill remaining space */
  .workshop-row .workshop-row-right{
    flex: 1 1 auto;
    min-width:0; /* allow text truncation/ellipsis if needed */
  }

  /* Ensure poster card doesn't grow — keep image aspect and object-fit */
  .workshop-poster-card{
    flex: 0 0 auto;
    width: 100%;
    height:100%;
    min-height: 220px;
    min-width: 220px;
    box-sizing: border-box;
  }

  .workshop-poster-card img,
  .workshop-card .left img{
    width:100%;
    height:var(--poster-height);
    max-height:var(--poster-height);
    object-fit:cover;
    display:block;
  }

  /* Force instructor/profile photos to a consistent height so cards align */
  #two .features section img{
    width:100% !important;
    height:var(--instructor-image-height) !important;
    max-height:var(--instructor-image-height) !important;
    object-fit:cover !important;
    display:block !important;
  }

  /* Optional: pin the poster to the viewport right edge. Add the
     `poster-pin-viewport` class to a `.workshop-row` to enable.
     This sets the poster fixed to the right and reserves space on
     the description column so content doesn't flow underneath. */
  .workshop-row.poster-pin-viewport .workshop-poster-card{
    position:fixed;
    right:0;
    top:14vh;
    width: var(--poster-width);
    height: auto;
    z-index:1000;
    box-shadow:0 18px 40px rgba(0,0,0,0.35);
  }

  .workshop-row.poster-pin-viewport .workshop-row-right{
    padding-right: calc(var(--poster-width) + 2rem);
  }

}

.workshop-row-left{
  flex:0 0 35%;
  max-width:35%;
  min-width:0;
  display:flex;
}

.workshop-row-right{
  /* Allow the right column to grow to the container edge (no fixed max-width)
     while preserving existing padding and vertical sizing. This ensures the
     description area stretches fully to the right without changing poster height. */
  flex: 1 1 auto;
  max-width: none !important;
  background:#000;
  color:#fff;
  padding:clamp(1.4rem,2vw,2.6rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  box-sizing: border-box;
  font-size: 28px;
}

/* ensure the left and right panels always stretch to the same height and fill their column */
.workshop-row > .workshop-row-left,
.workshop-row > .workshop-row-right{
  display:flex;
  flex-direction:column;
  min-height:0;
}

.workshop-poster-card{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-sizing:border-box;
  background:var(--poster-white);
  border-radius:0px;
  box-shadow:0 10px 24px rgba(0,0,0,0.12);
  container-type:inline-size;
  position:relative;
  min-height:320px;
}

.workshop-poster-card::before{
  content:'';
  position:absolute;
  inset:0;
    border-radius:0px; /* No-op change */
  pointer-events:none;
  box-shadow:inset 0 0 0 6px rgba(0,0,0,0.02);
}

/* Countdown timer styles inside workshop right panel */
.workshop-code{ margin-bottom:1rem; }
.workshop-countdown{ display:flex; align-items:baseline; gap:1rem; }
.workshop-countdown-title{ color:rgba(255,255,255,0.92); font-weight:700; font-size:1.05rem; }
.workshop-countdown-title{ text-transform:uppercase; }
.workshop-countdown-timer{ color:rgba(255,255,255,0.96); background:rgba(255,255,255,0.04); padding:0.35rem 0.6rem; border-radius:6px; font-weight:700; font-variant-numeric:tabular-nums; font-size: 150%;}

/* title block */
.workshop-poster-top{
  flex:0 0 30%;
  background:var(--poster-light);
  padding:1.6cqw 2.2cqw 1cqw 2.2cqw;
  display:flex;
  align-items:center;
  font-size: 36px;
  line-height: 1;
}

.workshop-poster-title{
  margin:0;
  font-weight:600;
  text-transform:uppercase;
  color:var(--poster-black);
  line-height:0.9;
  letter-spacing:-0.02em;
  text-wrap:balance;
  font-size:100%;
  width:100%;
  white-space:normal;
  word-break:break-word;
  display:block;
  text-align: center;
}

/* purple middle */
.workshop-poster-middle{
  position:relative;
  flex:1 1 auto;
  background:var(--poster-accent);
  color:#fff;
}

/* date column */
.workshop-poster-date{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:40%;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  height:100%;
  font-size: 24px;
}

.workshop-poster-start-label{
  font-size:50%;
  text-transform:uppercase;
  line-height:1;
  font-weight:300;
  letter-spacing:-0.01em;
  margin-top:0.2rem;
  margin-bottom: 0.5rem;
  color:rgba(255,255,255,0.98);
}

.workshop-poster-date-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
}

.workshop-poster-day{
  display:flex;
  justify-content:center;
  white-space:nowrap;
  font-size:350%;
  font-weight:900;
  line-height:0.82;
  letter-spacing:-0.15em;
}

.workshop-poster-day-suffix{
  display:inline-block;
  font-size:0.22em;
  font-weight:700;
  line-height:1;
  letter-spacing: normal;
  margin-left:0.52em;
  transform:translateY(0.5em);
  opacity:0.98;
}

.workshop-poster-month{
  display:flex;
  margin-top:0.2em;
  margin-bottom:0.2em;
  font-size:60%;
  font-weight:700;
  line-height:0.92;
}

.workshop-poster-year{
  display:flex;
  margin-top:0.2em;
  margin-bottom: 0.2em;
  font-size:60%;
  font-weight:700;
  line-height:0.92;
}

@media (max-width:900px){
  .workshop-poster-date{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  }
}

/* divider */
.workshop-poster-divider{
  position:absolute;
  left:43%;
  top:10%;
  bottom:10%;
  width:2px;
  background:#4a3e73;
}

/* venue/time */
.workshop-poster-venue-time{
  position:absolute;
  left:calc(45% + 1.5cqw);
  top:0;
  bottom:0;
  width:45%;
  padding:1.25cqw 1.25cqw 1.05cqw;
  display:flex;
  flex-direction:column;
  justify-content:center;
  font-size: 24px;
}

.workshop-poster-venue{
  font-size: 100%;
  text-transform:uppercase;
  line-height:1.02;
  font-weight:600;
  letter-spacing:-0.01em;
  margin-top:0.5rem;
  display:flex;
  color:rgba(255,255,255,0.98);
}

.workshop-poster-location{
   font-size: 50%;
  font-weight:300;
  text-transform:uppercase;
  line-height:0.88;
  margin-bottom:0.2rem;
  margin-top:0.2rem;
  text-wrap:balance;
  display: flex;
}

.workshop-poster-time-line{
  height:0px;
  background:#4a3e73;
}

.workshop-poster-time-start,
.workshop-poster-time-end{
  font-size:50%;
  font-weight:300;
  line-height:0.92;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
  display: flex;
  font-style: italic;
}

.workshop-poster-time-to{
  font-size:0.8em;
  line-height:1;
  margin:0;
  display: flex;
}

/* place start — to — end on a single horizontal row */
.workshop-poster-time-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:0.6cqw;
  margin-top:0.1rem;
}

/* optional image crop */
.workshop-poster-image-wrap{
  display: none !important; /* poster figure removed */
}

.workshop-poster-image{
  display: none !important; /* poster figure removed */
}

/* no reverse-specific mirror rules */

/* price block */
.workshop-poster-price{
  flex:0 0 17%;
  background: var(--poster-price); /* solid color, no gradient */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.5rem 1.6cqw;
}

.workshop-poster-price-text{
  font-weight:900;
  text-transform:uppercase;
  color:#fff;
  font-size:1.8em;
  line-height:1;
  letter-spacing:-0.03em;
}

/* right description */
.workshop-code{
  font-weight:800;
  font-size:clamp(1.1rem,1.7vw,2rem);
  margin-bottom:1rem;
}

.workshop-instructor,
.workshop-date{
  font-size:clamp(.95rem,1.05vw,1.2rem);
  margin-bottom:.9rem;
}

.workshop-summary{
  font-size:clamp(.95rem,1vw,1.15rem);
  line-height:1.6;
  max-width:auto;
}

@media (min-width:2560px){
  .workshop-row-left{
    flex-basis:32%;
    max-width:32%;
  }

  .workshop-row-right{
    max-width:68%;
  }

  /* hide decorative cropped image on small phones to avoid horizontal overflow */
  .workshop-poster-image-wrap,
  .workshop-poster-image{
    display:none;
  }
}

@media (max-width:900px){
  .workshop-row{
    flex-direction:column;
  }

  /* reversed-row behavior removed; small screens already stack via .workshop-row rules */

  .workshop-row-left,
  .workshop-row-right{
    max-width:100%;
    width:100%;
  }

  /* no reverse-specific stacking rules */

  /* Reset absolute image positioning so poster stacks naturally */
  .workshop-poster-image-wrap,
  .workshop-poster-image{
    position: static !important;
    width: auto !important;
    height: auto !important;
    inset: auto !important;
    display: block !important;
  }

  .workshop-poster-card{
    aspect-ratio:auto;
  }

  .workshop-poster-middle{
    min-height:220px;
  }
}


/* ==== merged content from workshop-section.css END ==== */

/* Past Workshops gallery (glass / poptrox look) */
.past-row{
  display:flex;
  gap:0;
  width:100%;
  align-items:stretch;
  margin:2rem 0;
}
.past-row-left{
  flex:0 0 35%;
  max-width:35%;
  padding:1rem;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}
.past-row-right{
  flex:1 1 65%;
  padding:clamp(1rem,2vw,2.2rem);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.past-gallery{
  width:100%;
  display:block;
  background:transparent;
  border-radius:6px;
  padding:0.2rem;
}
.past-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.45rem;
}
.past-photo{
  position:relative;
  overflow:hidden;
  border-radius:4px;
  cursor:pointer;
  background:transparent;
  border:1px solid rgba(255,255,255,0.03);
}
.past-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 180ms ease;
}
.past-photo:hover img{
  transform:scale(1.03);
}
.past-photo::after{ content:''; display:none; }

/* Lightbox overlay */
.past-lightbox{
  position:fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.88);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2147483647;
  padding:1.2rem;
}

.past-lightbox-inner{
  position:relative;
  max-width:980px;
  width:100%;
  max-height:88vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.4rem;
  box-sizing:border-box;
  border-radius:6px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.03);
}

.past-lightbox-img{
  max-width:100%;
  max-height:80vh;
  border-radius:4px;
  display:block;
}

.past-lightbox-close{
  position:absolute;
  right:8px;
  top:8px;
  width:36px;
  height:36px;
  border-radius:6px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.past-lightbox-close i{ font-size:18px; line-height:1; }
.past-lightbox-close:focus{ outline:2px solid rgba(255,255,255,0.08); outline-offset:2px; }

/* Prev/Next nav buttons (minimalist, thin square) */
.past-lightbox-prev,
.past-lightbox-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2147483648;
}
.past-lightbox-prev{ left:10px; }
.past-lightbox-next{ right:10px; }
.past-lightbox-prev i, .past-lightbox-next i{ font-size:18px; }
.past-lightbox-prev:focus, .past-lightbox-next:focus{ outline:2px solid rgba(255,255,255,0.06); outline-offset:2px; }

/* subtle hover */
.past-lightbox-close:hover, .past-lightbox-prev:hover, .past-lightbox-next:hover{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.12);
}

@media (max-width:520px){
  .past-lightbox-inner{ padding:0.25rem; border-radius:6px; }
  .past-lightbox-close{ right:6px; top:6px; width:30px; height:30px; }
  .past-lightbox-img{ max-height:72vh; }
}

@media (max-width:900px){
  .past-row{
    flex-direction:column;
  }

  .past-row-left,
  .past-row-right{
    max-width:100%;
    width:100%;
  }

  .past-grid{
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows: minmax(80px, 1fr);
  }
}

@media (max-width:520px){
  .past-grid{
    grid-template-columns:repeat(2,1fr);
    grid-gap:0.45rem;
  }
}

/* Force all past rows to display cards on the right and year on the left
   — some rows were alternating via JS; this override makes layout uniform. */
.past-row .timeline-card{
  /* make the card occupy ~70% of the horizontal space and sit to the right */
  width: calc(70% - 4rem) !important;
  margin-left: calc(30% + 32px) !important;
  margin-right: 0 !important;
  margin-top: -32px !important;
}
.past-row::after{
  left: 2rem !important;
  right: auto !important;
  /* keep the reduced hero size for the override as well */
  font-size: clamp(2.8rem, 9vw, 6.5rem) !important;
}

/* Hide the circular star marker — prefer the large year and center line only */
.past-row::before{ display:none !important; }

/* Add spacing between the article body and the gallery inside timeline cards */
.timeline-card .past-gallery{ margin-top: 1.25rem; }

/* Snow overlay canvas styling */
#past-workshops .inner{ position:relative; }
#snow-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0; /* behind cards (cards use z-index:1) */
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Defensive: ensure Past Workshops section and inner don't overflow horizontally */
#past-workshops, #past-workshops > .inner, #pastList {
  overflow-x: hidden;
}

/* Remove the large default top padding for the Past Workshops inner container
   so the gradient and snow canvas align with the section top. */
#past-workshops > .inner {
  padding-top: 0 !important;
}

/* Reduce vertical gap for Instructors section (#two) and restore
   horizontal breathing (left/right) which may be reset earlier. Keep
   top padding zero so cards sit flush under the instructor banner. */
#two > .inner {
  padding-top: 0 !important;
  padding-bottom: 1.25rem !important;
  padding-left: clamp(1rem, 3vw, 4rem) !important;
  padding-right: clamp(1rem, 3vw, 4rem) !important;
  box-sizing: border-box;
}


/* Ensure on small screens the year remains visible but doesn't overlap content */
@media (max-width:900px){
  .past-row .timeline-card{ margin-left:0 !important; margin-top:0 !important; }
  .past-row::after{ left:12px !important; right:auto; font-size: clamp(2.2rem, 8vw, 5rem); opacity:0.09; }
}

/* Additional mobile polish: reduce wrapper padding and scale components for narrow screens */
@media (max-width:900px){
  /* globally reduce large wrapper paddings to avoid huge whitespace */
  .wrapper > .inner { padding-left: 1.0rem !important; padding-right: 1.0rem !important; }

  /* Past workshops container tighter */
  #past-workshops > .inner { padding-left: .8rem !important; padding-right: .8rem !important; }

  /* Make instructors heading smaller and remove extra margin */
  .instructors-title { font-size: clamp(1.1rem, 6vw, 1.6rem); margin: 0.6rem 0 0.4rem 0; }

  /* Poster/Workshop row adjustments */
  .workshop-row-right { padding: 1rem !important; }
  .workshop-row-left { padding: 0 !important; }
  .workshop-poster-card { min-height: auto; }

  /* Ensure timeline cards are full width and spacing is compact */
  .timeline-card{ width:100% !important; margin:0 !important; padding:0.9rem !important; }

  /* Smaller gallery tiles and reduced gaps */
  .past-grid{ grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap:6px; }

  /* Reduce large poster day size on phones */
  :root{ --poster-day-size: 5.5rem; }
}

/* For small viewports: show the year above the card and make the glass card full-width */
@media (max-width:900px){
  /* restore a simple large year above each entry (use ::before) */
  .past-row::before{
    display:block !important;
    content: attr(data-year) !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100%;
    text-align: center;
    margin: 0 0 0.6rem 0;
    font-size: clamp(4rem, 12vw, 8rem) !important;
    background: none !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* Use CoreCircus for the display year and apply the same pastel/neon layering
       but with smaller offsets suitable for small screens. */
    font-family: 'CoreCircus', 'Bungee', Arial, Helvetica, sans-serif !important;
    color: #ffd6a6 !important;
    -webkit-text-stroke: 0px !important;
    text-shadow:
      0 0 0 rgba(12,8,10,0.9),
      2px 2px 0 rgba(12,8,10,0.82),
      4px 4px 0 #9b59ff,
      6px 6px 0 #ff7a18,
      8px 8px 12px rgba(0,0,0,0.12);
    letter-spacing: -0.04em !important;
    z-index: 2 !important;
    font-weight:700;
    pointer-events:none;
  }

  /* hide the decorative ::after used on larger layouts */
  .past-row::after{ display:none !important; }

  /* ensure the timeline card takes the full width and sits under the year */
  .past-row .timeline-card{ width:100% !important; margin:0 !important; margin-top:0 !important; }
}

@media (max-width:520px){
  /* Phones: stack more compactly */
  .wrapper > .inner { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }
  .instructors-title { font-size: 1.1rem; margin: 0.5rem 0; }
  .past-grid{ grid-template-columns: repeat(3, 1fr); gap:6px; }
  .timeline-card .past-article-title{ font-size:0.95rem; }
  .timeline-card .past-article-body{ font-size:0.95rem; line-height:1.45; }
  /* hide decorative center line on very small screens */
  .past-list::before{ display:none; }
  /* hide snow/particles on phones (reduces CPU and visual clutter) */
  #snow-canvas, #parallax-particles{ display:none !important; }
}