/* ==========================================================
   SUGARPOP BILLBOARD
   Shared structural contract for every selectable theme.

   Theme files may vary decorative presentation, but this file
   owns common Billboard hierarchy, typography, and layout
   behavior that must remain consistent across themes.
   ========================================================== */

.billboard-page .billboard-section-label,
.billboard-page .community-feedback-heading .billboard-section-label {
  margin: 0 0 10px;
  color: var(--billboard-purple);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  line-height: 1.15;
  text-transform: uppercase;
}

.billboard-page .billboard-details h2,
.billboard-page .billboard-community h2,
.billboard-page .billboard-published-feed h2,
.billboard-page .billboard-published-comments h2,
.billboard-page .billboard-publication-placeholder h2,
.billboard-page .community-feedback-heading h2 {
  margin: 0 0 16px;
  color: var(--billboard-heading);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  font-weight: 850;
  line-height: 1.2;
}

.billboard-page
  .billboard-published-feed
  > .billboard-publication-label,
.billboard-page
  .billboard-publication-placeholder
  > .billboard-publication-label,
.billboard-page
  .billboard-published-comments
  > .billboard-publication-label,
.billboard-page
  .community-feedback-heading
  > .billboard-publication-label {
  color: var(--billboard-purple);
}

/* Keep Billboard content colors inside the active Billboard
   theme contract instead of inheriting town/site-shell colors. */

.billboard-page .billboard-detail-item,
.billboard-page .billboard-detail-item p,
.billboard-page .billboard-hours-row,
.billboard-page .billboard-hours-row strong,
.billboard-page .billboard-hours-row span,
.billboard-page .billboard-media-card p,
.billboard-page .billboard-publication-placeholder p,
.billboard-page .billboard-publication-placeholder-copy,
.billboard-page .billboard-published-comment p,
.billboard-page .community-feedback-context,
.billboard-page .community-feedback-reaction-label {
  color: var(--billboard-text);
}

.billboard-page .billboard-detail-item h3,
.billboard-page .billboard-media-card h3 {
  color: var(--billboard-heading);
}

.billboard-page .billboard-card a {
  color: var(--billboard-link);
}

/* Billboard uses a reduced Sugarpop header.
   Keep the primary logo/control row while removing secondary chrome. */

.sticky-header.billboard-header-reduced {
  min-height: 0;
}

.sticky-header.billboard-header-reduced .header-caption,
.sticky-header.billboard-header-reduced .centered-flex,
.sticky-header.billboard-header-reduced .daymaker-header-container,
.sticky-header.billboard-header-reduced .quick-nav-container {
  display: none;
}

/* Close the inherited Bulma/site-shell gap beneath the
   reduced Billboard header. */

body.billboard-page-active > .section {
  padding-top: 0;
}

body.billboard-page-active .billboard-page {
  padding-top: 0;
}

/* Preserve the shared full-width media behavior even when
   individual themes define multi-column Billboard media grids. */

.billboard-page
.billboard-media-showcase
.billboard-media-reel {
  grid-template-columns: none;
}

/* Shared responsive tile contract.
   One available item consumes the row instead of leaving
   theme-created empty columns behind. */

.billboard-page
.billboard-details
.billboard-detail-grid {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(225px, 100%),
        1fr
      )
    );
}

.billboard-page
.billboard-hours-panel {
  margin-top:
    clamp(
      22px,
      3vw,
      32px
    );
  padding-top:
    clamp(
      18px,
      2.5vw,
      26px
    );
  border-top:
    1px solid
    var(--billboard-border);
}

