/* ============================================================
   TWL Shows Shortcode UI
   File: assets/twl-cal-shows.css
   Version: 1.0.8
   Last Updated: 2026-01-30

   Notes:
   - CONSOLIDATED (single source of truth; no duplicate selectors)
   - Date badge supports 1 or 2 months:
       * If only one month exists: centered top
       * If two months exist (.twl-month-start + .twl-month-end):
           - start month “over” first date
           - end month “under” first date, shifted toward end date
   - Date badge: Month(s) + Range + Days
   - Poster image: never crop width (contain) + slight scale-up + top anchored
   - Badge includes soft radial glow + glass/emboss effect
   ============================================================ */

:root{
  --twl-cal-shows-css-version: "1.0.8";

  /* Gold-ish accent */
  --twl-gold: #b59878;
  --twl-gold-strong: rgba(181, 152, 120, 0.95);
  --twl-gold-soft: rgba(181, 152, 120, 0.40);
  --twl-gold-border: rgba(181, 152, 120, 0.65);
  --twl-gold-border-soft: rgba(181, 152, 120, 0.45);
  --twl-gold-glow: rgba(181, 152, 120, 0.28);

  /* Card surfaces */
  --twl-card-bg: #1f2327;
  --twl-card-bg-hover: #2a3036;

  /* Ticket boxes */
  --twl-box-bg: rgba(0,0,0,0.33);
  --twl-box-bg-hover: rgba(181, 152, 120, 0.18);

  /* Glass/emboss */
  --twl-glass-highlight: rgba(255,255,255,0.16);
  --twl-glass-shadow: rgba(0,0,0,0.38);
}

/* ============================================================
   Grid layout
   ============================================================ */
.twl-show-cards{
  display:grid;
  grid-template-columns:repeat(1, minmax(0, 1fr));
  gap:18px;
}
@media (min-width:1000px){
  .twl-show-cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Card
   ============================================================ */
.twl-show-card{
  border:1px solid rgba(255,255,255,0.10);
  background:var(--twl-card-bg);
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  padding:0;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease;
}
.twl-show-card:hover{
  transform:translateY(-3px);
  background:var(--twl-card-bg-hover);
  border-color:var(--twl-gold-border);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.25),
    0 0 0 1px var(--twl-gold-border),
    0 0 22px var(--twl-gold-glow);
}

/* Main listing size (desktop split) */
.twl-show-card-inner{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:320px;
}
@media (max-width:900px){
  .twl-show-card-inner{
    grid-template-columns:1fr;
    min-height:unset;
  }
}

/* ============================================================
   Image column
   - Never crop width
   - Slightly larger and anchored to top
   ============================================================ */
.twl-show-left{
  position:relative;
  background:#000;
}

.twl-show-thumbwrap{
  height:100%;
  min-height:320px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:#000;
  padding:0;
  margin:0;
  overflow:hidden;
}
@media (max-width:900px){
  .twl-show-thumbwrap{ min-height:230px; }
}

/* Never crop width: contain. Slight scale-up to feel “fuller”. */
.twl-show-thumb{
  width:100%;
  height:100%;
  display:block;
  margin:0;
  padding:0;
  border:0;

  object-fit:contain;
  object-position:top center;

  transform:scale(1.04);
  transform-origin:top center;

  background:#000;
}

.twl-show-thumb-placeholder{
  width:100%;
  height:100%;
  background:#000;
}

/* ============================================================
   Date badge
   - Supports 1 month OR 2 months (start/end)
   - Radial glow + glass/emboss
   ============================================================ */
.twl-show-date{
  position:absolute;
  left:10px;
  bottom:10px;
  width:100px;
  height:100px;
  z-index:3;

  border-radius:50%;
  border:1px solid var(--twl-gold-border-soft);

  /* Glass + radial glow stack */
  background:
    radial-gradient(circle at 35% 30%,
      rgba(181, 152, 120, 0.24) 0%,
      rgba(181, 152, 120, 0.10) 38%,
      rgba(0,0,0,0.00) 70%
    ),
    radial-gradient(circle at 30% 20%,
      var(--twl-glass-highlight) 0%,
      rgba(255,255,255,0.00) 55%
    ),
    linear-gradient(
      180deg,
      rgba(28, 30, 32, 0.78) 0%,
      rgba(16, 18, 20, 0.74) 100%
    );

  backdrop-filter: blur(7px);
  box-shadow:
    0 10px 22px var(--twl-glass-shadow),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -10px 18px rgba(0,0,0,0.32);

  /* Layout:
     - top region reserved for months (absolute positioned)
     - center region for range
     - bottom for days
  */
  display:grid;
  grid-template-rows: 26px 1fr 22px;
  align-items:center;
  justify-items:center;
  padding:10px;
  overflow:hidden;
}

