/* ===========================================================
   SMOOVIE — PUBLIC VENUE PAGE (venue_page.css)
   Rev 10:
   - SOLD OUT state greys out the whole “tile” (sidebar + film card)
     and hard-blocks clicks for BOTH sidebar buttons and time-slot anchors.
   - SOLD OUT badge is now small red text next to the title (not a pill).
   - Keeps sharp edges only
   =========================================================== */

.venue-container{
  --vp-gap: 18px;
  --vp-card-pad: 14px;
  --vp-sticky-top: 92px;

  width: 100%;
  max-width: var(--public-maxw);
  margin: 0 auto;
  padding: 18px var(--public-pad) 56px;

  background:
    radial-gradient(1100px 520px at 50% -280px, rgba(238,241,255,1) 0%, rgba(238,241,255,0) 55%),
    linear-gradient(180deg, #fbfbfd 0%, #ffffff 70%);
}

.venue-container.embed-mode{ padding-top: 10px; }

/* ===========================================================
   HERO
   =========================================================== */
.venue-hero{
  position: relative;
  height: 360px;
  background:#111;
  overflow:hidden;

  width: 100%;
  max-width: var(--public-maxw);
  margin: 14px auto 18px;

  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--shadow);
}

@media (max-width: 720px){
  .venue-hero{
    height: 300px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-left: 0;
    border-right: 0;
    margin-top: 10px;
  }
}

.venue-hero__bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: saturate(1.05) brightness(1.12);
  opacity: 1;
}

/* subtle: lighter top -> darker bottom */
.venue-hero__scrim{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.06) 0%,
    rgba(0,0,0,0.16) 45%,
    rgba(0,0,0,0.62) 100%
  );
}

.venue-hero__inner{
  position: relative;
  max-width: var(--public-maxw);
  margin:0 auto;
  padding: 28px var(--public-pad);
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content:flex-end;
  gap: 10px;
  color: #fff;
}

.venue-hero__title{
  margin: 0;
  font-weight: 950;
  font-size: clamp(30px, 3.4vw, 52px);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgba(0,0,0,.18);
}

.venue-hero__meta{
  margin: 0;
  font-weight: 900;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  letter-spacing: .01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.16);
}

.venue-hero__blurb{
  margin: 0;
  max-width: 62ch;
  font-weight: 850;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 14px rgba(0,0,0,.14);
}

/* ===========================================================
   DESKTOP GRID
   =========================================================== */
.venue-shell{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 22px;
  align-items: start;
}

/* Desktop placement */
.venue-main{ grid-column: 1; grid-row: 1; }
.about-venue-section{ grid-column: 1; grid-row: 2; }
.venue-sidebar{ grid-column: 2; grid-row: 1 / span 2; }

/* Desktop: entire sidebar stack sticky */
.venue-sidebar{
  display: flex;
  flex-direction: column;
  gap: 12px;

  position: sticky;
  top: var(--vp-sticky-top);
  align-self: start;
}

/* ===========================================================
   MOBILE LAYOUT
   - Sidebar becomes "contents" so its children can be ordered
   - Only cinema showing sticks
   - About/gallery appears ABOVE venue info/newsletter/ads
   =========================================================== */