.billboard-page
.billboard-hours-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.billboard-page
.billboard-hours-heading
h3 {
  margin: 0;
  color: var(--billboard-heading);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.billboard-page
.billboard-open-status {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border:
    1px solid
    rgb(100 116 139 / 22%);
  border-radius: 999px;
  background:
    rgb(100 116 139 / 10%);
  color: var(--billboard-muted-text);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.billboard-page
.billboard-open-status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow:
    0 0 0 3px
    rgb(148 163 184 / 16%);
}

.billboard-page
.billboard-open-status.is-open {
  border-color:
    rgb(22 163 74 / 28%);
  background:
    rgb(22 163 74 / 10%);
  color: #15803d;
}

.billboard-page
.billboard-open-status.is-open
.billboard-open-status-dot {
  background: #22c55e;
  box-shadow:
    0 0 0 3px
    rgb(34 197 94 / 16%),
    0 0 12px
    rgb(34 197 94 / 58%);
}

.billboard-page
.billboard-hours-panel
.billboard-hours-list {
  display: flex;
  width: 100%;
  max-width: none;
  gap: 8px;
  flex-wrap: wrap;
}

.billboard-page
.billboard-hours-panel
.billboard-hours-row {
  display: grid;
  min-width:
    min(
      118px,
      100%
    );
  min-height: 78px;
  flex:
    1
    1
    118px;
  gap: 5px;
  padding: 12px 10px;
  border:
    1px solid
    var(--billboard-border);
  border-radius: 9px;
  background:
    var(--billboard-surface-soft);
  align-content: center;
  grid-template-columns: 1fr;
  text-align: center;
}

.billboard-page
.billboard-hours-panel
.billboard-hours-row
strong {
  color: var(--billboard-heading);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.15;
  text-transform: uppercase;
}

.billboard-page
.billboard-hours-panel
.billboard-hours-row
span {
  color: var(--billboard-text);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.25;
}

.billboard-page
.billboard-hours-panel
.billboard-hours-row.is-today {
  border-color:
    rgb(22 163 74 / 34%);
  box-shadow:
    inset 0 0 0 1px
    rgb(22 163 74 / 10%);
}

@media (width <= 640px) {
  .billboard-page
  .billboard-hours-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .billboard-page
  .billboard-hours-panel
  .billboard-hours-row {
    min-width:
      min(
        132px,
        100%
      );
    flex-basis: 132px;
  }
}

.billboard-page
.billboard-featured-publication
.billboard-feature-card,
.billboard-page
.billboard-around-town
.billboard-media-grid
> .billboard-media-card:only-child {
  width: 100%;
  max-width: none;
}

.billboard-page
.billboard-around-town
.billboard-media-grid {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(245px, 100%),
        1fr
      )
    );
}

/* Menu, Deal and Around Town artwork is presented in full.
   A blurred copy supplies a theme-compatible backdrop rather
   than cropping the customer asset to fill the viewport. */

.billboard-page
.billboard-feature-art {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 18% 14%,
      rgb(255 255 255 / 20%),
      transparent 34%
    ),
    var(--billboard-surface-soft);
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.billboard-page
.billboard-feature-art-backdrop {
  position: absolute;
  z-index: -2;
  inset: -8%;
  width: 116%;
  height: 116%;
  max-height: none;
  opacity: 0.52;
  filter:
    blur(24px)
    saturate(0.9);
  transform: scale(1.06);
  object-fit: cover;
}

.billboard-page
.billboard-feature-art::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgb(255 255 255 / 12%),
      rgb(0 0 0 / 14%)
    );
  content: "";
}

.billboard-page
.billboard-feature-art-image {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width:
    min(
      100%,
      680px
    );
  height: auto;
  max-height:
    clamp(
      320px,
      52vw,
      520px
    );
  padding:
    clamp(
      10px,
      2vw,
      18px
    );
  aspect-ratio: auto;
  object-fit: contain;
}

.billboard-page
.billboard-feature-card
.billboard-media-content {
  width: 100%;
}

.billboard-page
.billboard-feature-card
.billboard-media-meta {
  margin:
    0
    0
    7px;
  color: var(--billboard-muted-text);
  font-size: 0.92rem;
  font-weight: 750;
}

@media (width <= 640px) {
  .billboard-page
  .billboard-feature-art-image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height:
      clamp(
        300px,
        68vh,
        460px
      );
  }
}