.twl-show-card:hover .twl-show-date{
  border-color: var(--twl-gold-border);
  box-shadow:
    0 12px 24px rgba(0,0,0,0.34),
    0 0 14px rgba(181, 152, 120, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -10px 18px rgba(0,0,0,0.32);
}

/* If markup has a meta wrapper, keep it neutral and non-blocking */
.twl-show-date-meta{ display:contents; }

/* --------------------------
   Month styling (default: single month)
   -------------------------- */
.twl-show-date-month{
  font-size:15px;
  font-weight:900;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.95);
  line-height:1;
  text-align:center;
  white-space:nowrap;

  /* Default single month: top centered row */
  grid-row:1;
}

/* --------------------------
   Two-month layout (start/end)
   Requires:
     .twl-month-start and .twl-month-end
   -------------------------- */
.twl-show-date-month.twl-month-start,
.twl-show-date-month.twl-month-end{
  /* Pull months out of the grid so we can place them precisely */
  grid-row:auto;
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  pointer-events:none;
}

/* Start month: “over” the first number (left-ish) */
.twl-show-date-month.twl-month-start{
  text-align:left;
  padding-left:20px;
  transform: translateY(1px);
}

/* End month: “under” the first number, shifted toward second number */
.twl-show-date-month.twl-month-end{
  top:60px;                 /* sits under the first month */
  text-align:left;
  padding-left:12px;
  transform: translateX(26px); /* shift toward the end date */
  opacity:0.95;
  font-size:13px;           /* slightly smaller so it reads as secondary */
  letter-spacing:0.10em;
}

/* --------------------------
   Range (center)
   -------------------------- */
.twl-show-date-day{
  grid-row:2;
  margin:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:0;
  white-space:nowrap;
  font-size:38px;
  font-weight:800;
  line-height:0.04;
  color:rgba(255,255,255,0.96);
  letter-spacing:-0.06em;
  text-shadow: 0 5px 10px rgba(0,0,0,0.35);
}

/* Range pieces */
.twl-range-left,
.twl-range-right,
.twl-range-dash{
  display:inline-block;
}
.twl-range-left,
.twl-range-right{
  font-style:italic;
}

/* dash tight + a little handwritten attitude */
.twl-range-dash{
  font-size:0.56em;
  line-height:1;
  opacity:0.92;
  transform: rotate(-8deg);
  margin:1px;
  padding:0;
}

/* right number: sub-ish + closer */
.twl-range-right{
  transform: translateY(0.18em);
  margin-left:-0.12em;
}

/* --------------------------
   Days (bottom)
   -------------------------- */
.twl-show-date-dowtime{
  grid-row:3;
  margin:0;
  width:100%;
  text-align:center;
  font-size:12.5px;
  color:rgba(255,255,255,0.84);
  white-space:nowrap;
  transform: translateY(0.3em);
  line-height:1;
}

/* ============================================================
   Content column
   ============================================================ */
.twl-show-right{
  padding:18px;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.twl-show-title{
  margin:0 0 10px 0;
  font-size:28px;
  font-weight:900;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#fff;
}

.twl-show-dates{
  margin:0 0 12px 0;
  font-size:15px;
  color:rgba(255,255,255,0.92);
}

/* excerpt can stay clamped */
.twl-show-blurb{
  margin:0 0 14px 0;
  font-size:16px;
  line-height:1.45;
  color:rgba(255,255,255,0.88);

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:10;
  overflow:hidden;
}

.twl-show-actions{
  margin-top:auto;
  display:flex;
  gap:10px;
  align-items:center;
}

/* ============================================================
   Buttons
   ============================================================ */
.twl-show-btn,
.twl-show-soon{
  min-height:64px;
  padding:14px 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;
  border:2px solid var(--twl-gold-border);
  font-weight:900;
  font-size:20px;
  text-decoration:none;
  box-shadow:none;
}

.twl-show-btn{
  background:var(--twl-gold-strong);
  color:#1f2327;
}
.twl-show-btn:hover{
  filter:brightness(1.05);
}

.twl-show-soon{
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.92);
}

