/* ================================================================
   Hero "Explore an Industry" selector: one dropdown with all ten industries at every size (Nov 2026).
   Loaded by index.html after components.css and footer.css. home.js keeps the dropdown and the scene in step.
   ================================================================ */

/* Label on the left, dropdown on the right, on one line wherever both fit. Where they do not, the dropdown
   wraps under the label at its natural width (as wide as the longest industry name), so names are never cut short. */
.scene-ind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; min-width: 0; }
.scene-ind .ind-l { flex: none; }
/* Styled exactly like the earlier "More Industries" control: transparent over the hero blue, light outline,
   pill shape, white text and chevron. The open list keeps solid white options (below). Layout properties first. */
.scene-ind .ind-select { display: block; flex: 0 1 auto; min-width: 0; }
.scene-ind .ind-select {
  -webkit-appearance: none; appearance: none; min-height: 34px; max-width: 100%; padding: 4px 32px 4px 14px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.45); color: #fff; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  background: rgba(20,35,59,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 11px 8px;
  transition: background-color .18s, color .18s, border-color .18s;
}
.scene-ind .ind-select:hover { border-color: #fff; }
.ind-select option { color: #14233B; background: #fff; }
/* Fill: site navy at 22 % (was white at 8 %) so white text stays at least 4.98 : 1 anywhere on the hero gradient. */
/* Phones: same look, 40 px tall for an easier tap */
@media (max-width: 700px) { .scene-ind .ind-select { min-height: 40px; } }
@media (forced-colors: active) { .scene-ind .ind-select { background-image: none; padding-right: 14px; } }

/* Room under the application panel for one 34 px control row plus the "Interactive concept" row.
   (components.css sizes this for the older 32 px row: 196 / 92.) */
@media (min-width: 701px) {
  .scene { padding-bottom: 198px; }
  .scene-quote { bottom: 94px; }
}

/* ---------- Website preview colors for the six added industries ---------- */
.scene[data-industry="property"] .scene-site { background: linear-gradient(180deg, #E9F3EF 0%, #fff 46%); }
.scene[data-industry="property"] .ss-brand { color: #2E5E4E; } .scene[data-industry="property"] .ss-brand span { background: #2F6B57; } .scene[data-industry="property"] .ss-h { color: #15342B; } .scene[data-industry="property"] .ss-l, .scene[data-industry="property"] .ss-cap { color: #4F6A62; }
.scene[data-industry="property"] .ss-opts button { border-color: #C4DDD3; color: #15342B; } .scene[data-industry="property"] .ss-opts button:hover { border-color: #2F6B57; } .scene[data-industry="property"] .ss-opts button[aria-pressed="true"] { background: #2F6B57; border-color: #2F6B57; color: #fff; }

.scene[data-industry="hospitality"] .scene-site { background: linear-gradient(180deg, #FBEEE9 0%, #fff 46%); }
.scene[data-industry="hospitality"] .ss-brand { color: #6B2416; } .scene[data-industry="hospitality"] .ss-brand span { background: #A63C2A; } .scene[data-industry="hospitality"] .ss-h { color: #3A140C; } .scene[data-industry="hospitality"] .ss-l, .scene[data-industry="hospitality"] .ss-cap { color: #7A5248; }
.scene[data-industry="hospitality"] .ss-opts button { border-color: #EBCFC6; color: #3A140C; } .scene[data-industry="hospitality"] .ss-opts button:hover { border-color: #A63C2A; } .scene[data-industry="hospitality"] .ss-opts button[aria-pressed="true"] { background: #A63C2A; border-color: #A63C2A; color: #fff; }

.scene[data-industry="retail"] .scene-site { background: linear-gradient(180deg, #EEEDFB 0%, #fff 46%); }
.scene[data-industry="retail"] .ss-brand { color: #2E2A73; } .scene[data-industry="retail"] .ss-brand span { background: #4A43A6; } .scene[data-industry="retail"] .ss-h { color: #1C1A47; } .scene[data-industry="retail"] .ss-l, .scene[data-industry="retail"] .ss-cap { color: #5C5A86; }
.scene[data-industry="retail"] .ss-opts button { border-color: #D3D1F0; color: #1C1A47; } .scene[data-industry="retail"] .ss-opts button:hover { border-color: #4A43A6; } .scene[data-industry="retail"] .ss-opts button[aria-pressed="true"] { background: #4A43A6; border-color: #4A43A6; color: #fff; }

.scene[data-industry="wellness"] .scene-site { background: linear-gradient(180deg, #EEF4EC 0%, #fff 46%); }
.scene[data-industry="wellness"] .ss-brand { color: #33533C; } .scene[data-industry="wellness"] .ss-brand span { background: #4F7A5A; } .scene[data-industry="wellness"] .ss-h { color: #1D3123; } .scene[data-industry="wellness"] .ss-l, .scene[data-industry="wellness"] .ss-cap { color: #5B6E5F; }
.scene[data-industry="wellness"] .ss-opts button { border-color: #CFE0D1; color: #1D3123; } .scene[data-industry="wellness"] .ss-opts button:hover { border-color: #4F7A5A; } .scene[data-industry="wellness"] .ss-opts button[aria-pressed="true"] { background: #4F7A5A; border-color: #4F7A5A; color: #fff; }

.scene[data-industry="auto"] .scene-site { background: linear-gradient(180deg, #F0F1F4 0%, #fff 46%); }
.scene[data-industry="auto"] .ss-brand { color: #2B2F36; } .scene[data-industry="auto"] .ss-brand span { background: #B3261E; } .scene[data-industry="auto"] .ss-h { color: #15181D; } .scene[data-industry="auto"] .ss-l, .scene[data-industry="auto"] .ss-cap { color: #5A6170; }
.scene[data-industry="auto"] .ss-opts button { border-color: #D5D9E0; color: #15181D; } .scene[data-industry="auto"] .ss-opts button:hover { border-color: #B3261E; } .scene[data-industry="auto"] .ss-opts button[aria-pressed="true"] { background: #B3261E; border-color: #B3261E; color: #fff; }

.scene[data-industry="education"] .scene-site { background: linear-gradient(180deg, #EAF0FA 0%, #fff 46%); }
.scene[data-industry="education"] .ss-brand { color: #1F3F73; } .scene[data-industry="education"] .ss-brand span { background: #2E5FA8; } .scene[data-industry="education"] .ss-h { color: #10264A; } .scene[data-industry="education"] .ss-l, .scene[data-industry="education"] .ss-cap { color: #50627F; }
.scene[data-industry="education"] .ss-opts button { border-color: #C9D6EC; color: #10264A; } .scene[data-industry="education"] .ss-opts button:hover { border-color: #2E5FA8; } .scene[data-industry="education"] .ss-opts button[aria-pressed="true"] { background: #2E5FA8; border-color: #2E5FA8; color: #fff; }

/* Overlay title and status: status sits under the title so longer titles never wrap beside it */
.sq-k { flex-direction: column; align-items: flex-start; gap: 6px; }
/* Same title height for every industry, so the application layer does not jump between examples */
@media (min-width: 701px) { .sa-h { min-height: 2.3em; } }