@media (max-width: 980px){
  .venue-shell{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .venue-sidebar{
    display: contents;
    position: static;
    top: auto;
  }

  /* Order: sticky screenings -> films -> about -> venue info/newsletter/ads */
  .venue-sidebar-top{ order: -1; }
  .venue-main{ order: 0; }
  .about-venue-section{ order: 1; }
  .venue-sidebar-bottom{ order: 2; }

  /* Mobile: ONLY the top screening box stays sticky while scrolling */
  .venue-sidebar-top .screening-filter-container{
    position: sticky;
    top: 12px;
    z-index: 40;
    background: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
  }
}

/* ===========================================================
   Headings
   =========================================================== */
.section-heading{
  margin: 0 0 12px;
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 950;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ===========================================================
   Card tiles
   =========================================================== */
.screening-filter-container,
.venue-newsletter-box,
.venue-details,
.venue-local-ads{
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 0;
  padding: var(--vp-card-pad);
}

/* About/gallery card container */
.about-venue-section{
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 0;
  padding: var(--vp-card-pad);
  margin-top: 22px;
}

/* ===========================================================
   Screening filter container
   =========================================================== */
.inline-heading{
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 950;
  color: var(--ink);
}

.inline-heading #screening-date-context{
  margin-left: 6px;
  color: rgba(15,15,16,.68);
  font-weight: 900;
  font-size: 13px;
}

.inline-dropdown{
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  font-weight: 950;
  color: var(--ink);
  margin: 0 6px;
}
.inline-dropdown:focus{
  outline: none;
  border-color: rgba(225,29,72,.45);
  box-shadow: 0 0 0 3px rgba(225,29,72,.12);
}

/* Screenings list */
#screenings-list{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

#screenings-list > p{
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.02);
}

#screenings-list .film-listing{
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 12px;
  box-shadow: none;
  border-radius: 0;
}

#screenings-list .film-listing-left{
  min-width: 0;
  display: grid;
  gap: 6px;
}

#screenings-list .screening-day{
  font-weight: 950;
  font-size: 13px;
  color: rgba(15,15,16,.72);
  text-transform: uppercase;
  letter-spacing: .02em;
}

#screenings-list .film-title{
  font-weight: 950;
  font-size: 16px;
  line-height: 1.15;
  color: var(--ink);
}

#screenings-list .film-time{
  font-weight: 950;
  color: rgba(15,15,16,.82);
  font-size: 13px;
}

/* ===========================================================
   SOLD OUT: badge + remaining label
   - Badge is now small red text (not a pill)
   =========================================================== */
.screening-soldout-badge{
  display: inline;
  margin-left: .5rem;
  padding: 0;
  border-radius: 0;
  font-size: .80rem;
  font-weight: 950;
  letter-spacing: .02em;
  background: transparent;
  color: #c62828;
  vertical-align: middle;
}

.remaining-tickets-label{
  margin-left: .5rem;
  font-size: .85rem;
  font-weight: 900;
  opacity: .8;
}

/* ===========================================================
   Primary button
   =========================================================== */
.book-now-button{
  height: 44px;
  padding: 0 16px;
  border-radius: 0;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .08s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.book-now-button:hover{
  background: #d4143f;
  border-color: #d4143f;
}
.book-now-button:active{ transform: translateY(1px); }
.book-now-button:focus,
.book-now-button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(225,29,72,.16);
}

/* ===========================================================
   SOLD OUT: hard-disable buttons + anchors
   - Buttons use [disabled]
   - Time slots are <a> tags, so we also disable via class/aria/data
   - Also grey-out the whole “tile” so the state is obvious
   =========================================================== */

/* Sidebar “tile” (row) gets a fully muted look */
#screenings-list .film-listing.is-sold-out{
  background: rgba(0,0,0,.02);
  opacity: .55;
  filter: grayscale(1);
}

/* Optional: de-emphasise text inside sold-out tile */
#screenings-list .film-listing.is-sold-out .film-title,
#screenings-list .film-listing.is-sold-out .film-time{
  color: rgba(15,15,16,.58);
}

/* Disabled real buttons */
.book-now-button[disabled],
.book-now-button[aria-disabled="true"]{
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: rgba(15,15,16,.55) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;

  /* extra safety */
  pointer-events: none !important;
}
.book-now-button[disabled]:hover,
.book-now-button[aria-disabled="true"]:hover{
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.12) !important;
}