/* hover: ticket boxes glow gold */
.twl-show-card:hover .twl-show-soon,
.twl-show-card:hover .twl-show-btn{
  background:var(--twl-box-bg-hover);
  box-shadow:0 0 18px var(--twl-gold-glow);
}

/* ============================================================
   Modal overrides (shows)
   ============================================================ */
.twl-show-shortcode .twl-cal-modal-dialog{
  max-width:720px;
  max-height:86vh;
  overflow:auto;
}

.twl-show-shortcode .twl-cal-modal-media{
  width:100%;
  background:#000;
  padding:0;
  margin:0;
}
.twl-show-shortcode .twl-cal-modal-img{
  width:100%;
  height:auto;
  display:block;
  margin:0;
  padding:0;
  border:0;
  object-fit:cover;
  object-position:top center;
}

/* modal content must never clamp/truncate */
.twl-show-shortcode .twl-cal-modal-content-html,
.twl-show-shortcode .twl-cal-modal-content-html *,
.twl-show-shortcode .twl-cal-modal-fulltext{
  overflow:visible !important;
  max-height:none !important;
  display:block !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
  white-space:normal !important;
}

.twl-show-shortcode .twl-cal-modal-performances{
  margin:6px 0 14px 0;
  line-height:1.55;
}

.twl-show-shortcode .twl-show-venue{
  margin:0 0 10px 0;
}

.twl-show-shortcode .twl-cal-modal-disabled{
  cursor:default;
  opacity:0.95;
  pointer-events:none;
}

/* ============================================================
   Card height + consistent poster sizing (DESKTOP)
   File: assets/twl-cal-shows.css
   Add-on: normalize card height so left poster area is identical
   ============================================================ */

/* Choose a single desktop card height so content can't change it */
@media (min-width: 901px){
  .twl-show-card-inner{
    height:460px;          /* adjust if you want taller/shorter */
    min-height:460px;      /* overrides earlier min-height:320px */
    align-items:stretch;   /* ensure both columns fill the height */
  }

  /* Left column fills full card height */
  .twl-show-left{
    height:100%;
  }

  /* Poster wrapper must fill full height (remove min-height fights) */
  .twl-show-thumbwrap{
    height:100%;
    min-height:0;          /* IMPORTANT: prevents container forcing extra height rules */
  }

  /* Image fills wrapper box consistently */
  .twl-show-thumb,
  .twl-show-thumb-placeholder{
    height:100%;
    width:100%;
  }

  /* Right column fills height; content no longer affects overall card height */
  .twl-show-right{
    height:100%;
    overflow:hidden;       /* prevents text from expanding card */
  }

  /* Keep the blurb from changing layout size; you already clamp it */
  .twl-show-blurb{
    overflow:hidden;
  }
}

/* ============================================================
   MODAL: restore scrolling on mobile (classes + shows)
   ============================================================ */

/* Let the dialog be a fixed "shell" and make the BODY scroll */
.twl-cal-modal-dialog{
  overflow:hidden;              /* was auto; mobile hates this */
  max-height:86vh;
  display:flex;
  flex-direction:column;
}

/* Make the content area flex so the body can scroll */
.twl-cal-modal-content{
  display:flex;
  flex-direction:column;
  min-height:0;                 /* CRITICAL for nested scrolling */
}

/* Media stays sized; body becomes the scroller */
.twl-cal-modal-media{
  flex:0 0 auto;
}

.twl-cal-modal-body{
  flex:1 1 auto;
  min-height:0;                 /* CRITICAL for nested scrolling */
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* Mobile: give a bit more usable height */
@media (max-width: 900px){
  .twl-cal-modal-dialog{
    max-height:92vh;
  }
}