/* ==========================================================================
   Bento-grid layout for the Community Profile widget
   Generic structure + effects only. Client-specific colours (nav buttons)
   live in custom2.css.

   TYPOGRAPHY IS LOCKED. On the /embed page custom2.css is re-included AFTER
   this file (see mod_page_embed_widget.R), so client font rules would normally
   leak into the widget. To keep the bento design consistent across every client
   without per-client testing, all bento font properties (font-family, -size,
   -weight, letter-spacing, …) are declared here with `!important` and always win
   over custom2.css. Override contract for clients (in custom2.css):
     • Rebrand the face        →  .bento-widget { --bento-font-family: <stack>; }
                                   (no !important — overrides the variable below)
     • Any other font override →  bento-prefixed rule WITH !important
                                   (wins because custom2.css loads after this file)
   Non-font overrides (e.g. nav-button colours) need no !important, as before.
   ========================================================================== */

.bento-widget {
  position: relative;            /* positioning context for expanded cards */
  width: 100%;
  min-height: 560px;
  --bento-gap: 14px;
  --bento-radius: 16px;
  --bento-pad: 18px;
  --bento-font-family: din-2014, Arial, sans-serif;  /* CityViz face; client rebrand hook */
}

/* Typography lock — bento always uses the CityViz face, never the client's
   body/brand font. Excludes chart SVG text so plotly keeps its own (Roboto)
   font set inline on its <text> nodes. Clients rebrand by overriding
   --bento-font-family on .bento-widget in custom2.css (no !important needed). */
.bento-widget,
.bento-widget :not(svg):not(svg *) {
  font-family: var(--bento-font-family) !important;
}

/* The widget embeds bslib internals (navset_card_tab → .card-header /
   .bslib-navs-card-title / .nav-link; bslib::value_box → .bslib-value-box) that
   carry generic Bootstrap class names. Client custom2.css rules target those
   hooks directly — e.g. `.card-header { text-transform: uppercase; letter-spacing }`
   and `.value-box-showcase { font-size; font-weight }` — and (unlike bento's own
   .bento-* classes) they would leak in. Re-assert neutral, inheriting values here
   so these internals match the bento design on every client. */
.bento-widget .card-header,
.bento-widget .bslib-navs-card-title,
.bento-widget .nav-link,
.bento-widget .bslib-value-box .value-box-title,
.bento-widget .bslib-value-box .value-box-value,
.bento-widget .bslib-value-box .value-box-showcase {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Interpretation prose is rendered HTML (p / a / strong / li). Pin its size to the
   .bento-interp-text scale and strip any inherited client transform/spacing, so a
   client `p { font-size }` / `a { letter-spacing }` can't reshape the copy. */
.bento-interp a,
.bento-interp p,
.bento-interp strong,
.bento-interp li {
  font-size: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Only the active topic is visible; the rest stay mounted (charts keep state) */
.bento-widget .bento-topic {
  display: none;
}
.bento-widget .bento-topic.is-active {
  display: block;
}

/* Three proportional columns (mirrors the mock proportions) */
.bento-grid {
  display: flex;
  gap: var(--bento-gap);
  /* A DEFINITE height (not height:100% against an auto-height .bento-topic, which
     collapses to content height) so the whole flex chain resolves top-down: every
     column and chart fills this height, and no per-topic content can change the
     grid height. This is what actually stops the topic-to-topic bounce. */
  height: 560px;
  align-items: stretch;
}

.bento-col {
  display: flex;
  flex-direction: column;
  gap: var(--bento-gap);
  min-width: 0;
}

.bento-col-values-wrap { flex: 0 0 14%; min-height: 0; }
.bento-col-main        { flex: 1 1 50%; min-height: 0; }
.bento-col-side        { flex: 1 1 36%; min-height: 0; }

/* --------------------------------------------------------------------------
   Column 1 — unified value-box card (grows) over a separate search pill
   -------------------------------------------------------------------------- */
.bento-col-values {
  flex: 1 1 auto;            /* fill column 1 above the search pill */
  min-height: 0;            /* don't let the value boxes grow the grid past its baseline */
  background: #E8E8E8;
  border-radius: var(--bento-radius);
  padding: var(--bento-pad);
  gap: var(--bento-pad);
}

.bento-vbox {
  flex: 1 1 0;
  min-height: 0;            /* share the column height; never drive it (prevents topic-to-topic bounce) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
}
.bento-vbox + .bento-vbox {
  padding-top: var(--bento-pad);
}
.bento-vbox-icon {
  font-size: 1.6rem !important;
  /*color: var(--cv-brand-color, #3E4C59);*/
  color: #afafaf;
  opacity: 0.85;
}
.bento-vbox-value {
  font-size: 2rem !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  color: #1f2933;
}
.bento-vbox-label {
  font-size: 0.78rem !important;
  color: #52606d;
  line-height: 1.2 !important;
}

/* --------------------------------------------------------------------------
   Column 2 — hero card (grow) over the topic-nav row (fixed)
   -------------------------------------------------------------------------- */
.bento-main-hero {
  flex: 1 1 auto;
  min-height: 0;
}

.bento-nav {
  flex: 0 0 118px;
  display: flex;
  gap: var(--bento-gap);
}
.bento-nav-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--bento-radius);
  padding: 10px 6px;
  cursor: pointer;
  font-size: 14px !important;
  color: #ffffff;
  background: #7B8794;            /* fallback; per-topic colours in custom2.css */
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  opacity: 0.82;
}
.bento-nav-btn:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.bento-nav-btn.is-active {
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(31, 41, 51, 0.18) inset;
}
.bento-nav-icon { font-size: 1.4rem !important; }
.bento-nav-label {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  text-align: center;
  line-height: 1.1 !important;
}

