/* =====================================================
   Chessington Buzz – Guide Styles
   -----------------------------------------------------
   Original headers:
   - Chessington Buzz - Guide v0.0.1
   - Chessington Buzz – Guide (Frontend media styles) v1.7.3
   - Chessington Buzz – Guide (Media Accordion – macc) v1.0.0
   ===================================================== */

/* =====================================================
   1. Page Basics
   ===================================================== */

.cb-guide-page__title {
  margin: 1rem 0;
}

/* =====================================================
   2. Masonry Photo / Concept / Planning
   ===================================================== */

.cbg-masonry {
  column-gap: 1rem;
  column-count: 2;
}

.cbg-masonry-item {
  display: inline-block;
  width: 100%;
  margin: 0 0 1rem;
  break-inside: avoid;
}

/* =====================================================
   3. Media Cards + Thumbnails
   ===================================================== */

.cbg-media-card {
  border: 1px solid var(--cbg-border, #e2e4e7);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}

.cbg-media-card .cbg-thumb {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.15s ease-in-out;
}

.cbg-media-card:hover .cbg-thumb,
.cbg-fancybox-link:hover .cbg-thumb {
  opacity: 0.8;
}

.cbg-media-meta {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

/* =====================================================
   4. Vertical Nav (Inner)
   ===================================================== */

.cbg-nav .nav-link.disabled,
.cbg-nav .nav-link[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =====================================================
   5. Video / Plyr
   ===================================================== */

.cbg-video-card {
  overflow: visible;
}

video.js-plyr {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}

/* Plyr menu overflow */
.plyr__menu__container {
  z-index: 10000;
}

/* =====================================================
   6. Video Playlist (Thumbnails Below Player)
   ===================================================== */

.cbg-video-playlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.cbg-video-item {
  cursor: pointer;
  border: 1px solid #e2e4e7;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}

.cbg-video-item button {
  all: unset;
  display: block;
  width: 100%;
}

.cbg-video-item-thumb {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
  background: #000;
}

.cbg-video-item-title {
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cbg-video-item.is-active {
  outline: 2px solid #0073aa;
  outline-offset: -2px;
}

/* =====================================================
   7. Audio – Individual Players
   ===================================================== */

.cbg-audio-list {
  display: flex;
  flex-direction: column;
}

.cbg-audio-title {
  font-weight: 600;
  margin: 0.25rem 0.75rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cbg-audio-duration {
  margin-left: 0.5rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
  font-size: 0.85em;
}

/* =====================================================
   8. Media Accordion (macc)
   ===================================================== */

/* Card shell */
.cbg-macc-card {
  border: 1px solid #e7e9ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Header + button (match “Restrictions/Technical” look) */
.cbg-macc-header {
  padding: 8px;
  background: #fff;
  border-bottom: 1px solid #e7e9ee;
}

.cbg-macc-btn {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
}

/* Disabled state — keep hover/tooltip styling but block interactions */
.cbg-macc-btn.is-disabled {
  cursor: not-allowed;
  filter: none; /* avoid blurring icons */
  opacity: 0.6;
  pointer-events: none;
}

/* Left cluster */
.cbg-macc-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cbg-macc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fb;
  color: #298a5d;
}

.cbg-macc-icon i {
  font-size: 18px;
  line-height: 1;
  color: #298a5d !important;
}

.cbg-macc-text {
  font-weight: 700;
  font-size: 0.95rem;
  color: #298a5d !important;
}

/* Disabled: grey out icon + text */
.cbg-macc-btn.is-disabled .cbg-macc-icon {
  background: #f1f2f6;
  color: #9aa3af;
}

.cbg-macc-btn.is-disabled .cbg-macc-icon i {
  color: #9aa3af !important;
}

.cbg-macc-btn.is-disabled .cbg-macc-text {
  color: #9aa3af !important;
}

/* Right caret (animated up/down) */
.cbg-macc-caret {
  width: 34px;
  height: 34px;
  border: 1px solid #d9dee3;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: transform 0.18s ease, background 0.18s ease;
}

.cbg-macc-caret i {
  font-size: 18px;
  opacity: 0.8;
}

/* Grey the caret when disabled */
.cbg-macc-btn.is-disabled .cbg-macc-caret {
  border-color: #e6e8ec;
  background: #fafbfc;
  color: #9aa3af;
}

/* Optional: tame hover on disabled (keep subtle feedback, but no blue) */
.cbg-macc-btn.is-disabled:hover .cbg-macc-caret,
.cbg-macc-btn.is-disabled:focus .cbg-macc-caret {
  background: #fafbfc;
}

/* Rotate caret when expanded */
.cbg-macc-btn[aria-expanded="true"] .cbg-macc-caret {
  transform: rotate(180deg);
}

/* Hover/focus */
.cbg-macc-btn:hover .cbg-macc-caret,
.cbg-macc-btn:focus .cbg-macc-caret {
  background: #f7f9fb;
}

/* Collapse region & body */
.cbg-macc-collapse {
  /* controlled via JS / collapse plugin */
}

.cbg-macc-body {
  padding: 1rem;
}

/* =====================================================
   9. Sidebar Accordion Cards (cbg-card)
   ===================================================== */

/* Header to match card look */
.cbg-card {
  border: 1px solid #e2e4e7;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.cbg-card + .cbg-card {
  margin-top: 16px;
}

/* In sidebars we want perfectly even vertical gaps between *all* cards.
   Templates sometimes add Bootstrap spacing classes (mb-3) inconsistently,
   so we normalise spacing at the container level. */
.cbg-sidebar-stack .cbg-card {
  margin-bottom: 16px !important;
}

.cbg-sidebar-stack .cbg-card + .cbg-card {
  margin-top: 0 !important;
}

/* We keep a consistent gap under the final card too, matching mb-3 spacing. */

.cbg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
}

.cbg-card-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cbg-icon-pill {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #298a5d;
}

.cbg-icon-pill i {
  font-size: 18px;
  opacity: 0.9;
  color: #298a5d;
}

/* Title */
.cbg-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Raleway', sans-serif;
  color: #298a5d;
}

/* Caret button */
.cbg-acc-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  color: #298a5d;
}

.cbg-acc-toggle .fa-angle-up {
  transition: transform 0.18s ease;
  font-size: 18px;
  opacity: 0.8;
}

/* Generic caret icon animation (works with .fa-angle-up too) */
.cbg-acc-toggle i {
  transition: transform 0.18s ease;
}

.cbg-card.is-open .cbg-acc-toggle i {
  transform: rotate(180deg);
}

/* Accordion panel */
.cbg-card-body {
  padding: 0;
}

/* Smooth accordion panel transition (custom system — not Bootstrap) */
.cbg-acc-panel {
  display: block;
  overflow: hidden;
  opacity: 1;
}

/* When a card is closed (but not yet hidden by JS), fade the content */
.cbg-card:not(.is-open) .cbg-acc-panel {
  opacity: 0;
}

/* Only animate when JS marks it as animating */
.cbg-acc-panel.cbg-acc-panel--animating {
  transition: height 0.45s ease, opacity 0.45s ease;
}

/* Hidden panel default (for non-collapse attribute use) */
.cbg-acc-panel[hidden] {
  display: none;
}

/* Sidebar spacing: templates sometimes wrap sidebars in .row, sometimes not.
   These helpers prevent unwanted right/left padding and "extra margin" artefacts. */
.cbg-sidebar-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Cards control their own bottom spacing (mb-3), so no gap here */
}
.cbg-sidebar-col {
  width: 100%;
  padding: 0 !important;
  margin: 0;
}

/* =====================================================
   11A. Guest Facilities Accordion (Area pages)
   ===================================================== */

.cbg-guest-fac-panel {
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.cbg-guest-fac-rows {
  padding: 0;
}

.cbg-guest-row {
  display: block;
  padding: 14px 14px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.cbg-guest-row:first-child {
  border-top: none;
}

.cbg-guest-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cbg-guest-row-ico {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(41, 138, 93, .08);
  color: #298a5d;
}

.cbg-guest-row-ico i {
  color: inherit;
}

.cbg-guest-row-title {
  font-weight: 600;
  line-height: 1.2;
  color: #298a5d;
}

.cbg-guest-row-body {
  margin-left: 44px;
  margin-top: 6px;
  font-size: .95rem;
  line-height: 1.35;
}

.cbg-guest-units {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cbg-guest-units li {
  margin: 0;
  padding: 0;
}

/* =====================================================
   10. Restrictions List Inside Sidebar Cards
   ===================================================== */

.cbg-restrictions-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Unstyled list used for multi-item Facilities + Fastrack packages */
.cbg-facility-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cbg-facility-list li {
  margin: 0 0 4px 0;
}

.cbg-restriction {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid #eef0f2;
}

.cbg-restriction-icon {
  width: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 2px;
  color: #298a5d;
}

.cbg-restriction-body {
  flex: 1;
}

.cbg-restriction-title {
  font-weight: 600;
  margin: 0 0 4px 0;
  color: #298a5d;
}

.cbg-restriction-value {
  margin: 0;
  color: #2c3338;
}

.cbg-muted {
  color: #69727a;
}

/* =====================================================
   11. Facilities Sidebar – Stat Cards + Badges + Buttons
   ===================================================== */

.stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e7e9ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.stat-card .stat-ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f5f7fb;
  color: #298a5d;
}

.stat-card .stat-ico i {
  font-size: 18px;
  line-height: 1;
  color: #298a5d !important;
}

.stat-card .stat-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.stat-card .stat-head {
  display: block;
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #298a5d !important;
}

.stat-card .stat-body {
  font-size: 0.85rem;
  color: #111827;
}

.stat-card .muted {
  color: #6b7280;
}

.stat-card a.danger {
  color: #dc3545;
  text-decoration: none;
}

.stat-card a.danger:hover,
.stat-card a.danger:focus {
  text-decoration: underline;
}

.badge-pill {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
}

.badge-primary {
  background: #298a5d !important;
  color: #fff;
}

.badge-success {
  background: #198754;
  color: #fff;
}

.badge-warning {
  background: #ffc107;
  color: #212529;
}

.badge-danger {
  background: #dc3545;
  color: #fff;
}

.badge-secondary {
  background: #298a5d;
  color: #fff;
}

.btn-skinny {
  padding: 0.25rem 0.6rem;
  font-size: 0.875rem;
  line-height: 1.15;
  border-radius: 8px;
}

.btn-outline-primary.btn-skinny {
  color: #0d6efd;
  border: 1px solid #0d6efd;
  background: transparent;
}

.btn-outline-primary.btn-skinny:hover,
.btn-outline-primary.btn-skinny:focus {
  background: #0d6efd;
  color: #fff;
  text-decoration: none;
}

#chzbpp-stats .stat-head {
  color: #298a5d !important;
}

/* solid gold for the latest update icon */
#chzbpp-stats .text-gold {
  color: #f6c343 !important;
}

/* =====================================================
   12. Sidebar Card Width Normalisation (Base)
   ===================================================== */

aside .cbg-card {
  width: 100%;
}

/* =====================================================
   13. Nav Pills: Title + Meta (Edit Card)
   ===================================================== */

.cbg-edit-card .nav-link .cbg-nav-title {
  display: block;
  font-weight: 600;
}

.cbg-edit-card .nav-link .cbg-nav-meta {
  display: block;
  font-size: 0.8125rem;
  color: #6b7280;
  margin-top: 0.15rem;
}

/* =====================================================
   14. CB Guide – Read More System (Long Content on Mobile)
   ===================================================== */

.cbg-guide-content {
  position: relative;
}

.cbg-guide-content-more {
  /* Default: no restriction on desktop; mobile behaviour handled in media query */
  max-height: none;
  overflow: visible;
}

.cbg-guide-content-toggle {
  /* Button may be added via JS; provide styling */
  display: block;
  margin: 0.75rem auto 1rem;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  border: 1px solid #298a5d;
  background: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  color: #298a5d;
}

/* =====================================================
   15. CB Guide – Hero Tabs (Top Nav) Icon + Label
   ===================================================== */

/* Prevent very long ride titles from breaking the nav tabs layout */
.nav.nav-tabs.nav-justified .nav-link .tab-text {
  display: inline-block;
  max-width: 14rem; /* desktop default */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reset hero tab icons so breadcrumb caret styles don't affect them. */
.nav.nav-tabs.nav-justified .nav-link > i {
  width: auto;
  height: auto;
  border: 0;
  padding: 0;
  margin-right: 0.35rem;
  display: inline-block;
  background: transparent;
  box-shadow: none;
  font-size: 1rem;
  line-height: 1;
}

/* Keep the tab label inline with the icon. */
.nav.nav-tabs.nav-justified .nav-link .tab-text {
  vertical-align: middle;
}

/* =====================================================
   16. (Breadcrumb Styles)
   ===================================================== */
/*
  NOTE:
  The original file contained a very large "CB Guide – Breadcrumbs" section
  where most declarations had lost their selectors (only property blocks
  remained). That produced invalid CSS and would be ignored by the browser.

  To avoid guessing at class names and breaking existing JS/markup, that
  malformed block has been removed here. If you have the original breadcrumb
  selectors, you can drop them back in as a coherent section above these
  media queries.
*/

/* =====================================================
   99. Media Queries
   ===================================================== */

/* -----------------------------
   99.1 Masonry Columns
   ----------------------------- */

@media (min-width: 768px) {
  .cbg-masonry {
    column-count: 3;
  }
}

@media (min-width: 1200px) {
  .cbg-masonry {
    column-count: 4;
  }
}

/* -----------------------------
   99.2 Media Accordion (macc) – Small Screens
   ----------------------------- */

@media (max-width: 575.98px) {
  .cbg-macc-icon {
    width: 40px;
    height: 40px;
  }

  .cbg-macc-icon i {
    font-size: 16px;
  }
}

/* -----------------------------
   99.3 Stat Cards – Small Screens
   ----------------------------- */

@media (max-width: 575.98px) {
  .stat-card {
    padding: 12px 14px;
    gap: 12px;
  }

  .stat-card .stat-ico {
    width: 40px;
    height: 40px;
  }

  .stat-card .stat-ico i {
    font-size: 16px;
  }
}

/* -----------------------------
   99.4 Read More – Mobile-Only Collapse + Fade
   ----------------------------- */

@media (max-width: 767.98px) {
  .cbg-guide-content-more {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .cbg-guide-content--expanded .cbg-guide-content-more {
    max-height: 200rem;
  }

  .cbg-guide-content--collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
    pointer-events: none;
  }

  .cbg-guide-content-toggle[aria-expanded="true"] {
    background: #298a5d;
    color: #ffffff;
  }
}

/* -----------------------------
   99.5 Two-Column Layout for Sidebar Cards (Wider Mobile / Small Tablets)
   ----------------------------- */

@media (min-width: 768px) and (max-width: 991.98px) {
  .cbg-aside {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .cbg-aside .cbg-card {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Sidebar width normalisation – keep full-width cards when used in <aside> */
  aside .cbg-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* -----------------------------
   99.6 Hero Tabs – Very Small Screens
   ----------------------------- */

@media (max-width: 575.98px) {
  .nav.nav-tabs.nav-justified .nav-link .tab-text {
    max-width: 10rem;
  }
}

/* =====================================================
   100. Child Cards (excerpt clamp + equal heights)
   ===================================================== */

.cbg-child-card-col {
  display: flex;
}

.cbg-child-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.cbg-child-card__body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cbg-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  min-height: calc(1.35em * 2);
}

/* =====================================================
   101. Sidebar Logo Card + Lightbox (single image only)
   ===================================================== */

.cbg-logo-card .cbg-logo-card__link {
  display: block;
  text-decoration: none;
}

.cbg-logo-card img {
  width: 100%;
  height: auto;
  display: block;
}



/* Attractions filter wrap (moved from inline styles) */
.cbg-filter-wrap{min-width:260px;max-width:360px;}


/* Guest Facilities value text — match stat cards typography */
.cbg-guest-status,
.cbg-guest-desc,
.cbg-guest-units {
  font-size: 14px;
  line-height: 1.35;
}


/* Mobile: View more (Attractions) */
.cbg-view-more-wrap{display:none; text-align:center;}
.cbg-view-more-btn{display:inline-flex; align-items:center; justify-content:center;}