/* ==========================================================
   BILLBOARD PAST-STATE CONTRACT
   Shared structure is authoritative across every Billboard
   theme. Themes contribute semantic palette values only.
   ========================================================== */

/* Ocean Breeze / Standard */
body.billboard-page-active
.billboard-page {
  --billboard-past-frame: #14285a;
  --billboard-past-accent: #147d9e;
  --billboard-past-paper: #fffaf2;
  --billboard-past-status-bg: #14285a;
  --billboard-past-status-text: #fff;
}

/* Boardwalk Pop */
body.billboard-theme-boardwalk-pop
.billboard-page {
  --billboard-past-frame: #075985;
  --billboard-past-accent: #db2777;
  --billboard-past-paper: #fff9dd;
  --billboard-past-status-bg: #075985;
  --billboard-past-status-text: #fff;
}

/* Clean Modern */
body.billboard-theme-clean-modern
.billboard-page {
  --billboard-past-frame: #111827;
  --billboard-past-accent: #4f46e5;
  --billboard-past-paper: #f4f6f8;
  --billboard-past-status-bg: #111827;
  --billboard-past-status-text: #fff;
}

/* Game Day */
body.billboard-theme-game-day
.billboard-page {
  --billboard-past-frame: #102a43;
  --billboard-past-accent: #b91c1c;
  --billboard-past-paper: #eef3f7;
  --billboard-past-status-bg: #102a43;
  --billboard-past-status-text: #fff;
}

/* Garden Party */
body.billboard-theme-garden-party
.billboard-page {
  --billboard-past-frame: #365b42;
  --billboard-past-accent: #a45d7b;
  --billboard-past-paper: #fffdf9;
  --billboard-past-status-bg: #365b42;
  --billboard-past-status-text: #fff;
}

/* Harbor Classic */
body.billboard-theme-harbor-classic
.billboard-page {
  --billboard-past-frame: #17324d;
  --billboard-past-accent: #9a6b3f;
  --billboard-past-paper: #fffdf6;
  --billboard-past-status-bg: #17324d;
  --billboard-past-status-text: #fff;
}

/* Holiday Lights */
body.billboard-theme-holiday-lights
.billboard-page {
  --billboard-past-frame: #174c35;
  --billboard-past-accent: #d0a93f;
  --billboard-past-paper: #fff9e9;
  --billboard-past-status-bg: #174c35;
  --billboard-past-status-text: #fff;
}

/* Night Market */
body.billboard-theme-night-market
.billboard-page {
  --billboard-past-frame: #111218;
  --billboard-past-accent: #f6c453;
  --billboard-past-paper: #28252e;
  --billboard-past-status-bg: #211a27;
  --billboard-past-status-text: #fff7dc;
}

/* Past cards own their frame regardless of theme card rules. */
body.billboard-page-active
.billboard-page
.billboard-around-town
.billboard-media-card.is-past {
  position: relative;
  overflow: hidden;
  border:
    6px solid
    var(--billboard-past-frame);
  border-radius:
    clamp(
      10px,
      2vw,
      18px
    );
  background: var(--billboard-past-paper);
  box-shadow:
    inset 0 0 0 2px
      var(--billboard-past-accent),
    inset 0 0 0 6px
      var(--billboard-past-paper),
    inset 0 0 0 8px
      var(--billboard-past-frame),
    0 14px 30px
      rgb(15 23 42 / 18%);
  transform: none;
}

/* Theme Around Town chrome must not bleed into a past card. */
body.billboard-page-active
.billboard-page
.billboard-around-town
.billboard-media-card.is-past
.billboard-media-content {
  border-top: 0;
  background: var(--billboard-past-paper);
}

