/* /brochures/ — selectable brochure downloads (page-brochures.php), built to
   the approved Brochures Page design. Cards are label-wrapped checkboxes so
   the whole page works without JavaScript; the selected state renders via
   :has(:checked) with a .is-sel class doubled in by brochures.js. All rules
   scoped under .ry-brochures. */

.ry-brochures{ padding: 20px 0 72px; background: var(--bg); }

/* Compact header: title left, intro copy beside it (wraps below on narrow). */
.ry-brochures .brp-head{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 48px; }
.ry-brochures .brp-head h1{ margin:0; font-size:clamp(2rem, 3vw, 2.6rem); font-weight:700; letter-spacing:-.01em; color:var(--heading); flex:none; }
.ry-brochures .brp-head-copy{ flex:1 1 420px; min-width:280px; }
.ry-brochures .brp-sub{ font-size:1.05rem; font-weight:500; color:var(--sauna-text); }
.ry-brochures .brp-lede{ margin:4px 0 0; font-size:.95rem; line-height:1.55; color:var(--body); max-width:720px; }

.ry-brochures .brp-empty{ margin:40px 0; font-size:1rem; color:var(--body); }
.ry-brochures .brp-empty a{ color:var(--cta); }

.ry-brochures .brp-toolbar{ display:flex; justify-content:flex-end; align-items:center; padding:4px 0 8px; }
.ry-brochures .brp-selectall{
  appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--f); font-size:.875rem; font-weight:500; color:var(--cta);
  display:flex; align-items:center; gap:6px; padding:8px 4px;
}
.ry-brochures .brp-selectall svg{ width:16px; height:16px; fill:none; stroke:var(--cta); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ry-brochures .brp-selectall:hover{ color:var(--cta-hover); }
.ry-brochures .brp-selectall:hover svg{ stroke:var(--cta-hover); }

.ry-brochures .brp-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; }

