/* Community Board — Portrait TV Display */

:root {
  --cb-bg:         #1a1a2e;
  --cb-bg2:        #12122a;
  --cb-border:     rgba(255,255,255,0.10);
  --cb-border2:    rgba(255,255,255,0.08);
  --cb-text:       #e8e8f8;
  --cb-text2:      #a0a0c8;
  --cb-text3:      #7070a0;
  --cb-blue:       #378ADD;
  --cb-blue-lt:    rgba(55,138,221,0.15);
  --cb-blue-txt:   #7aaee8;
  --cb-soon-bg:    rgba(55,138,221,0.12);
  --cb-soon-border:rgba(55,138,221,0.35);
  --cb-red:        #E24B4A;
  --cb-red-lt:     rgba(226,75,74,0.15);
  --cb-red-txt:    #F09595;
  --cb-yellow:     #FAC775;
  --cb-radius:     8px;
}

/* ── Outer container ─────────────────────────────────────────── */
.cb-board {
  background:   var(--cb-bg);
  color:        var(--cb-text);
  font-family:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  width:        100%;
  min-height:   100vh;
  position:     relative;
  overflow:     hidden;
}

/* ── Info bar ────────────────────────────────────────────────── */
.cb-info-bar {
  background:     var(--cb-bg2);
  border-bottom:  0.5px solid var(--cb-border);
  padding:        16px 24px 14px;
  position:       relative;
  z-index:        20;
}

.cb-community-name {
  font-size:    15px;
  color:        var(--cb-text3);
  font-weight:  500;
  margin-bottom:10px;
}

.cb-time-block {
  display:         flex;
  align-items:     baseline;
  gap:             12px;
  margin-bottom:   10px;
}

.cb-time {
  font-size:   48px;
  font-weight: 500;
  color:       #fff;
  line-height: 1;
}

.cb-date {
  font-size: 18px;
  color:     var(--cb-text2);
}

.cb-weather-block {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding-top: 12px;
  border-top:  0.5px solid var(--cb-border2);
}

.cb-weather-icon {
  font-size: 32px;
  color:     var(--cb-yellow);
}

.cb-temp {
  font-size:   26px;
  font-weight: 500;
  color:       #fff;
}

.cb-weather-extra {
  font-size:   14px;
  color:       var(--cb-text2);
  line-height: 1.5;
}

/* ── Main content ────────────────────────────────────────────── */
.cb-main-content {
  padding-bottom: 20px;
}

.cb-section {
  padding: 16px 20px 12px;
}

.cb-gallery-section {
  padding-bottom: 24px;
}

.cb-section-title {
  font-size:      13px;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--cb-text3);
  margin-bottom:  12px;
  padding-bottom: 10px;
  border-bottom:  0.5px solid var(--cb-border2);
  display:        flex;
  align-items:    center;
  gap:            7px;
}

.cb-section-title i {
  font-size: 16px;
}

.cb-divider {
  height:     0.5px;
  background: rgba(255,255,255,0.05);
  margin:     0 20px;
}

/* ── Event cards ─────────────────────────────────────────────── */
.cb-event-card {
  background:    rgba(255,255,255,0.05);
  border:        0.5px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding:       12px 14px;
  margin-bottom: 8px;
  display:       flex;
  gap:           12px;
  align-items:   flex-start;
}

.cb-event-card.cb-soon {
  background: var(--cb-soon-bg);
  border-color: var(--cb-soon-border);
}

.cb-event-time {
  font-size:   13px;
  font-weight: 500;
  color:       var(--cb-blue-txt);
  min-width:   58px;
  padding-top: 2px;
  flex-shrink: 0;
}

.cb-event-body {
  flex: 1;
}

.cb-event-name {
  font-size:   16px;
  font-weight: 500;
  color:       var(--cb-text);
  line-height: 1.3;
}

.cb-event-location {
  font-size:  13px;
  color:      var(--cb-text3);
  margin-top: 3px;
}

.cb-event-location i {
  font-size:     11px;
  margin-right:  3px;
  vertical-align: middle;
}

.cb-soon-badge {
  font-size:    11px;
  background:   rgba(55,138,221,0.25);
  color:        #85B7EB;
  border-radius:20px;
  padding:      3px 9px;
  font-weight:  500;
  margin-left:  auto;
  white-space:  nowrap;
  flex-shrink:  0;
}

.cb-no-events {
  font-size: 14px;
  color:     var(--cb-text3);
  padding:   8px 0;
  font-style:italic;
}

.cb-loading {
  font-size: 14px;
  color:     var(--cb-text3);
  padding:   12px 0;
}

/* ── Gallery buttons ─────────────────────────────────────────── */
.cb-gallery-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
}

