/* =========================================================
    Venue Info - Global Variables & Layout
========================================================= */
:root {
  --iconSize: 30px;
  --accentColor: rgb(255, 165, 0);
  --bgHover: rgba(255, 255, 255, 0.05);
  --bgHoverStrong: rgba(255, 255, 255, 0.08);
}

.venue__info {
  display: grid;
  grid-template-rows: auto;
  gap: 1.5em;
  width: 100%;
}

/* Base generic venue component style */
.venue__info .venue {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1em;
  width: 100%;
}

.venue__info .icon {
  width: var(--iconSize);
  height: var(--iconSize);
}

/* =========================================================
    Address/Location
========================================================= */
.venue__addressLocation {
  display: grid;
  /* Lowered minmax from 400px to 280px to prevent side-nav overflow */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.venue__address {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  gap: 1em;
  padding: .5em 1em;
  border-radius: 4px;
  transition: background 0.2s;
}

.venue__address:hover {
  background-color: var(--bgHover);
}

.venue__address img {
  width: var(--iconSize);
  height: var(--iconSize);
  display: block;
  flex-shrink: 0;
}

.venue__maps a {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: .4em;
  margin-top: .5em;
  text-decoration: none;
  color: inherit;
}

.venue__maps .map__btn {
  text-transform: uppercase;
  opacity: .5;
  font-size: 0.8em;
}

.venue__maps .icon {
  width: 16px;
  height: 16px;
  background: url('https://res.cloudinary.com/kalispel/image/upload/v1660762339/icons/Open_in_new_u7qoxr.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .5;
}

/* =========================================================
    Menus, Downloads & Phones (Shared Grid Logic)
========================================================= */
.venue__menus,
.venue__downloads,
.venue__phones{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5em;
}

.venue__menu,
.pdf__download,
.venue__phone,
.email__address {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
  padding: .5em 1em;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}

.venue__menu:hover,
.pdf__download:hover,
.venue__phone:hover,
.venue__emailAddress:hover {
  background-color: var(--bgHover);
}

.venue__menu img,
.pdf__download img,
.venue__phone img,
.venue__emailAddress img{
  width: var(--iconSize);
  height: var(--iconSize);
  flex-shrink: 0;
}

.menu__details,
.pdf__details,
.phone__details,
.email__details {
  display: inline-flex;
  flex-direction: column;
}

.file__name {
  font-weight: 500;
}

.type__size {
  text-transform: uppercase;
}

/* =========================================================
    Rate & Email
========================================================= */
.venue__rate .icon {
  background-image: url('https://res.cloudinary.com/kalispel/image/upload/v1659396210/icons/iconSmallRates-rev_foscli.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.venue__emailAddress .email,
.venue__phone .phone,
.venue__rate .rate {
  opacity: .5;
  font-size: 1em;
}

.pdf__download .type__size,
.venue__menus .venue__menu .type__size {
  opacity: .5;
  font-size: 0.85em;
}

/* ========================================================= 
    Hours - Modern Container Query Layout
========================================================= */
.venue__hours {
  display: grid;
  grid-template-columns: var(--iconSize) minmax(0, 1fr);
  align-items: start;
  gap: 1em;

  width: 100%;
  max-width: 800px;
  padding-inline: 1em;
  box-sizing: border-box;
}

.venue__hours img {
  width: var(--iconSize);
  height: var(--iconSize);
  object-fit: contain;
  margin-top: 4px;
}

.venue__hours .detail {
  width: 100%;
  min-width: 0;
}

.venue__hours_grid {
  display: flex;
  flex-direction: column;
  gap: .5em;
  margin-top: .75em;
  width: 100%;
  container-type: inline-size;
  container-name: hours;
}

.venue__hours .hours-row,
.venue__hours .daily-hours-row {
  display: grid;
  /* Use 'ch' to ensure all rows have the exact same starting point */
  /* 11ch is usually the sweet spot for 'Wednesday' + a little padding */
  grid-template-columns: 11ch 1fr; 
  width: 100%;
  background: var(--bgHover);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2px; /* Subtle separation between days */
}

.venue__hours .hours-cell--day {
  padding: 1em;
  font-weight: 600;
  display: flex;
  align-items: center;
}


.venue__hours .hours-services {
  display: grid;
  /* Flexible service boxes */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: rgba(255,255,255, 0.05);
}

.venue__hours .hours-cell--service {
  background: var(--bgHover);
  padding: 0.75em 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.venue__hours .hours-label {
  font-weight: 700;
  font-size: 0.85em;
  text-transform: uppercase;
  opacity: 0.9;
}

.venue__hours .hours-value {
  opacity: .5;
  font-size: 0.9em;
}

.venue__hours .hours-cell.today .hours-value {
  opacity: 1 !important;
}

.venue__hours .hours-cell.today,
.venue__hours .hours-cell.today .hours-value {
  color: rgb(255, 165, 0);
  opacity: 1 !important;
}

/* ========================================================= 
    Container Queries (The Responsiveness Fix)
========================================================= */

/* Phase 1: Squished Services (Medium width) */
@container hours (max-width: 550px) {
  .venue__hours .hours-services {
    grid-template-columns: 1fr; /* Stack services inside the row */
  }
}

/* Phase 2: Full Stack (Narrow width / Mobile / Small Side Nav) */
@container hours (max-width: 400px) {
  .venue__hours .hours-row,
  .venue__hours .daily-hours-row {
    grid-template-columns: 1fr; /* Day stacks on top of Services */
  }

  .venue__hours .hours-cell--day {
    padding: 0.8em 1em 0.4em;
    font-size: 0.9em;
    background: rgba(255,255,255, 0.03);
  }

  .venue__hours .hours-cell--service {
    padding: 0.5em 1em;
    flex-direction: row; /* Inline label: value for compact stacking */
    justify-content: flex-start;
    gap: 0.5em;
  }

  .venue__hours .hours-label::after {
    content: ":";
  }
}