/* Installations Archive — Builder element styles.
 *
 * Conventions (mirroring how the product detail page is set up):
 * - Sections use UIkit's built-in section styles (uk-section-primary for
 *   navy hero/footer, uk-section-default/muted for category bands).
 *   No inline backgrounds, no 100vw hacks — sections inherit tm-page
 *   max-width (1500px on desktop) like the rest of the site.
 * - Sticky on-page nav uses UIkit's `uk-sticky` directive (clones + adds
 *   a placeholder so layout doesn't jump).
 * - Inner content lives in `.uk-container.uk-container-large` for
 *   consistent gutters with the rest of the theme.
 *
 * Tm-page rule: never exceed tm-page width. The theme's `tm-page` wrapper
 * caps content at ~1500px on >=1500px viewports — anything wider would
 * disrupt the bordered "shoulders" of the design language.
 */

.lt-installations { color: #424242; }

/* The YT managed template wraps the element in:
     <section class="uk-section uk-section-primary uk-section-remove">
       <div class="uk-container">                      <-- 1280px clamp
         <div class="uk-grid uk-grid-margin">          <-- -40px gutter
           <div class="uk-width-1-1@m">                <-- 40px padding-left
             <div class="lt-installations">           <-- our wrapper
   We nullify the YT wrapping chrome inside the installations archive so
   our element renders edge-to-tm-page (1500px max) like the product page
   sections do. */
/* The "Installations Grid" YT section uses width:expand so the wrapping
   `.uk-container` becomes `.uk-container-expand` (no max-width) — this
   lets our nested category sections inside the Builder element extend
   to the full tm-page width, so their `uk-section-muted` / `default`
   backgrounds reach the page edges instead of leaving white strips.
   Hero / Stats / Footer-CTA sections use width:large which keeps their
   own `.uk-container-large` (1500px max) for natural YT padding. */
body.post-type-archive-installations main .lt-installations > section .uk-container {
  /* Inner uk-container inside our category sections keeps its standard
     YT padding so headings and cards align with the rest of the site. */
}

/* Hero + Footer-CTA button styles moved to lyntec-utilities.css as
   `.lt-btn--primary` / `.lt-btn--secondary` (global, loaded on every
   page). The original `.lt-installations__btn--*` class names are kept
   working as aliases in the same global stylesheet. */

/* 02 — Quick Facts band: slightly lighter than the hero navy so it reads
   as a separate visual layer instead of an unbroken navy mass. Per
   design spec: #0A054D. */
.lt-installations__quickfacts { background: #0A054D !important; }

/* STICKY FILTER BAR — match the product page's on-page nav: stays at
   tm-page width when fixed (NOT 100vw). UIkit's `uk-sticky` captures the
   element's natural pre-stick width and keeps it when position:fixed
   engages, so as long as the bar starts at tm-page width, it stays
   there. No CSS overrides needed beyond the visual treatment. */

/* HERO — uses uk-section-primary for navy bg (no inline styles).
   uk-light gives the section light-on-dark text by default. */
.lt-installations__hero h1 {
  font-size: clamp(40px, 5vw, 64px);
  margin: 0 0 8px;
}
.lt-installations__hero .lt-eyebrow {
  color: #7BB7FF;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 12px;
}
.lt-installations__hero .lt-installations__subhead {
  color: #7BB7FF;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 12px;
}

/* STATS — sits flush against hero; same navy bg via uk-section-primary. */
.lt-installations__stats { padding-top: 24px; padding-bottom: 36px; }
.lt-installations__stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.lt-installations__stat-label { font-size: 13px; opacity: 0.7; margin-top: 2px; }

/* STICKY FILTER BAR — uses UIkit `uk-sticky` directive on the wrapper.
   The bar itself is a uk-section-default + bottom border. */
.lt-installations__filter-shell {
  /* Empty marker so we can layer styles when uk-sticky engages. */
}
.lt-installations__filter {
  background: #fff;
  border-bottom: 1px solid #e6e6ea;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* While stuck, give the bar a small drop-shadow so it lifts visually. */
.uk-sticky-fixed .lt-installations__filter {
  box-shadow: 0 4px 12px rgba(6, 1, 61, 0.06);
}

.lt-installations__pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px 8px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lt-installations__pills::-webkit-scrollbar { display: none; }
.lt-installations__pill {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #424242;
  background: transparent;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  flex: 0 0 auto;
}
.lt-installations__pill:hover { background: #F7F7F8; color: #06013D; }
.lt-installations__pill.is-active,
.lt-installations__pill.is-active:hover { background: #06013D; color: #fff; }

/* CATEGORY SECTIONS — alternate uk-section-default / uk-section-muted
   for visual rhythm. uk-section-large would be excessive; medium fits. */
.lt-installations__category h2 {
  font-size: clamp(28px, 3vw, 40px);
  margin: 0 0 4px;
  color: #06013D;
}
.lt-installations__category-header .lt-eyebrow {
  color: #1F5D9F;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 8px;
}
.lt-installations__category-header .uk-text-meta {
  font-size: 13px;
  color: #646970;
  margin-top: 0;
}

/* CARDS */
.lt-installations__card {
  display: block;
  background: #fff;
  border: 1px solid #e6e6ea;
  border-radius: 6px;
  padding: 16px 18px 18px;
  text-decoration: none !important;
  height: 100%;
  color: inherit;
}
.lt-installations__card--linked {
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  cursor: pointer;
}
.lt-installations__card--linked:hover {
  box-shadow: 0 4px 18px rgba(6, 1, 61, 0.08);
  border-color: #c9d5e3;
  transform: translateY(-1px);
}
.uk-section-muted .lt-installations__card { background: #fff; }

/* BADGES */
.lt-installations__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.lt-installations__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #036a78;
  background: #DDF2F5;
  padding: 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  line-height: 1;
}
.lt-installations__badge--av-lighting { background: #FFE9D6; color: #8B4A12; }
.lt-installations__badge--av           { background: #E2E7FB; color: #243E9F; }
.lt-installations__badge--audio        { background: #F0E8FB; color: #5B2DA8; }
.lt-installations__badge--video        { background: #FDE5EF; color: #9C1A56; }
.lt-installations__badge--ac-control   { background: #FFF4D6; color: #7A5F00; }

.lt-installations__card-title {
  color: #06013D;
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 4px;
  line-height: 1.3;
}
.lt-installations__card-meta {
  color: #5a6068;
  font-size: 13px;
  line-height: 1.4;
}

.lt-installations__loadmore { font-weight: 600; }

/* FOOTER CTA */
.lt-installations__footer-cta h2 {
  font-size: clamp(28px, 3vw, 40px);
  margin: 0 0 8px;
  color: #fff;
}
.lt-installations__footer-cta .uk-button-text { color: #fff; }

/* SUBMIT MODAL — unchanged */
.lt-installations__dropzone {
  position: relative;
  border: 2px dashed #c9d5e3;
  border-radius: 6px;
  padding: 32px 16px;
  text-align: center;
  background: #F7F7F8;
  transition: background 0.15s, border-color 0.15s;
}
.lt-installations__dropzone input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.lt-installations__dropzone.is-drag-active { border-color: #1F5D9F; background: #EEF4FB; }
.lt-installations__dropzone-icon { display: block; font-size: 22px; color: #1F5D9F; }
.lt-installations__dropzone-msg  { display: block; margin-top: 4px; font-weight: 700; color: #06013D; }
.lt-installations__dropzone-rules { display: block; margin-top: 2px; }

.lt-installations__followup { background: #EEF4FB; border-radius: 6px; padding: 14px 16px; }
.lt-installations__followup .uk-checkbox { margin-right: 8px; }

.lt-installations__submit-actions { display: flex; justify-content: space-between; align-items: center; }
.lt-installations__submit-actions .uk-button-primary {
  background: #06013D; color: #fff; border: 0; padding: 14px 28px; border-radius: 4px;
}

.lt-installations__submit-status { font-size: 13px; margin-top: 12px; min-height: 1.4em; }
.lt-installations__submit-status.is-error   { color: #b32d2e; }
.lt-installations__submit-status.is-success { color: #1d6b3e; }