.cb-gallery-btn {
  background:    rgba(255,255,255,0.06);
  border:        0.5px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding:       16px 14px;
  color:         var(--cb-text);
  font-family:   inherit;
  cursor:        pointer;
  display:       flex;
  flex-direction:column;
  align-items:   flex-start;
  gap:           7px;
  transition:    background 0.15s;
  text-align:    left;
  width:         100%;
}

.cb-gallery-btn:hover,
.cb-gallery-btn:focus {
  background:   rgba(55,138,221,0.2);
  border-color: rgba(55,138,221,0.4);
  outline:      none;
}

.cb-gallery-btn i {
  font-size: 26px;
  color:     var(--cb-blue-txt);
}

.cb-gallery-btn .cb-btn-label {
  font-size:   14px;
  font-weight: 500;
  color:       var(--cb-text);
}

.cb-gallery-btn .cb-btn-count {
  font-size: 12px;
  color:     var(--cb-text3);
}

/* ── Slideshow ───────────────────────────────────────────────── */
.cb-slideshow {
  display:        none;
  position:       absolute;
  top:            0;
  left:           0;
  right:          0;
  bottom:         0;
  flex-direction: column;
  z-index:        15;
}

.cb-slideshow.cb-open {
  display: flex;
}

.cb-slides {
  flex: 1;
  position: relative;
}

.cb-slide {
  display:         none;
  position:        absolute;
  inset:           0;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             14px;
}

.cb-slide.cb-active {
  display: flex;
}

.cb-slide img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  position:    absolute;
  inset:       0;
}

.cb-slide-caption-wrap {
  position:    absolute;
  bottom:      0;
  left:        0;
  right:       0;
  padding:     20px 20px 14px;
  background:  linear-gradient(transparent, rgba(0,0,0,0.65));
  z-index:     2;
}

.cb-slide-caption {
  font-size:   20px;
  font-weight: 500;
  color:       #fff;
}

.cb-slide-placeholder {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  color:           rgba(255,255,255,0.3);
  font-size:       20px;
  background:      var(--cb-bg);
  position:        absolute;
  inset:           0;
}

.cb-slide-placeholder i {
  font-size: 60px;
}

/* Slideshow footer */
.cb-timer-bar-wrap {
  height:     3px;
  background: rgba(255,255,255,0.07);
  flex-shrink:0;
}

.cb-timer-bar {
  height:     3px;
  background: var(--cb-blue);
  width:      100%;
  transition: none;
}

.cb-ss-footer {
  background:  var(--cb-bg2);
  border-top:  0.5px solid var(--cb-border);
  padding:     12px 16px;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.cb-ss-title {
  font-size:   14px;
  font-weight: 500;
  color:       var(--cb-text);
  display:     flex;
  align-items: center;
  gap:         7px;
}

.cb-ss-dots {
  display:     flex;
  gap:         6px;
  align-items: center;
}

.cb-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    rgba(255,255,255,0.2);
  cursor:        pointer;
  transition:    background 0.2s;
  border:        none;
  padding:       0;
}

.cb-dot.cb-active {
  background: #85B7EB;
}

.cb-ss-actions {
  display:     flex;
  gap:         7px;
  align-items: center;
}

.cb-ss-btn {
  background:    rgba(255,255,255,0.08);
  border:        0.5px solid rgba(255,255,255,0.15);
  border-radius: var(--cb-radius);
  color:         var(--cb-text);
  font-size:     18px;
  width:         42px;
  height:        42px;
  display:       flex;
  align-items:   center;
  justify-content:center;
  cursor:        pointer;
}

.cb-ss-btn:hover {
  background: rgba(255,255,255,0.15);
}

.cb-close-ss {
  background:    var(--cb-red-lt);
  border:        0.5px solid rgba(226,75,74,0.3);
  border-radius: var(--cb-radius);
  color:         var(--cb-red-txt);
  font-size:     14px;
  font-family:   inherit;
  padding:       0 16px;
  height:        42px;
  display:       flex;
  align-items:   center;
  gap:           6px;
  cursor:        pointer;
}

.cb-auto-notice {
  text-align:  center;
  font-size:   12px;
  color:       var(--cb-text3);
  padding:     7px;
  background:  var(--cb-bg2);
  flex-shrink: 0;
}

/* ── Responsive / TV sizing ──────────────────────────────────── */
@media (min-width: 600px) {
  .cb-time         { font-size: 64px; }
  .cb-date         { font-size: 22px; }
  .cb-event-name   { font-size: 20px; }
  .cb-event-time   { font-size: 16px; min-width: 70px; }
  .cb-event-location { font-size: 15px; }
  .cb-section-title  { font-size: 14px; }
  .cb-gallery-btn .cb-btn-label { font-size: 16px; }
  .cb-gallery-btn i  { font-size: 30px; }
  .cb-temp           { font-size: 32px; }
  .cb-weather-extra  { font-size: 16px; }
}