/* The semantic label owns its own contrast. */
body.billboard-page-active
.billboard-page
.billboard-around-town
.billboard-media-card.is-past
.billboard-past-status {
  margin: 0;
  padding:
    clamp(
      15px,
      2.5vw,
      19px
    )
    18px;
  border-bottom:
    4px double
    var(--billboard-past-accent);
  background:
    linear-gradient(
      135deg,
      var(--billboard-past-status-bg),
      color-mix(
        in srgb,
        var(--billboard-past-status-bg) 84%,
        var(--billboard-past-accent)
      )
    );
  color:
    var(--billboard-past-status-text);
  font-size:
    clamp(
      0.86rem,
      1.8vw,
      1.02rem
    );
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.045em;
  text-align: center;
  text-shadow:
    0 1px 2px
    rgb(0 0 0 / 38%);
  text-transform: uppercase;
}

/* The return cue is part of the semantic state too. */
body.billboard-page-active
.billboard-page
.billboard-around-town
.billboard-media-card.is-past
.billboard-past-followup {
  margin-top: 18px;
  padding: 14px 12px 4px;
  border-top:
    3px double
    var(--billboard-past-accent);
  color: var(--billboard-past-frame);
  font-size: 0.96rem;
  font-style: italic;
  font-weight: 850;
  line-height: 1.4;
  text-align: center;
}

body.billboard-theme-night-market
.billboard-page
.billboard-around-town
.billboard-media-card.is-past
.billboard-past-followup {
  color: #fff3c4;
}

/* Shared business-name scale contract.
   Themes retain their typography, color, weight, alignment
   and hero composition. Name length only limits scale so the
   same business receives a consistent hierarchy everywhere. */

body.billboard-page-active
.billboard-page
.billboard-hero
h1.billboard-name-medium {
  max-width: 820px;
  font-size:
    clamp(
      2.2rem,
      4.5vw,
      3.5rem
    );
  line-height: 1;
  text-wrap: balance;
}

body.billboard-page-active
.billboard-page
.billboard-hero
h1.billboard-name-long {
  max-width: 820px;
  font-size:
    clamp(
      1.9rem,
      3.8vw,
      3rem
    );
  line-height: 1.02;
  text-wrap: balance;
}

/* Boardwalk Pop keeps its deliberate split-column hero, but
   long names obey the same semantic scale discipline. */
body.billboard-theme-boardwalk-pop
.billboard-page
.billboard-hero
h1.billboard-name-medium,
body.billboard-theme-boardwalk-pop
.billboard-page
.billboard-hero
h1.billboard-name-long {
  max-width: 100%;
}

/* Customer-visible primary artwork renders in full inside a
   polished, responsive presentation stage. */
body.billboard-page-active
.billboard-page
.billboard-primary-image {
  display: flex;
  width: 100%;
  max-width: 820px;
  margin: 24px auto 0;
  padding:
    clamp(
      10px,
      2vw,
      18px
    );
  align-items: center;
  justify-content: center;
}

/* Stacked Billboard heroes use a tighter editorial rail.
   Boardwalk Pop keeps its intentional split-column desktop
   composition and therefore remains outside this contract. */
body.billboard-page-active:not(.billboard-theme-boardwalk-pop)
.billboard-page
.billboard-primary-image,
body.billboard-page-active:not(.billboard-theme-boardwalk-pop)
.billboard-page
.billboard-summary,
body.billboard-page-active:not(.billboard-theme-boardwalk-pop)
.billboard-page
.billboard-actions {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
}

body.billboard-page-active
.billboard-page
.billboard-primary-image img {
  display: block;
  width: auto;
  max-width: 100%;
  min-height: 0;
  height: auto;
  max-height:
    clamp(
      360px,
      50vw,
      520px
    );
  margin: 0 auto;
  object-fit: contain;
}

@media (width <= 640px) {
  body.billboard-page-active
  .billboard-page
  .billboard-primary-image {
    padding:
      clamp(
        8px,
        2.5vw,
        12px
      );
  }

  body.billboard-page-active
  .billboard-page
  .billboard-primary-image img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height:
      clamp(
        300px,
        68vh,
        440px
      );
  }
}