/* --------------------------------------------------------------------------
   Column 3 — one card (grow) over a row of two cards
   -------------------------------------------------------------------------- */
.bento-side-top {
  flex: 1.1 1 0;
  min-height: 0;
}
/* Top card in column 3: instead of frosted glass, a fully-opaque photo covers
   the card content. The heading still sits above it; clicking expands the card
   (the overlay is hidden in the expanded state, revealing the content). */
.bento-topic[data-topic="demographics"] .bento-side-top .bento-card .bento-card-frost::after {
  background: url("../img/bento-heading-bg-demographic.png") center / cover no-repeat;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.bento-topic[data-topic="workforce"] .bento-side-top .bento-card .bento-card-frost::after {
  background: url("../img/bento-heading-bg-workforce.png") center / cover no-repeat;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.bento-topic[data-topic="family"] .bento-side-top .bento-card .bento-card-frost::after {
  background: url("../img/bento-heading-bg-family.png") center / cover no-repeat;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.bento-topic[data-topic="housing"] .bento-side-top .bento-card .bento-card-frost::after {
  background: url("../img/bento-heading-bg-housing.png") center / cover no-repeat;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.bento-topic[data-topic="commute"] .bento-side-top .bento-card .bento-card-frost::after {
  background: url("../img/bento-heading-bg-commute.png") center / cover no-repeat;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Semi-transparent white plate behind the heading so it reads over the photo */
.bento-side-top .bento-card .bento-card-heading {
  background: rgba(255, 255, 255, 0.7);
}
.bento-side-bottom {
  flex: 1 1 0;
  display: flex;
  gap: var(--bento-gap);
  min-height: 0;
}
.bento-side-cell {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   Bento cards + frosted glass
   -------------------------------------------------------------------------- */
.bento-card {
  position: relative;
  height: 100%;
  border-radius: var(--bento-radius);
  overflow: hidden;
  background: #ffffff;
  cursor: pointer;
}

/* The actual card content (navset + chart) lives here */
.bento-card-frost {
  position: relative;
  height: 100%;
}
.bento-card-frost .bslib-card,
.bento-card-frost .card {
  height: 100% !important;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 15px;
}

/* Frost overlay sits ON TOP of the content and blurs it */
.bento-card-frost::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(155, 155, 155, 0.15);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: backdrop-filter 0.2s ease, background 0.2s ease;
}
/* Hero card: much lighter frost so it stays readable */
.bento-card--hero .bento-card-frost::after {
  background: rgba(205, 205, 205, 0.6);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

/* Heading hint sits ABOVE the frost, anchored to the BOTTOM of the card */
.bento-card-heading {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 18px 18px 33px 33px;
  pointer-events: none;
}
.bento-card-heading-primary {
  font-size: 1.9rem !important;
  font-weight: 800 !important;
  color: #1f2933;
  line-height: 1.1 !important;
}
.bento-card--frosted .bento-card-heading-primary {
  font-size: 1.7rem !important;
}
.bento-card-heading-secondary {
  margin-top: 4px;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #3E4C59;
  opacity: 0.85;
}

/* Hover "twitch" hint that the card is interactive */
@keyframes bento-twitch {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.012) rotate(-0.3deg); }
  60%  { transform: scale(1.012) rotate(0.3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.bento-card:not(.bento-expanded):hover {
  animation: bento-twitch 0.4s ease;
  box-shadow: 0 8px 24px rgba(31, 41, 51, 0.18);
}

/* --------------------------------------------------------------------------
   Expanded state — fills the widget area only
   -------------------------------------------------------------------------- */
.bento-card.bento-expanded {
  position: absolute;
  inset: 0;
  z-index: 50;
  height: auto;
  cursor: default;
  box-shadow: 0 12px 40px rgba(31, 41, 51, 0.28);
}
.bento-card.bento-expanded .bento-card-frost::after {
  display: none;            /* remove frost so content is interactive */
}
.bento-card.bento-expanded .bento-card-heading {
  display: none;            /* hide the hint; real tab pills are now visible */
}

/* Collapsed secondary cards are chart-only teasers: hide the information column
   so the frosted chart fills the card and every box keeps a constant height.
   The hero keeps its interpretation visible (lighter frost, readable). On expand
   the column is revealed automatically (the :not(.bento-expanded) stops matching). */
.bento-card--frosted:not(.bento-expanded) .bento-interp {
  display: none;
}

/* The hero keeps a HINT of its interpretation while collapsed. Pin the prose to
   a constant few-line height (faded at the bottom) so the hero's height no
   longer depends on how long each topic's interpretation is — varying prose
   length is what still made the grid bounce. The full text shows on expand. */
.bento-card--hero:not(.bento-expanded) .bento-interp-text {
  height: 4.6em;            /* ~3 lines of the 0.85rem interp text — constant */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
          mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Expanded cards reveal the full interpretation; let it scroll if it's long. */
.bento-card.bento-expanded .bento-interp {
  overflow-y: auto;
}

.bento-close {
  display: none;
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 60;
  width: 34px;
  height: 34px;
  line-height: 30px;
  text-align: center;
  font-size: 1.5rem !important;
  border-radius: 50%;
  background: rgba(31, 41, 51, 0.08);
  color: #1f2933;
  cursor: pointer;
}
.bento-close:hover { background: rgba(31, 41, 51, 0.18); }
.bento-card.bento-expanded .bento-close { display: block; }

/* --------------------------------------------------------------------------
   Chart + interpretation split inside each panel
   -------------------------------------------------------------------------- */
.bento-panel-split {
  display: flex;
  gap: 16px;
  height: 100%;
  min-height: 0;
}
.bento-panel-chart {
  position: relative;          /* anchor for the data-table overlay */
  flex: 2 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bento-panel-chart-canvas {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Let a SINGLE chart/map fill the panel height, so it grows with the card when
   expanded. The fixed pixel height set by plotlyOutput() is overridden here.
   :only-child means KPI-gauge stacks (multiple widgets in one panel) are left
   at their fixed heights; if a panel doesn't match, it just keeps today's size. */
.bento-panel-chart-canvas > .html-widget:only-child {
  flex: 1 1 0;
  height: 100% !important;   /* beats the inline height:300px from plotlyOutput() */
  min-height: 0;
}

/* Right-hand information column: top-aligned stack of title, interpretation,
   tools, reference, and the bottom-right "Powered by CityViz" credit. */
.bento-interp {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;        /* clip an over-long interpretation; never grow the card */
  display: flex;
  flex-direction: column;
  align-self: stretch;
  font-size: 0.85rem !important;
  color: #52606d;
  line-height: 1.45 !important;
}
.bento-interp-title {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #1f2933;
  margin-bottom: 10px;
}
.bento-interp-text { margin-bottom: 14px; font-size: 16px !important; }
.bslib-card .card-body .bento-interp-text p:last-child { margin-bottom: 2rem; }

/* Tools row: "table" + "download" pill buttons */
.bento-chart-tools {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.bento-chart-tool {
  border: none;
  border-radius: 8px;
  padding: 9px 22px;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  color: #ffffff;
  background: #1f2933;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.bento-chart-tool:hover { opacity: 0.88; transform: translateY(-1px); }
.bento-chart-tool:focus-visible { outline: 2px solid #893448; outline-offset: 2px; }

/* Reference block (data source / region / period) */
.bento-interp-reference {
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
  color: #7b8794;
}
.bento-interp-reference .references p { margin-bottom: 2px; }
.bento-interp-reference .references strong { color: #52606d; }

/* Per-card credit, pushed to the bottom-right of the column */
.bento-panel-powered {
  margin-top: auto;
  padding-top: 10px;
  text-align: right;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  color: #9aa5b1;
}
.bento-panel-powered a { color: #9aa5b1; text-decoration: none; }
.bento-panel-powered a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Data-table overlay (accessible alternative to the chart)
   -------------------------------------------------------------------------- */
.bento-data-table-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}
.bento-data-table-overlay.is-open { display: block; padding-top: 25px; }
.bento-data-table-scroll {
  height: 100%;
  overflow: auto;
  padding: 8px 14px 14px;
}
.bento-table-close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 5;
  width: 30px;
  height: 30px;
  line-height: 26px;
  text-align: center;
  font-size: 1.4rem !important;
  border: none;
  border-radius: 50%;
  background: rgba(31, 41, 51, 0.08);
  color: #1f2933;
  cursor: pointer;
}
.bento-table-close:hover { background: rgba(31, 41, 51, 0.18); }

.bento-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem !important;
  color: #1f2933;
}
.bento-data-table caption {
  text-align: left;
  font-weight: 700 !important;
  padding: 4px 0 10px;
  color: #1f2933;
}
.bento-data-table th,
.bento-data-table td {
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid #e4e7eb;
  white-space: nowrap;
}
.bento-data-table thead th { border-bottom: 2px solid #cbd2d9; }
.bento-data-table th[scope="col"]:first-child,
.bento-data-table th[scope="row"],
.bento-data-table td:first-child {
  text-align: left;
}
.bento-data-table th[scope="row"] { font-weight: 600 !important; }

/* Tab pills under frost get a little breathing room below the heading */
.bento-card .bslib-navs-card-title .nav {
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Search button (bottom of the value-box column) + search card overlay
   -------------------------------------------------------------------------- */
/* Separate pill below the grey value-box card (sibling, not inside it). */
.bento-col-values-wrap .bento-search-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
  color: #ffffff;
  background: #7B8794;           /* fallback; client colour in custom2.css */
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.bento-col-values-wrap .bento-search-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.bento-search-btn-icon { font-size: 1rem !important; line-height: 1 !important; }
.bento-search-btn-label { font-size: 0.85rem !important; font-weight: 600 !important; }

/* The search card is hidden until the search button expands it. The generic
   .bento-card.bento-expanded rules above supply the absolute overlay + the
   visible close (×); we only toggle visibility and let the body scroll. */
.bento-search-card { display: none; }
.bento-search-card.bento-expanded { display: block; }
.bento-search-card .bento-search-body {
  height: 100%;
  overflow-y: auto;
  padding: 28px;
}

/* --------------------------------------------------------------------------
   "Powered by CityViz" credit — bottom-right of the widget
   -------------------------------------------------------------------------- */
.bento-powered-by {
  text-align: right;
  padding: 8px 14px 0;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  color: #9aa5b1;
}
.bento-powered-by a {
  color: #9aa5b1;
  text-decoration: none;
}
.bento-powered-by a:hover { text-decoration: underline; }