/* =========================================================
   ROOFLIGHTS — audience-led landing pages
   Two layouts share this sheet:
     .rl--domestic   → editorial / showroom
     .rl--commercial → technical / spec
   Uses the Nav.css :root design tokens (with fallbacks).
   ========================================================= */

.rl { color: var(--ink, #1a1a1a); }
.rl-container { max-width: var(--container, 1400px); margin: 0 auto; padding: 0 24px; }

/* ---------- Shared buttons ---------- */
.rl-btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 700; font-size: 0.9rem; line-height: 1;
    padding: 14px 24px; border-radius: 999px; text-decoration: none;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .18s cubic-bezier(.175,.885,.32,1.275), box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.rl-btn i { font-size: .82em; transition: transform .3s cubic-bezier(.175,.885,.32,1.275); }
.rl-btn--solid { background: var(--jb-blue, #00a9eb); color: #fff; }
.rl-btn--solid:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,169,235,.35); }
.rl-btn--solid:hover i { transform: translateX(3px); }
.rl-btn--ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(4px); }
.rl-btn--ghost-light:hover { background: #fff; color: var(--ink, #1a1a1a); }
.rl-btn--lg { padding: 17px 30px; font-size: .95rem; }

.rl-eyebrow {
    font-size: .72rem; font-weight: 800; letter-spacing: .2em;
    text-transform: uppercase; color: var(--jb-blue, #00a9eb); margin: 0 0 14px;
}
.rl-eyebrow--light { color: rgba(255,255,255,.85); }

/* =========================================================
   HERO
   ========================================================= */
.rl-hero {
    position: relative; background-size: cover; background-position: center;
    background-color: #0d1b27;  /* fallback if the image is missing */
    color: #fff; overflow: hidden;
}
.rl-hero__inner {
    max-width: var(--container, 1400px); margin: 0 auto; padding: 0 24px;
}
.rl-hero--dom .rl-hero__inner { padding-top: 120px; padding-bottom: 130px; max-width: 720px; margin-left: max(24px, calc((100% - var(--container,1400px))/2 + 24px)); }
.rl-hero--com .rl-hero__inner { padding-top: 96px;  padding-bottom: 40px; }

.rl-hero__title {
    font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 900;
    letter-spacing: -.03em; line-height: 1.02; margin: 0 0 18px;
}
.rl-hero__sub {
    font-size: clamp(1rem, 1.6vw, 1.22rem); line-height: 1.6;
    color: rgba(255,255,255,.9); max-width: 54ch; margin: 0 0 30px;
}
.rl-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* commercial stat strip pinned to hero base */
.rl-hero__stats {
    list-style: none; margin: 30px 0 0; padding: 26px 0 34px;
    border-top: 1px solid rgba(255,255,255,.18);
    max-width: var(--container, 1400px);
    display: grid; grid-template-columns: repeat(3, max-content); gap: 56px;
}
.rl-hero--com .rl-hero__stats { margin-left: auto; margin-right: auto; padding-left: 0; }
.rl-hero__stats li { display: flex; flex-direction: column; gap: 3px; }
.rl-hero__stats strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rl-hero__stats span { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.65); }

/* =========================================================
   AUDIENCE SWITCH
   ========================================================= */
.rl-switch {
    display: inline-flex; gap: 4px; margin: 30px 0 0;
    background: var(--paper-2, #f0f0f0); border: 1px solid var(--line, #e5e7eb);
    padding: 5px; border-radius: 999px;
}
.rl-switch__btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 20px; border-radius: 999px; text-decoration: none;
    font-weight: 700; font-size: .88rem; color: var(--ink-2, #4b4b4b);
    transition: background .18s ease, color .18s ease;
}
.rl-switch__btn i { font-size: .85em; }
.rl-switch__btn:hover { color: var(--jb-blue, #00a9eb); }
.rl-switch__btn.is-active { background: var(--jb-blue, #00a9eb); color: #fff; }
.rl-switch__count {
    font-size: .7rem; font-weight: 800; padding: 2px 8px; border-radius: 999px;
    background: rgba(0,0,0,.08); font-variant-numeric: tabular-nums;
}
.rl-switch__btn.is-active .rl-switch__count { background: rgba(255,255,255,.25); }

/* =========================================================
   VALUE / CREDENTIAL STRIP
   ========================================================= */
.rl-props {
    list-style: none; margin: 28px 0 8px; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.rl-props li {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; border: 1px solid var(--line, #e5e7eb);
    border-radius: 14px; background: var(--paper, #fafafa);
    font-weight: 600; font-size: .9rem; color: var(--ink, #1a1a1a);
}
.rl-props i { color: var(--jb-blue, #00a9eb); font-size: 1.1rem; width: 22px; text-align: center; }
.rl-props--com li { border-radius: 8px; }

/* =========================================================
   SECTION TITLE
   ========================================================= */
.rl-section-title {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    margin: 50px 0 22px; font-size: 1.6rem; font-weight: 800;
    letter-spacing: -.02em; scroll-margin-top: 90px;
}
.rl-section-title__count {
    font-size: .8rem; font-weight: 700; color: var(--ink-3, #64748b);
    text-transform: uppercase; letter-spacing: .08em;
}

/* =========================================================
   PRODUCT GRID
   ========================================================= */
.rl-grid { display: grid; gap: 24px; }
.rl-grid--domestic   { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.rl-grid--commercial { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }

.rl-card {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    background: var(--paper, #fff); border: 1px solid var(--line, #e5e7eb);
    border-radius: 18px; overflow: hidden;
    transition: transform .32s cubic-bezier(.175,.885,.32,1.275), box-shadow .32s ease, border-color .32s ease;
}
.rl-grid--commercial .rl-card { border-radius: 12px; }
.rl-card:hover {
    transform: translateY(-5px); border-color: var(--jb-blue, #00a9eb);
    box-shadow: 0 22px 44px rgba(15,23,42,.10);
}

.rl-card__img {
    position: relative; overflow: hidden; background: #fff;
}
.rl-grid--domestic   .rl-card__img { aspect-ratio: 4/3; }
.rl-grid--commercial .rl-card__img { aspect-ratio: 5/4; }
.rl-card__img img { width: 100%; height: 100%; object-fit: contain; padding: 1.6rem 1.2rem 0; transition: transform .5s ease; }
.rl-grid--domestic .rl-card:hover .rl-card__img img { transform: scale(1.05); }
.rl-card__ph { display: flex; height: 100%; align-items: center; justify-content: center; color: #cbd5e1; font-size: 2.6rem; }

.rl-badge {
    position: absolute; top: 12px; left: 12px;
    background: #fff; color: var(--ink, #1a1a1a);
    font-size: .6rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    padding: 6px 10px; border-radius: 4px; border-left: 3px solid var(--jb-accent, #faa329);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.rl-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.rl-card__kicker {
    font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--jb-blue, #00a9eb); margin-bottom: 8px;
}
.rl-card__title {
    font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.3;
    margin: 0 0 14px; color: var(--ink, #1a1a1a);
}
.rl-grid--domestic .rl-card__title { font-size: 1.18rem; }

/* domestic chips */
.rl-chips { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.rl-chips li {
    font-size: .74rem; font-weight: 600; color: var(--ink-2, #4b4b4b);
    background: var(--paper-2, #f4f4f7); border: 1px solid var(--line, #e5e7eb);
    padding: 5px 11px; border-radius: 999px;
}

/* commercial spec table */
.rl-spec { margin: 0 0 16px; padding: 0; border-top: 1px solid var(--line, #e5e7eb); }
.rl-spec div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.06)); }
.rl-spec dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3, #64748b); font-weight: 700; margin: 0; }
.rl-spec dd { margin: 0; font-size: .8rem; font-weight: 600; color: var(--ink, #1a1a1a); text-align: right; font-variant-numeric: tabular-nums; }

.rl-card__foot { margin-top: auto; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 14px; }
.rl-price { display: flex; flex-direction: column; line-height: 1.1; margin-right: auto; }
.rl-price__label { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--jb-blue-deep, #084278); margin-bottom: 3px; }
.rl-price__val { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; color: var(--ink, #1a1a1a); font-variant-numeric: tabular-nums; }
.rl-price__val.is-poa { font-size: 1.1rem; color: var(--jb-blue-deep, #084278); letter-spacing: .04em; }
.rl-price__vat { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3, #64748b); margin-top: 2px; }

/* Auto-applied tier discount (logged-in trade pricing) — matches the
   category grid + product page: discounted "From" price with the original
   struck through, and an understated orange line below. */
.rl-price__now { display: flex; align-items: baseline; gap: 8px; }
.rl-price__was { font-size: .9rem; font-weight: 700; color: var(--ink-3, #94a3b8); text-decoration: line-through; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; }
.rl-discount { margin-top: 5px; display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; letter-spacing: .01em; color: var(--jb-accent-deep, #d98a00); }
.rl-discount i { font-size: .7rem; opacity: .9; }

.rl-card__doc { font-size: .72rem; font-weight: 700; color: var(--ink-2, #4b4b4b); display: inline-flex; align-items: center; gap: 5px; }
.rl-card__doc i { color: #c83e30; }
.rl-card__go {
    font-size: .8rem; font-weight: 800; color: var(--jb-blue, #00a9eb);
    display: inline-flex; align-items: center; gap: 7px; transition: gap .2s ease;
}
.rl-card:hover .rl-card__go { gap: 11px; }

/* =========================================================
   EMPTY STATE
   ========================================================= */
.rl-empty {
    text-align: center; padding: 72px 24px; background: var(--paper-2, #f8f8fa);
    border: 1px dashed var(--line, #e5e7eb); border-radius: 22px;
}
.rl-empty i { font-size: 2.8rem; color: #cbd5e1; display: block; margin-bottom: 16px; }
.rl-empty h3 { font-size: 1.25rem; margin: 0 0 8px; }
.rl-empty p { color: var(--ink-3, #64748b); margin: 0 0 22px; }

/* =========================================================
   CLOSING CTA
   ========================================================= */
.rl-cta {
    margin: 64px 0 80px; padding: 48px; border-radius: 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
    background: linear-gradient(135deg, var(--jb-blue, #00a9eb), var(--jb-blue-deep, #084278)); color: #fff;
}
.rl-cta--commercial { background: linear-gradient(135deg, #16242f, #0d1b27); }
.rl-cta__text h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.rl-cta__text p { margin: 0; color: rgba(255,255,255,.85); max-width: 60ch; line-height: 1.6; }
.rl-cta .rl-btn--solid { background: #fff; color: var(--ink, #1a1a1a); }
.rl-cta .rl-btn--solid:hover { box-shadow: 0 12px 26px rgba(0,0,0,.3); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .rl-props { grid-template-columns: repeat(2, 1fr); }
    .rl-hero__stats { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .rl-hero--dom .rl-hero__inner { padding-top: 84px; padding-bottom: 90px; }
    .rl-cta { padding: 36px; }
}
@media (max-width: 560px) {
    .rl-props { grid-template-columns: 1fr 1fr; }
    .rl-switch { width: 100%; }
    .rl-switch__btn { flex: 1; justify-content: center; padding: 11px 10px; }
    .rl-hero__cta { flex-direction: column; }
    .rl-hero__cta .rl-btn { width: 100%; justify-content: center; }
}

/* =========================================================
   DARK THEME (trade) — keep parity with category.css
   ========================================================= */
[data-theme="trade"] .rl-props li,
[data-theme="trade"] .rl-card { background: var(--paper-2, #232323); border-color: var(--line, #2c2c2c); }
[data-theme="trade"] .rl-card__img { background: #fff; }   /* product shots keep a white tile */
[data-theme="trade"] .rl-card:hover { border-color: var(--jb-blue, #3aa3ce); box-shadow: 0 18px 35px rgba(0,0,0,.45); }
[data-theme="trade"] .rl-chips li { background: #1f1f1f; border-color: #2c2c2c; color: var(--ink-2, #a8a8a8); }
[data-theme="trade"] .rl-switch { background: var(--paper-2, #232323); border-color: var(--line, #2c2c2c); }
[data-theme="trade"] .rl-spec dd { color: var(--ink, #f4f4f4); }
[data-theme="trade"] .rl-empty { background: var(--paper-2, #232323); border-color: #2c2c2c; }
[data-theme="trade"] .rl-badge { color: #1a1a1a; }

/* =========================================================
   ALL view — both ranges share one track size so the cards
   line up across the Domestic and Commercial sections.
   (Single-audience pages keep their own card sizing above.)
   ========================================================= */
.rl--all .rl-grid--domestic,
.rl--all .rl-grid--commercial {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}