/* If a sold-out thing is an anchor with book-now-button class */
a.book-now-button.is-sold-out,
a.book-now-button[aria-disabled="true"],
a.book-now-button[data-sold-out="1"]{
  pointer-events: none !important;
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: rgba(15,15,16,.55) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  text-decoration: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ===========================================================
   Films list (taller banners)
   =========================================================== */
.film-listings-container{
  display: grid;
  gap: 14px;
}

.film-card.vertical-layout{
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 0;
  overflow: hidden;
}

/* If you add .is-sold-out to film cards in the template, this will grey the whole card */
.film-card.is-sold-out,
.film-card.vertical-layout.is-sold-out{
  opacity: .55;
  filter: grayscale(1);
}

.poster-wrapper{
  position: relative;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: #111;
  overflow: hidden;

  height: clamp(340px, 34vw, 520px);
}
@media (max-width: 560px){
  .poster-wrapper{ height: 320px; }
}

.film-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 0;
  border-radius: 0;
  background: #111;
}

.poster-wrapper .film-title{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  margin: 0;
  padding: 14px;

  font-weight: 950;
  font-size: 22px;
  line-height: 1.15;
  color: #fff;

  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 100%);
}
@media (max-width: 560px){
  .poster-wrapper .film-title{ font-size: 20px; }
}

/* Tabs */
.film-tabs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}

.film-tabs button{
  height: 44px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-weight: 950;
  color: rgba(15,15,16,.78);

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;

  border-radius: 0;
}
.film-tabs button:last-child{ border-right: 0; }
.film-tabs button:hover{ background: rgba(0,0,0,.03); }

.film-tabs button::after{
  content: '›';
  font-size: 24px;
  line-height: 1;
  opacity: .9;
  transform: translateX(0);
  transition: transform .15s ease, opacity .15s ease;
}
.film-tabs button:hover::after{ transform: translateX(4px); }
.film-tabs button.active{
  background: rgba(225,29,72,.06);
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.film-tabs button.active::after{
  transform: rotate(90deg);
  opacity: 1;
}

.film-panel{ display: none; padding: 14px; }
.film-panel.active{ display: block; }

.film-title-panel{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 950;
}

.film-meta-inline{
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.02);
  border-radius: 0;
  font-size: 13px;
  color: rgba(15,15,16,.72);
}

/* Trailer embeds */
.trailer-container{
  margin-top: 12px;
  border: 1px solid var(--line);
  background: #000;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.trailer-container > div{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.trailer-container iframe,
.trailer-container video,
.trailer-container embed,
.trailer-container object{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* Screenings tab blocks */
.screenings-panel .screening-day{
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: #fff;
}
.screenings-panel .screening-day strong{
  display: block;
  font-weight: 950;
  margin-bottom: 10px;
  color: var(--ink);
}

.time-slots{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.time-slot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
  font-weight: 950;
  text-decoration: none;
  border-radius: 0;
  transition: background-color .15s ease, color .15s ease, transform .08s ease, opacity .15s ease;
}
.time-slot:hover{
  background: var(--accent);
  color: #fff;
}
.time-slot:active{ transform: translateY(1px); }

/* SOLD OUT time slot: anchors must be disabled via CSS */
.time-slot.is-sold-out,
.time-slot[aria-disabled="true"],
.time-slot[data-sold-out="1"]{
  pointer-events: none !important;
  cursor: not-allowed !important;
  border-color: rgba(0,0,0,.12) !important;
  background: rgba(0,0,0,.06) !important;
  color: rgba(15,15,16,.55) !important;
  opacity: 1 !important;
  transform: none !important;
}
.time-slot.is-sold-out:hover,
.time-slot[aria-disabled="true"]:hover,
.time-slot[data-sold-out="1"]:hover{
  background: rgba(0,0,0,.06) !important;
  color: rgba(15,15,16,.55) !important;
}

/* Newsletter + Venue info + Local ads */
.venue-newsletter-box h3,
.venue-local-ads h3{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 950;
  color: var(--ink);
}

.newsletter-description,
.local-ads-desc{
  margin: 0 0 12px;
  color: rgba(15,15,16,.70);
  font-size: 13px;
  line-height: 1.55;
}

#venue-subscribe-form{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
#venue-subscribe-form label{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,15,16,.70);
}
#venue-subscribe-form input{
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  outline: none;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
}
#venue-subscribe-form input:focus{
  border-color: rgba(225,29,72,.45);
  box-shadow: 0 0 0 3px rgba(225,29,72,.12);
}
#venue-subscribe-form button{
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
  border-radius: 0;
}
#venue-subscribe-form button:hover{
  background: #d4143f;
  border-color: #d4143f;
}