.billboard-page
.billboard-around-town
.billboard-media-grid:has(
  > .billboard-media-card:only-child
) {
  grid-template-columns: minmax(0, 1fr);
}

/* Shared premium card frame.
   Themes provide only their decorative variables below. */

.billboard-page .billboard-card {
  position: relative;
  isolation: isolate;
}

.billboard-page .billboard-card::after {
  position: absolute;
  inset: 7px;
  z-index: 0;
  border: 1px solid var(
    --billboard-flair-border,
    var(--billboard-border)
  );
  border-radius: inherit;
  background: var(
    --billboard-flair-background,
    none
  );
  content: "";
  opacity: 0.72;
  pointer-events: none;
}

.billboard-page .billboard-card > * {
  position: relative;
  z-index: 1;
}

/* Boardwalk Pop: subtle boardwalk-plank rhythm. */

body.billboard-theme-boardwalk-pop .billboard-page {
  --billboard-flair-border: rgb(219 39 119 / 42%);
  --billboard-flair-background:
    repeating-linear-gradient(
      90deg,
      transparent 0 38px,
      rgb(3 105 161 / 7%) 38px 40px
    );
}

/* Harbor Classic: rope-like diagonal linework. */

body.billboard-theme-harbor-classic .billboard-page {
  --billboard-flair-border: rgb(154 107 63 / 48%);
  --billboard-flair-background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      rgb(154 107 63 / 8%) 14px 16px
    );
}

/* Night Market: neon corner glows without obscuring copy. */

body.billboard-theme-night-market .billboard-page {
  --billboard-flair-border: rgb(246 196 83 / 52%);
  --billboard-flair-background:
    radial-gradient(
      circle at 2% 7%,
      rgb(232 121 249 / 18%) 0 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 98% 7%,
      rgb(246 196 83 / 18%) 0 8px,
      transparent 9px
    );
}

body.billboard-theme-night-market
  .billboard-published-comment {
  border-color: var(--billboard-border);
  background: var(--billboard-surface-soft);
}

/* Game Day: restrained field/scoreboard striping. */

body.billboard-theme-game-day .billboard-page {
  --billboard-flair-border: rgb(185 28 28 / 48%);
  --billboard-flair-background:
    repeating-linear-gradient(
      90deg,
      transparent 0 52px,
      rgb(185 28 28 / 7%) 52px 54px
    );
}

/* Garden Party: light botanical-dot corner texture. */

body.billboard-theme-garden-party .billboard-page {
  --billboard-flair-border: rgb(82 124 93 / 46%);
  --billboard-flair-background:
    radial-gradient(
      circle at 14px 14px,
      rgb(164 93 123 / 13%) 0 4px,
      transparent 5px
    )
    0 0 / 46px 46px repeat;
}

/* Holiday Lights: alternating decorative light points. */

body.billboard-theme-holiday-lights .billboard-page {
  --billboard-flair-border: rgb(23 76 53 / 50%);
  --billboard-flair-background:
    radial-gradient(
      circle,
      rgb(165 47 60 / 42%) 0 2px,
      transparent 3px
    )
    0 0 / 26px 12px repeat-x,
    radial-gradient(
      circle,
      rgb(23 76 53 / 38%) 0 2px,
      transparent 3px
    )
    13px 6px / 26px 12px repeat-x;
}

/* Clean Modern: architectural accent line. */

body.billboard-theme-clean-modern .billboard-page {
  --billboard-flair-border: rgb(79 70 229 / 34%);
  --billboard-flair-background:
    linear-gradient(
      90deg,
      rgb(79 70 229 / 8%),
      transparent 24%,
      transparent 76%,
      rgb(79 70 229 / 8%)
    );
}

@media (width <= 640px) {
  .billboard-page .billboard-section-label,
  .billboard-page .community-feedback-heading .billboard-section-label {
    font-size: 0.92rem;
  }
}