/* TDE Company Portal design system + responsive audit, v2.25.31
   Beyond the Stage intentionally keeps its own editorial visual language. */

/* ------------------------------
   Portal spacing + shared widths
   ------------------------------ */
.tde-portal-intro,
.tdeql-section,
.tdecc,
.tde-video-breakout,
.tde-docs-section,
.tde-calendar-app,
.tde-rehearsal-calendar-header{
  --tde-portal-red:#c9151e;
  --tde-portal-black:#111;
  --tde-portal-muted:#5f5b57;
  --tde-portal-line:#e6e2de;
  --tde-portal-wide:min(88vw,1500px);
  --tde-portal-calendar:min(80vw,1440px);
}

/* Main functional portal areas should use the screen instead of feeling like a narrow blog column. */
@media(min-width:1201px){
  .tde-portal-cards,
  .tde-portal-glance,
  .tdeql-grid,
  .tdecc,
  .tde-video-shell,
  .tde-docs-carousel-wrap.has-carousel,
  .tde-docs-app .tde-docs-grid{
    width:var(--tde-portal-wide)!important;
    max-width:none!important;
  }

  /* Calendar stays intentionally a little narrower than the content-heavy sections. */
  body .tde-calendar-app.tde-parent-v2-active,
  .tde-rehearsal-calendar-header{
    width:var(--tde-portal-calendar)!important;
    max-width:1440px!important;
  }
}

@media(min-width:761px) and (max-width:1200px){
  .tde-portal-cards,
  .tde-portal-glance,
  .tdeql-grid,
  .tdecc,
  .tde-video-shell,
  .tde-docs-carousel-wrap.has-carousel,
  .tde-docs-app .tde-docs-grid,
  body .tde-calendar-app.tde-parent-v2-active,
  .tde-rehearsal-calendar-header{
    width:92vw!important;
    max-width:92vw!important;
  }
}

/* ---------------------------------
   One portal section-heading system
   --------------------------------- */
