/* =====================================================================
   Simona Hamer — works built with real Elementor widgets
   Maps the playscript design onto Elementor's widget markup, so every
   part is an ordinary drag-and-drop widget and still looks identical.
   Classes are set per widget via Elementor's "CSS Classes" field.
   ===================================================================== */

/* Elementor's global palette must not bleed into the design. Its default
   "Primary" is a light blue (#6EC1E4) and applies to any heading that has
   no colour of its own — so set the design's own colours explicitly. */
.shw-single .elementor-heading-title{ color: var(--ink); }
.shw-single .elementor-widget-text-editor{ color: var(--ink); }
.shw-single a{ color: inherit; }

/* Elementor wraps each widget; neutralise its spacing so the design's own
   rhythm survives. */
.shw-single .elementor-widget:not(:last-child){ margin-bottom: 0; }
.shw-single .elementor-section.elementor-section-boxed > .elementor-container{ max-width: 1100px; }

/* ---------- scene heading ---------- */
.shwe-slug .elementor-widget-container{
  display: flex; align-items: center; gap: .85rem;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--hair);
}
.shwe-slug .elementor-widget-container p{ margin: 0; }
.shwe-slug a{ color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }
.shwe-slug a:hover{ color: var(--grass-deep); }
.shwe-slug .sep{ color: var(--grass); }
.shwe-slug .spacer{ flex: 1; }
.shwe-slug .year{ color: var(--grass-deep); }

/* ---------- title ---------- */
.shwe-title .elementor-heading-title{
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: -0.04em; line-height: .92;
  font-size: clamp(3rem, 8vw, 6.4rem); margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.shwe-form .elementor-heading-title{
  font-family: var(--font-mono); font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--soft); margin: 1.1rem 0 0;
}
.shwe-award .elementor-heading-title{
  display: inline-block; margin: 1.2rem 0 0;
  font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grass-deep);
}

/* ---------- call to action (Elementor Button widget) ---------- */
.shwe-cta{ margin-top: 1.8rem; }
.shwe-cta .elementor-button{
  position: relative; z-index: 0; overflow: hidden;
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: var(--ink);
  border: 1px solid var(--ink); border-radius: 2px;
  padding: 1.05rem 1.9rem; text-decoration: none;
}
.shwe-cta .elementor-button::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grass);
  transform: translateX(-101%); transition: transform .35s var(--ease);
}
.shwe-cta .elementor-button:hover::before{ transform: translateX(0); }
.shwe-cta .elementor-button-icon{ transition: transform .3s var(--ease); }
.shwe-cta .elementor-button:hover .elementor-button-icon{ transform: translateX(5px); }

/* ---------- cover (Elementor Image widget) ---------- */
.shwe-cover{ position: relative; transform: rotate(-1.4deg); transition: transform .5s var(--ease); }
.shwe-cover .elementor-widget-container{ position: relative; }
.shwe-cover img{
  width: 100%; height: auto; display: block; border-radius: 3px;
  box-shadow: 0 34px 70px -34px rgba(14,15,14,.6);
}
.shwe-cover .elementor-widget-container::before{
  content: ""; position: absolute; inset: -10px;
  border: 1px solid var(--grass); border-radius: 4px;
  transform: rotate(2.2deg); transition: transform .5s var(--ease);
  pointer-events: none;
}
.shwe-cover:hover{ transform: rotate(0deg); }
.shwe-cover:hover .elementor-widget-container::before{ transform: rotate(0deg); }
.shwe-cover.is-placeholder img{ filter: grayscale(1) contrast(1.04); opacity: .92; }

/* ---------- margin rail (Elementor Text widget) ---------- */
.shwe-rail .elementor-widget-container{
  position: sticky; top: calc(var(--nav-h, 70px) + 1.4rem);
  display: flex; flex-direction: column; gap: 1.1rem;
  font-family: var(--font-mono);
}
.shwe-rail .label{
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--grass-deep); padding-bottom: .6rem;
  border-bottom: 1px solid var(--hair); margin: 0;
}
.shwe-rail .item{ display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--ink); margin: 0; }
.shwe-rail .item b{
  font-weight: 400; font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--soft);
}

/* ---------- script body (Elementor Text widget) ---------- */
.shwe-body .elementor-widget-container{ max-width: 60ch; }
.shwe-body p:first-of-type{
  font-family: var(--font-display); font-weight: 420;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.42; letter-spacing: -0.01em;
}
.shwe-body p:first-of-type::first-letter{
  font-family: var(--font-display); font-weight: 600;
  float: left; font-size: 5rem; line-height: .74;
  color: var(--grass); padding: .42rem .55rem 0 0;
}
.shwe-body p{ font-family: var(--font-body); font-size: 1.13rem; line-height: 1.72; color: var(--ink); margin: 0 0 1.3rem; }
.shwe-body strong{ font-weight: 600; }
.shwe-body blockquote{
  margin: 2.2rem 0; padding: 1.4rem 0 1.4rem 1.8rem;
  border-left: 3px solid var(--grass);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
}
.shwe-body blockquote + blockquote{ margin-top: 1.2rem; }

/* the rail/body divider that .shw__page used to draw */
.shwe-page{ border-top: 1px solid var(--hair); padding-top: clamp(2rem, 4vw, 3rem) !important; }

/* ---------- stage cues ---------- */
.shwe-cues{ margin-top: clamp(3.4rem, 7vw, 5.5rem) !important; padding-top: 1.8rem !important; border-top: 1px solid var(--hair); }
.shwe-cue .elementor-heading-title{
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .18em; text-transform: uppercase;
}
.shwe-cue a{
  text-decoration: none; color: var(--soft);
  border: 1px solid var(--hair); border-radius: 100px;
  padding: .7rem 1.3rem; display: inline-block;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.shwe-cue a:hover{ border-color: var(--grass); color: var(--grass-deep); }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .shwe-cover{ max-width: 340px; margin-inline: auto; }
}
@media (max-width: 767px){
  .shwe-title .elementor-heading-title{ font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .shwe-cover{ max-width: 260px; margin-inline: auto; }
  .shwe-rail .elementor-widget-container{
    position: static; flex-direction: row; flex-wrap: wrap; gap: 1.2rem 2rem;
    padding-bottom: 1.4rem; border-bottom: 1px solid var(--hair);
  }
  .shwe-rail .label{ width: 100%; border: 0; padding: 0; }
  .shwe-body .elementor-widget-container{ max-width: none; }
  .shwe-body p:first-of-type::first-letter{ font-size: 3.6rem; }
}
@media (max-width: 380px){
  .shwe-title .elementor-heading-title{ font-size: 1.85rem; }
  .shwe-cover{ max-width: 230px; }
}