.venue-details h2{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 950;
  color: var(--ink);
}
.venue-details p{
  margin: 8px 0;
  color: rgba(15,15,16,.78);
}
.venue-details a{
  color: var(--accent);
  font-weight: 950;
  text-decoration: none;
}
.venue-details a:hover{ text-decoration: underline; }

.local-ads-link{
  display: inline-block;
  font-weight: 950;
  color: var(--accent);
  text-decoration: none;
}
.local-ads-link:hover{ text-decoration: underline; }

/* Newsletter feedback */
.newsletter-message .success,
.newsletter-message .error{
  padding: 10px 12px;
  border-radius: 0;
  border: 1px solid var(--line);
  font-weight: 900;
  font-size: 13px;
  line-height: 1.45;
}
.newsletter-message .success{
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.08);
  color: rgba(4,120,87,1);
}
.newsletter-message .error{
  border-color: rgba(225,29,72,.35);
  background: rgba(225,29,72,.06);
  color: #9f1239;
}

/* ===========================================================
   ABOUT / gallery (mobile stays 3-up)
   =========================================================== */
.venue-photo-gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 14px; /* inside the card now */
}

.venue-photo{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: zoom-in;
  background: rgba(0,0,0,.03);
}

/* Keep 3-up on small screens, just shrink heights (DON'T make taller) */
@media (max-width: 720px){
  .venue-photo-gallery{ gap: 8px; }
  .venue-photo{ height: 140px; }
}
@media (max-width: 420px){
  .venue-photo{ height: 110px; }
}

.venue-description-full{
  margin-top: 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.venue-description-full .container{
  max-width: var(--public-maxw);
  margin: 0 auto;
  padding: 0;
}
.venue-description-full h2{
  margin: 0 0 10px;
  font-weight: 950;
}

/* Booking modal */
#booking-modal.modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
}
#booking-modal .modal-overlay{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 12px;
  overflow: auto;
}
#booking-modal .modal-content{
  position: relative;
  width: min(980px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  padding: 16px;
}
#booking-modal .close-modal{
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  color: #111;
}
#modal-body.booking-container{ padding-top: 18px; }

/* Lightbox */
.lb-overlay{
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0,0,0,.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.lb-overlay[aria-hidden="false"]{ display: flex; }

.lb-content{
  position: relative;
  width: min(980px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  padding: 12px;
}
.lb-image{
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
}
.lb-close{
  position: absolute;
  top: 6px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 34px;
  font-weight: 950;
  cursor: pointer;
}
.lb-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  font-weight: 950;
  font-size: 28px;
  width: 44px;
  height: 56px;
  cursor: pointer;
  border-radius: 0;
}
.lb-prev{ left: 8px; }
.lb-next{ right: 8px; }
.lb-caption{
  margin-top: 8px;
  font-weight: 900;
  color: rgba(15,15,16,.72);
  font-size: 13px;
}

/* === Tweak: make venue gallery images shorter (override) === */
.venue-photo{
  height: 160px; /* was 220px */
}

@media (max-width: 900px){
  /* keep them 3-up on mobile, just shorter */
  .venue-photo-gallery{
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .venue-photo{
    height: 110px; /* adjust if you want even tighter */
  }
}