.tde-portal-section-header,
.tdeql-section-header{
  position:relative!important;
  width:min(88vw,1500px)!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  margin-bottom:30px!important;
  padding:24px 24px 22px!important;
  box-sizing:border-box!important;
  text-align:center!important;
  background:#fff!important;
  border:0!important;
  border-bottom:1px solid var(--tde-portal-line,#e6e2de)!important;
}

.tde-portal-section-kicker,
.tdeql-section-kicker,
.tde-video-heading>span{
  display:block!important;
  margin:0!important;
  color:var(--tde-portal-red,#c9151e)!important;
  font-family:inherit!important;
  font-size:10px!important;
  line-height:1.15!important;
  font-weight:800!important;
  letter-spacing:2.4px!important;
  text-transform:uppercase!important;
}

.tde-portal-section-header h2,
.tdeql-section-header h2,
.tde-video-heading h2{
  margin:5px 0 3px!important;
  color:var(--tde-portal-black,#111)!important;
  font-family:"Cormorant Garamond",Cormorant,Georgia,serif!important;
  font-size:38px!important;
  line-height:1!important;
  font-weight:600!important;
  letter-spacing:-.45px!important;
  text-transform:none!important;
  text-wrap:balance;
}

.tde-portal-section-header p,
.tdeql-section-header p,
.tde-video-heading p{
  max-width:760px!important;
  margin:7px auto 0!important;
  color:var(--tde-portal-muted,#5f5b57)!important;
  font-size:14px!important;
  line-height:1.55!important;
  text-wrap:balance;
}

.tde-portal-section-header:after,
.tdeql-section-header:after,
.tde-video-heading:after{
  content:""!important;
  display:block!important;
  width:56px!important;
  height:3px!important;
  margin:14px auto 0!important;
  background:var(--tde-portal-red,#c9151e)!important;
}

/* The nested documents header uses the same visual language, but a touch less vertical space. */
.tdeql-documents-slot .tde-docs-subheader{
  padding-top:18px!important;
  padding-bottom:19px!important;
  margin-bottom:24px!important;
}

/* Videos live on black, but the typography/scale still matches the rest of the portal. */
.tde-video-heading{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  margin:0 auto 30px!important;
  padding:0 20px 20px!important;
  text-align:center!important;
  border-bottom:1px solid rgba(255,255,255,.13)!important;
}
.tde-video-heading h2{color:#fff!important}
.tde-video-heading p{color:#bdbdbd!important}

/* Calendar header should visually align to the narrower calendar frame. */
@media(min-width:1201px){
  .tde-rehearsal-calendar-header{
    position:relative!important;
    left:50%!important;
    margin-left:0!important;
    margin-right:0!important;
    transform:translateX(-50%)!important;
  }
}

/* ----------------------
   Top portal quick access
   ---------------------- */
@media(min-width:1201px){
  .tde-portal-cards{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:clamp(16px,1.4vw,24px)!important;
  }
}
@media(min-width:860px) and (max-width:1200px){
  .tde-portal-cards{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:18px!important;
  }
  .tde-portal-card{min-height:238px!important}
}
@media(min-width:600px) and (max-width:859px){
  .tde-portal-cards{
    width:calc(100% - 40px)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }
}

.tde-portal-card,
.tde-glance-card,
.tdeql-card{
  border-color:#e4e0dc!important;
  box-shadow:0 8px 26px rgba(0,0,0,.05)!important;
}
.tde-portal-card:hover,
.tde-portal-card:focus-visible,
.tde-glance-card:hover,
.tde-glance-card:focus-visible,
.tdeql-card:hover,
.tdeql-card:focus-within{
  box-shadow:0 14px 34px rgba(0,0,0,.085)!important;
}

/* -----------------
   Company Resources
   ----------------- */
@media(min-width:1201px){
  .tdeql-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:28px!important;
  }
  .tdeql-card{
    padding:38px 38px 32px!important;
  }
}

/* Important Documents keeps its full-width gray field, but the cards line up to the portal content width. */
.tde-docs-app{
  border-top:1px solid #e2e2e2!important;
  border-bottom:1px solid #e2e2e2!important;
}
@media(min-width:1201px){
  .tde-docs-carousel-wrap.has-carousel{
    padding-left:46px!important;
    padding-right:46px!important;
  }
  .tde-docs-carousel-wrap.has-carousel .tde-doc-card{
    flex-basis:calc((100% - 72px)/4)!important;
  }
}

/* ---------------------------
   Competitions and conventions
   --------------------------- */
.tdecc{
  padding-left:0!important;
  padding-right:0!important;
}
@media(min-width:1201px){
  .tdecc-featured-wrap,
  .tdecc-toolbar,
  .tdecc-grid,
  .tdecc-info{
    width:100%!important;
    max-width:none!important;
  }
}

/* -----------------
   Videos & memories
   ----------------- */
@media(min-width:1201px){
  .tde-video-feature{min-height:420px!important}
  .tde-video-feature-copy{width:min(560px,48%)!important;padding:48px!important}
}

/* -----------------
   Consistent rhythm
   ----------------- */
.tdeql-section,
.tdecc{
  margin-top:clamp(38px,5vw,72px)!important;
  margin-bottom:clamp(42px,5vw,76px)!important;
}
.tde-video-breakout{
  margin-top:clamp(42px,5vw,76px)!important;
}

/* -----------------
   Tablet + phone QA
   ----------------- */
@media(max-width:760px){
  .tde-portal-section-header,
  .tdeql-section-header,
  .tde-rehearsal-calendar-header{
    width:calc(100% - 28px)!important;
    max-width:none!important;
    margin-bottom:22px!important;
    padding:18px 12px 17px!important;
  }
  .tde-portal-section-header h2,
  .tdeql-section-header h2,
  .tde-video-heading h2{
    font-size:29px!important;
    line-height:1.02!important;
  }
  .tde-portal-section-header p,
  .tdeql-section-header p,
  .tde-video-heading p{
    font-size:13px!important;
    line-height:1.5!important;
  }
  .tde-portal-section-header:after,
  .tdeql-section-header:after,
  .tde-video-heading:after{
    width:48px!important;
    margin-top:12px!important;
  }

  .tde-portal-copy{
    padding:44px 18px 34px!important;
  }
  .tde-portal-copy h2{
    font-size:clamp(38px,12vw,54px)!important;
    line-height:.98!important;
  }
  .tde-portal-banner{
    min-height:clamp(260px,72vw,430px)!important;
  }
  .tde-portal-cards{
    width:calc(100% - 28px)!important;
    grid-template-columns:1fr!important;
    gap:13px!important;
    padding-top:28px!important;
    padding-bottom:28px!important;
  }
  .tde-portal-card{
    min-height:0!important;
    padding:22px 18px!important;
  }
  .tde-portal-glance{
    width:calc(100% - 28px)!important;
    gap:22px!important;
  }

  .tdeql-grid,
  .tdecc,
  .tde-video-shell,
  .tde-docs-carousel-wrap.has-carousel,
  .tde-docs-app .tde-docs-grid{
    width:calc(100% - 28px)!important;
    max-width:none!important;
  }
  .tdeql-section,
  .tdecc{
    margin-top:36px!important;
    margin-bottom:44px!important;
  }

  body .tde-calendar-app.tde-parent-v2-active{
    width:calc(100% - 20px)!important;
    max-width:none!important;
  }

  .tde-video-breakout{
    padding-top:38px!important;
    padding-bottom:42px!important;
  }
  .tde-video-heading{padding:0 6px 17px!important;margin-bottom:22px!important}
  .tde-video-feature{min-height:310px!important}
  .tde-video-feature-copy{
    width:100%!important;
    max-width:100%!important;
    padding:24px 22px!important;
  }
  .tde-video-feature-copy strong{
    font-size:34px!important;
    line-height:1!important;
  }
}

@media(max-width:430px){
  .tde-portal-section-header h2,
  .tdeql-section-header h2,
  .tde-video-heading h2{font-size:27px!important}
  .tde-glance-heading{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  .tde-glance-heading a,
  .tde-glance-heading button{white-space:normal!important}
  .tde-glance-card{align-items:flex-start!important}
}

/* v2.25.32 center wide breakout sections inside Elementor's narrower content column.
   Auto margins are not enough when the portal frame is wider than its parent. */
@media(min-width:761px){
  .tdeql-section-header,
  .tdeql-grid,
  .tdecc{
    position:relative!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

@media(max-width:760px){
  .tdeql-section-header,
  .tdeql-grid,
  .tdecc{
    left:auto!important;
    transform:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* v2.25.33 Important Documents header centering.
   The documents block is moved inside Company Resources, so its wider header must
   be centered against the viewport instead of the narrower nested resource column. */
@media(min-width:761px){
  .tdeql-documents-slot .tde-docs-subheader{
    position:relative!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    margin-left:0!important;
    margin-right:0!important;
    text-align:center!important;
  }
}

@media(max-width:760px){
  .tdeql-documents-slot .tde-docs-subheader{
    left:auto!important;
    transform:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
}