.ry-brochures .brp-card{
  position:relative; display:flex; flex-direction:column; gap:12px; cursor:pointer;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-xl);
  padding:19px; box-shadow:var(--shadow-card); transition:border-color .15s, box-shadow .15s;
}
.ry-brochures .brp-card:hover{ border-color:var(--cta); background:var(--sauna-light); }
.ry-brochures .brp-check{ position:absolute; opacity:0; pointer-events:none; }
.ry-brochures .brp-tick{
  position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%;
  background:var(--cta); display:none; align-items:center; justify-content:center;
}
.ry-brochures .brp-tick svg{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
/* Selected: light orange fill with the same single border as hover — no
   width change, so no padding compensation and no double ring. */
.ry-brochures .brp-card.is-sel,
.ry-brochures .brp-card:has(.brp-check:checked){ border-color:var(--cta); background:var(--sauna-light); }
.ry-brochures .brp-card.is-sel .brp-tick,
.ry-brochures .brp-card:has(.brp-check:checked) .brp-tick{ display:flex; }
/* Keyboard focus only — a mouse click no longer draws a second ring. */
.ry-brochures .brp-card:has(.brp-check:focus-visible){ outline:2px solid var(--cta); outline-offset:2px; }

/* Mock PDF cover — dark card with the wordmark, brochure name and a lane bar. */
.ry-brochures .brp-coverwrap{ display:flex; justify-content:center; padding:6px 0 2px; }
.ry-brochures .brp-cover{
  width:100%; max-width:168px; aspect-ratio:3/4; border-radius:var(--r-md); overflow:hidden;
  display:flex; flex-direction:column; background:var(--nav); box-shadow:var(--shadow-product);
}
.ry-brochures .brp-card--ice .brp-cover{ background:var(--ice-text); }
.ry-brochures .brp-cover-brand{ padding:14px 14px 0; color:var(--inverse); font-size:.7rem; font-weight:600; letter-spacing:1px; }
.ry-brochures .brp-cover-title{ flex:1; display:flex; align-items:flex-end; padding:14px; color:#fff; font-size:1.05rem; font-weight:700; line-height:1.2; }
.ry-brochures .brp-cover-bar{ height:44px; background:var(--sauna); }
.ry-brochures .brp-card--ice .brp-cover-bar{ background:var(--ice); }

.ry-brochures .brp-meta{ display:flex; flex-direction:column; gap:6px; }
.ry-brochures .brp-chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ry-brochures .brp-chip{
  background:var(--section-alt); color:var(--muted);
  font-size:.7rem; font-weight:500; padding:3px 9px; border-radius:var(--r-sm);
}
.ry-brochures .brp-chip--lane{ background:var(--sauna-light); color:var(--sauna-text); font-weight:600; }
.ry-brochures .brp-card--ice .brp-chip--lane{ background:var(--ice-light); color:var(--ice-text); }
.ry-brochures .brp-title{ font-size:1.05rem; font-weight:600; color:var(--heading); }
.ry-brochures .brp-size{ font-size:.76rem; color:var(--muted); }

/* Capture bar — the dark "Where should we send them?" panel, and its
   thank-you state (delivery is by email, never auto-downloads). */
.ry-brochures .brp-bar{
  margin-top:36px; background:var(--nav); border-radius:12px; padding:30px 36px;
  display:flex; align-items:center; justify-content:space-between; gap:24px 32px; flex-wrap:wrap;
}
.ry-brochures .brp-bar-h{ color:#fff; font-size:1.3rem; font-weight:700; }
.ry-brochures .brp-bar-sub{ color:rgba(255,255,255,.82); font-size:.85rem; margin-top:4px; }
.ry-brochures .brp-bar-form{ display:flex; gap:12px; flex:1 1 380px; max-width:560px; }
.ry-brochures .brp-email{
  flex:1 1 220px; min-width:0; padding:14px 16px; font-size:.95rem;
  border:1px solid var(--hairline); border-radius:8px; background:#fff; color:var(--body);
}
.ry-brochures .brp-email::placeholder{ color:var(--placeholder); }
.ry-brochures .brp-btn{
  appearance:none; -webkit-appearance:none; cursor:pointer; border:0; border-radius:8px;
  padding:14px 26px; font-family:var(--f); font-size:.95rem; font-weight:600;
  background:var(--cta); color:#fff; white-space:nowrap; transition:background .15s ease;
}
.ry-brochures .brp-btn:hover{ background:var(--cta-hover); }
.ry-brochures .brp-btn[disabled]{ opacity:.55; cursor:default; }
.ry-brochures .brp-msg{ flex-basis:100%; color:#FFB4A0; font-size:.85rem; }
.ry-brochures .brp-msg[hidden]{ display:none; }
.ry-brochures .brp-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.ry-brochures .brp-bar--done{ justify-content:flex-start; }
.ry-brochures .brp-done-ic{
  width:44px; height:44px; border-radius:50%; background:var(--special);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.ry-brochures .brp-done-ic svg{ width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.ry-brochures .brp-bar--done .brp-bar-aside{ margin-left:auto; color:rgba(255,255,255,.65); font-size:.85rem; }
.ry-brochures .brp-bar--done .brp-bar-aside a{ color:rgba(255,255,255,.85); text-decoration:underline; text-underline-offset:3px; }

/* Tablet keeps four abreast — tighter gaps and card chrome so the fluid
   covers still breathe. Mobile drops to two. */
@media (max-width:1024px){
  .ry-brochures .brp-grid{ gap:16px; }
  .ry-brochures .brp-card{ padding:14px; }
  .ry-brochures .brp-cover-title{ font-size:.88rem; padding:10px; }
  .ry-brochures .brp-cover-bar{ height:32px; }
  .ry-brochures .brp-title{ font-size:.92rem; }
}
@media (max-width:640px){
  .ry-brochures{ padding:32px 0 56px; }
  .ry-brochures .brp-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
  .ry-brochures .brp-card{ padding:13px; }
  .ry-brochures .brp-cover{ max-width:124px; }
  .ry-brochures .brp-cover-title{ font-size:.85rem; }
  .ry-brochures .brp-bar{ padding:24px 20px; }
  .ry-brochures .brp-bar-form{ flex-wrap:wrap; }
  .ry-brochures .brp-btn{ flex:1 1 auto; }
}

/* Real cover image (per-slot picker in the category admin); the generated
   cover above remains the fallback when no image is set. */
.ry-brochures .brp-cover--img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Lane sections — Saunas | Ice Baths. Stacked groups with the card grid on
   tablet and mobile; side-by-side columns of compact horizontal rows on
   desktop (>=1025px) so the email capture bar stays above the fold. */
.ry-brochures .brp-group{ padding:0; border-top:0; }  /* neutralise brand.css generic section padding/borders */
.ry-brochures .brp-group-h{ margin:0 0 12px; font-size:1.15rem; font-weight:600; color:var(--heading); }
.ry-brochures .brp-group + .brp-group{ margin-top:28px; }

@media (min-width:1025px){
  .ry-brochures .brp-cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:8px 32px; align-items:start; }
  .ry-brochures .brp-group + .brp-group{ margin-top:0; }
  .ry-brochures .brp-grid{ display:flex; flex-direction:column; gap:10px; }
  /* Row card: thumb | title | category chip | language chip. */
  .ry-brochures .brp-card{ flex-direction:row; align-items:center; gap:14px; padding:10px 44px 10px 12px; }
  .ry-brochures .brp-tick{ top:50%; right:10px; transform:translateY(-50%); width:22px; height:22px; }
  .ry-brochures .brp-tick svg{ width:12px; height:12px; }
  .ry-brochures .brp-coverwrap{ padding:0; flex:none; }
  .ry-brochures .brp-cover{ width:44px; max-width:44px; box-shadow:none; border-radius:var(--r-sm); }
  .ry-brochures .brp-cover-brand,
  .ry-brochures .brp-cover-title{ display:none; }  /* thumb-size mock: colour block + lane bar */
  .ry-brochures .brp-cover-bar{ height:10px; margin-top:auto; }
  .ry-brochures .brp-meta{ flex:1; min-width:0; flex-direction:row; align-items:center; gap:12px; }
  .ry-brochures .brp-title{ order:1; flex:1; min-width:0; font-size:.95rem; }
  .ry-brochures .brp-chips{ order:2; flex:none; flex-wrap:nowrap; }
  .ry-brochures .brp-size{ display:none; }
}