/* ============================================================
   Hammerspace docs platform — landing + category pages.
   Linked by the `home` layout (supplemental-ui/layouts/home.hbs).
   ============================================================ */
.hsp *{box-sizing:border-box;margin:0;padding:0}
.hsp{--black-hole:#221C35;--teal:#4CC8EF;--teal-dark:#78D1F2;--violet:#703BE1;--indigo:#3017A1;
  --ink:#221C35;--muted:#5b5478;--line:#e6e2f0;--bg-tint:#f6f4fb;--maxw:1180px;--radius:14px;
  font-family:Roboto,-apple-system,Segoe UI,sans-serif;color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
.hsp h1,.hsp h2,.hsp h3{font-family:'Montserrat',sans-serif}
.hsp a{text-decoration:none;color:inherit}

/* top nav */
.hsp .topbar{background:#000}
.hsp .topbar-inner{max-width:var(--maxw);margin:0 auto;height:74px;display:flex;align-items:center;gap:30px;padding:0 28px}
.hsp .brand{display:flex;align-items:center;gap:12px}
.hsp .brand .mark{display:flex;align-items:center;color:#fff;height:34px}
.hsp .brand .mark svg{height:30px;width:auto;display:block;fill:currentColor}
.hsp .brand .txt{color:#fff;font-family:'Montserrat';font-weight:700;line-height:1.05;font-size:13px;letter-spacing:.03em}
.hsp .brand .txt small{display:block;color:#b9b2d8;font-weight:600;font-size:11px;letter-spacing:.14em}
.hsp .topnav{display:flex;gap:26px;margin-left:14px}
.hsp .topnav a{color:#e9e6f6;font-family:'Montserrat';font-weight:600;font-size:14.5px;padding-bottom:3px}
.hsp .topnav a.cur{color:#fff;border-bottom:2px solid var(--teal)}
.hsp .topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.hsp .ghost{color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:8px 16px;font-family:'Montserrat';font-weight:600;font-size:13.5px}
/* All Hammerspace launcher (header, right) */
.hsp .allhs{position:relative}
.hsp .allhs>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:8px 14px;font-family:'Montserrat';font-weight:600;font-size:13.5px;white-space:nowrap}
.hsp .allhs>summary::-webkit-details-marker{display:none}
.hsp .allhs>summary::after{content:'';width:.42em;height:.42em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-2px 0 0 2px}
.hsp .allhs[open]>summary{background:rgba(255,255,255,.10)}
.hsp .allhs-grid{width:15px;height:15px;fill:currentColor;flex:none}
.hsp .allhs-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:236px;background:#fff;border-radius:10px;box-shadow:0 14px 36px rgba(10,6,30,.28);padding:6px;z-index:40}
.hsp .allhs-menu a{display:block;padding:10px 14px;border-radius:7px;color:var(--ink);font-family:'Montserrat';font-weight:600;font-size:14px;white-space:nowrap}
.hsp .allhs-menu a:hover{background:#eaf7fd;color:#390BA2}


/* hero (full = landing; compact = category page) */
/* overflow:visible + z-index so the search results dropdown can extend past the
   hero's bottom edge and paint above the panels below (decor uses inset:0, so
   nothing spills). */
.hsp .hero{position:relative;z-index:5;overflow:visible;background:#140f28;text-align:center}
/* Landing hero: a fixed 325px band with the text block centred in it, so the
   purple area is not top-heavy (Lindsie, 2026-08-28). Category pages use
   .hero.compact and are deliberately excluded. */
.hsp .hero:not(.compact){min-height:325px;display:flex;flex-direction:column;justify-content:center}
/* On desktop the landing title fits one line inside the wider band, which is
   what lets the 325px hero hold its text comfortably centred. Narrower
   viewports still wrap normally — no nowrap, so nothing can overflow. */
@media (min-width:1024px){.hsp .hero:not(.compact) .hero-inner{max-width:1100px}}
.hsp .hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 480px at 75% -8%,rgba(112,59,225,.45),transparent 60%),
  radial-gradient(760px 520px at 12% 110%,rgba(76,200,239,.30),transparent 55%),
  radial-gradient(620px 460px at 50% 40%,rgba(48,23,161,.40),transparent 70%)}
.hsp .hero::after{content:"";position:absolute;inset:0;opacity:.6;background-image:
  radial-gradient(1.5px 1.5px at 18% 30%,#fff,transparent),radial-gradient(1.2px 1.2px at 62% 22%,#cfc8f0,transparent),
  radial-gradient(1.6px 1.6px at 82% 58%,#fff,transparent),radial-gradient(1px 1px at 40% 72%,#a9e2f5,transparent),
  radial-gradient(1.3px 1.3px at 55% 88%,#fff,transparent),radial-gradient(1px 1px at 90% 35%,#fff,transparent)}
.hsp .hero-inner{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:24px}
/* Desktop: force "Product Documentation" onto its own single line under
   "Hammerspace". The space in the markup stays, so on tablet/phone (where
   the title font hits its clamp floor) the .l2 span reverts to inline and
   the title wraps naturally instead of overflowing. */
/* .l2 forced a second line for the old, longer "Hammerspace Product
   Documentation" title. The shortened title fits one line, so the rule now only
   applies where a page still uses .l2. */
@media (min-width:1024px){.hsp .hero h1 .l2{display:block;white-space:nowrap}}
.hsp .hero.compact .hero-inner{padding:42px 24px 46px}
.hsp .hero h1{color:#fff;font-weight:800;font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.01em;line-height:1.1}
.hsp .hero.compact h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.hsp .hero p{color:rgba(233,230,246,.82);font-family:'Montserrat',sans-serif;font-weight:500;font-size:1.12rem;margin:16px auto 30px;max-width:660px}
.hsp .hero.compact p{margin:10px auto 0}
/* ── Landing hero — HOME PAGE ONLY (Lindsie, 2026-08-31, scope confirmed 2026-09-01)
   A 300px band with the text block centred in it, roomier padding and a larger
   title. Category pages keep the standard .hero.compact band above and are
   deliberately excluded, so this must stay pinned to .home. The title size is a
   clamp ceiling, not a fixed value, so narrow screens still shrink it. */
.hsp .hero.compact.home{min-height:300px;display:flex;flex-direction:column;justify-content:center}
.hsp .hero.compact.home .hero-inner{padding:60px 24px 46px}
.hsp .hero.compact.home h1{font-size:clamp(1.8rem,4vw,2.85rem);line-height:1.15;padding-bottom:15px}
.hsp .hero.compact.home p{max-width:665px}
/* Phones: guarantee the hero title always fits on screen -- no sideways
   scroll to read it. The floor is well clear of the longest single word
   in the title ("Documentation"), checked down to a 300px-wide screen.
   Padding and paragraph spacing are tightened to match feedback that the
   phone layout had more breathing room than it needed; the numbers match
   the "Most Requested Topics" panel below for consistency. Same treatment
   for the compact hero (category pages) for the same reason, even though
   it wasn't the one reported -- it uses the same clamp() pattern and
   deserves the same guarantee.  (2026-08 mobile audit, round 3) */
@media (max-width:700px){
  .hsp .hero:not(.compact){min-height:0}
  .hsp .hero-inner{padding:34px 24px 30px}
  .hsp .hero h1{font-size:clamp(1.7rem,7vw,2.4rem)}
  .hsp .hero p{margin:12px auto 20px}
  .hsp .hero.compact .hero-inner{padding:34px 24px 30px}
  .hsp .hero.compact h1{font-size:clamp(1.5rem,6vw,2rem)}
  .hsp .hero.compact.home{min-height:0}
  .hsp .hero.compact.home .hero-inner{padding:34px 24px 30px}
  .hsp .hero.compact.home h1{font-size:clamp(1.5rem,6vw,2rem)}
}
.hsp .hero .eyebrow{font-family:'Montserrat';font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.hsp .searchbar{position:relative;display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:15px 20px;
  max-width:600px;margin:0 auto;box-shadow:0 12px 40px rgba(10,6,30,.4)}
/* the lunr search dropdown is appended into .searchbar; anchor it to the bar */
.hsp .searchbar .search-result-dropdown-menu{top:calc(100% + 10px)}
.hsp .searchbar input{border:0;outline:0;flex:1;font-size:16px;font-family:Roboto;color:#221C35}
.hsp .hero-strip{position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(to right,#390BA2 0%,#4CC8EF 100%)}

/* intro + back link */
.hsp .intro{max-width:830px;margin:0 auto;padding:52px 24px 6px;text-align:center}
.hsp .intro h2{font-size:1.6rem;font-weight:800;margin-bottom:12px}
.hsp .intro p{color:var(--muted);font-size:1.04rem}
.hsp .backbar{display:none}
.hsp .backlink{font-family:'Montserrat';font-weight:600;font-size:.9rem;color:var(--indigo)}
.hsp .backlink:hover{color:var(--violet)}

/* overview: four big category cards */
.hsp .cat-cards{max-width:var(--maxw);margin:0 auto;padding:40px 24px 56px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.hsp .catcard{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:26px 28px;transition:.16s}
.hsp .catcard:hover{border-color:var(--teal);box-shadow:0 14px 32px rgba(76,200,239,.16);transform:translateY(-3px)}
.hsp .ico svg{width:58%;height:58%;display:block}
.hsp .catcard .ico{flex:none;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff}
.hsp .catcard.sfg .ico{background:linear-gradient(135deg,var(--teal),var(--indigo))}
.hsp .catcard.compliance .ico{background:linear-gradient(135deg,var(--violet),#9a6bf0)}
/* display:block guards against Antora site.css `.body{display:flex}` (min-width:1024px), which collides with the card text wrapper */
.hsp .catcard .body{display:block;flex:1;min-width:0}
.hsp .catcard h3{font-size:1.22rem;font-weight:800;margin-bottom:6px;overflow-wrap:normal}
.hsp .catcard p{color:var(--muted);font-size:.94rem}
.hsp .catcard .view{display:inline-flex;align-items:center;gap:7px;margin-top:16px;background:var(--teal);color:#000;cursor:pointer;line-height:1.1;
  font-family:'Montserrat';font-weight:700;font-size:.84rem;border-radius:100px;padding:9px 17px}
.hsp .catcard:hover .view{background:var(--teal-dark)}

/* category pages: sections + guide cards */
.hsp section.cat{padding:30px 24px 46px}
.hsp section.cat .wrap{max-width:var(--maxw);margin:0 auto}
.hsp .cat-sub{color:var(--muted);font-size:1rem;margin:0 auto 26px;max-width:760px;text-align:center}
.hsp .subhead{font-family:'Montserrat';font-weight:700;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:8px 0 12px;max-width:var(--maxw)}
.hsp .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.hsp .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;transition:.16s;position:relative}
.hsp .card:hover{border-color:var(--teal);box-shadow:0 12px 28px rgba(76,200,239,.16);transform:translateY(-3px)}
.hsp .card-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.hsp .card .ico{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font-size:22px;margin-bottom:14px;background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff}
.hsp .card.sfg .ico{background:linear-gradient(135deg,var(--teal),var(--indigo))}
.hsp .card.compliance .ico{background:linear-gradient(135deg,var(--violet),#9a6bf0)}
.hsp .card h3{font-size:1.1rem;font-weight:700;margin-bottom:7px;line-height:1.25;overflow-wrap:normal}
.hsp .card p{color:var(--muted);font-size:.9rem;flex:1}
.hsp .card .view{margin-top:16px;align-self:flex-start;background:var(--teal);color:#000;cursor:pointer;line-height:1.1;font-family:'Montserrat';font-weight:700;font-size:.82rem;border-radius:100px;padding:8px 16px;display:inline-flex;align-items:center;gap:7px}
.hsp .card:hover .view{background:var(--teal-dark)}
/* real per-card version picker (details/summary, no JS) */
.hsp .card .ver{position:absolute;top:14px;right:14px;z-index:2}
.hsp .card .ver>summary{list-style:none;cursor:pointer;font-family:'Montserrat';font-weight:600;font-size:.72rem;color:var(--indigo);background:#ede9fb;border:1px solid #ddd4f5;border-radius:999px;padding:3px 9px}
.hsp .card .ver>summary::-webkit-details-marker{display:none}
.hsp .card .ver[open]>summary{background:var(--indigo);color:#fff}
.hsp .card .ver .ver-menu{position:absolute;right:0;top:28px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(10,6,30,.16);padding:4px;min-width:68px}
.hsp .card .ver .ver-menu a{display:block;padding:6px 12px;border-radius:6px;font-family:'Montserrat';font-weight:600;font-size:.8rem;color:var(--ink)}
.hsp .card .ver .ver-menu a:hover{background:#f3f0fb;color:var(--violet)}
.hsp .card.soon{opacity:.62}
.hsp .card.soon:hover{transform:none;border-color:var(--line);box-shadow:none}
.hsp .badge-soon{position:absolute;top:16px;right:16px;font-family:'Montserrat';font-weight:600;font-size:.72rem;color:#6b6b6b;background:#eee;border:1px solid #e1e1e1;border-radius:999px;padding:3px 9px}

/* footer */
.hsp footer{background:#000;color:#b9b2d8;margin-top:10px}
.hsp .foot{max-width:var(--maxw);margin:0 auto;padding:34px 28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:.88rem}
.hsp .foot a{color:#cfc8f0}

@media(max-width:860px){.hsp .cat-cards{grid-template-columns:1fr}.hsp .catcard{flex-direction:column;padding:22px 24px}}
@media(max-width:760px){.hsp .topnav,.hsp .ghost{display:none}.hsp .grid{grid-template-columns:1fr}}

/* ── Landing header alignment (match the guide-page chrome) ──────────────────
   Single-line nav labels + icon-only "All Hammerspace" launcher, so the front
   page matches header-content.hbs. */
.topbar-inner { gap: 22px; }
.topnav { gap: 20px; margin-left: 10px; }
.topnav a { white-space: nowrap; font-size: 13.5px; }
.topbar .allhs > summary { font-size: 0; gap: 0; padding: 8px 10px; }   /* font-size:0 hides the label + caret; the grid svg keeps its fixed size */
.topbar .allhs > summary::after { display: none; }

/* ── Summary + tile text in Montserrat (Lindsie, 2026-08-31) ────────────────
   Card, panel and intro paragraphs only. The body text of guides and Knowledge
   Base articles stays Roboto — that rule lives in hammerspace.css. */
.hsp .catcard p,
.hsp .card p,
.hsp .htpanel p,
.hsp .intro p,
.hsp .ht-head p,
.hsp .cat-sub{font-family:'Montserrat',sans-serif}

/* ==== Most Requested Topics carousel (home page) ==== */
.hsp .hot-topics{background:var(--bg-tint);border-bottom:1px solid var(--line)}
.hsp .ht-inner{max-width:var(--maxw);margin:0 auto;padding:34px 24px 34px}
.hsp .ht-head{text-align:center;max-width:760px;margin:0 auto 26px}
.hsp .ht-head h2{font-size:1.6rem;font-weight:800;margin:6px 0 10px}
.hsp .ht-head p{color:var(--muted);font-size:1.02rem}
.hsp .ht-carousel{max-width:900px;margin:0 auto}
.hsp .ht-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.hsp .ht-track::-webkit-scrollbar{display:none}
.hsp .ht-slide{flex:0 0 100%;scroll-snap-align:center;padding:4px}
.hsp .htpanel{display:flex;gap:22px;align-items:flex-start;height:100%;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 32px 26px;transition:border-color .15s,box-shadow .15s}
.hsp .htpanel:hover{border-color:var(--teal);box-shadow:0 14px 32px rgba(76,200,239,.16)}
.hsp .ht-ico{flex:none;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--indigo),var(--teal));color:#fff}
.hsp .ht-ico svg{width:28px;height:28px}
.hsp .ht-body{flex:1;min-width:0}
.hsp .htpanel h3{font-size:1.22rem;font-weight:800;margin-bottom:8px;overflow-wrap:normal}
.hsp .htpanel h3 a:hover{color:var(--indigo)}
.hsp .htpanel p{color:var(--muted);font-size:.95rem}
.hsp .ht-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hsp .ht-links a{font-family:'Montserrat';font-weight:600;font-size:.8rem;line-height:1.1;
  color:var(--indigo);background:#eaf7fd;border:1px solid transparent;border-radius:100px;padding:7px 13px;
  transition:background .15s,color .15s}
.hsp .ht-links a:hover{background:var(--teal);color:#000}
.hsp .ht-dots{display:flex;justify-content:center;gap:10px;margin-top:18px}
.hsp .ht-dot{width:10px;height:10px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:#c9c3dd;transition:background .15s,transform .15s}
.hsp .ht-dot:hover{background:var(--indigo)}
.hsp .ht-dot.active{background:var(--teal);transform:scale(1.25)}
@media(max-width:700px){.hsp .htpanel{flex-direction:column;padding:22px 20px 20px}.hsp .ht-inner{padding:34px 18px 28px}}

/* ==== Most Requested Topics carousel: prev/next arrows ==== */
.hsp .ht-carousel{position:relative}
.hsp .ht-arrow{position:absolute;top:calc(50% - 14px);transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border:none;background:transparent;padding:0;cursor:pointer;
  color:#4b4b57;display:grid;place-items:center;transition:color .15s}
.hsp .ht-arrow svg{width:30px;height:30px}
.hsp .ht-arrow:hover{color:#1f1f28}
.hsp .ht-arrow:disabled{color:#cbcbd4;cursor:default}
.hsp .ht-prev{left:-58px}
.hsp .ht-next{right:-58px}
@media(max-width:1080px){
  .hsp .ht-prev{left:-6px}.hsp .ht-next{right:-6px}
  .hsp .ht-arrow{background:rgba(255,255,255,.85);border-radius:50%}
}

/* Small phones (< 380px) — card and topic-panel titles get one more size
   step down; hammerspace.css already stops them breaking mid-word, this
   just gives them a little more breathing room.  (2026-08 mobile audit) */
@media (max-width: 380px) {
  .hsp .catcard h3 { font-size: 1.08rem; }
  .hsp .card h3 { font-size: 1rem; }
  .hsp .htpanel h3 { font-size: 1.08rem; }
}

/* -- Fourth Review mobile round (Lindsie, 2026-09-02) -- phone-only per her own
   constraint (media query only, nothing shared/base touched, desktop untouched).
   H1 sizing is a flat 35px per her exact spec (replaces the clamp() on mobile
   only -- desktop keeps its clamp). Card/tile centering explicitly excludes the
   Knowledge Base page: its cards are a separate .kb-card class defined in
   knowledge-base.adoc's own scoped styles, never .hsp .card/.catcard, so no
   extra exclusion is needed here -- this block simply never reaches them. */
@media (max-width:700px){
  .hsp .hero h1,.hsp .hero.compact h1,.hsp .hero.compact.home h1{font-size:35px}
  .hsp .hero p{font-size:.92rem}
  .hsp .catcard{align-items:center;text-align:center}
  .hsp .catcard .ico{margin-left:auto;margin-right:auto}
  .hsp .catcard .view{align-self:center}
  .hsp .catcard p{font-size:.9rem}
  .hsp .card{align-items:center;text-align:center}
  .hsp .card .ico{margin-left:auto;margin-right:auto}
  .hsp .card .view{align-self:center}
  .hsp .card p{font-size:.9rem}
  .hsp .ht-head h2{font-size:1.4rem}
  .hsp .intro h2{font-size:1.2rem}
  .hsp .intro p{font-size:.94rem}
}

/* -- Fifth Review mobile round (Lindsie, 2026-09-03) -- same phone-only
   constraint as the Fourth Review round above: media query only, nothing
   shared/base touched, desktop untouched. */
@media (max-width:700px){
  .hsp .ht-arrow{display:none}
  .hsp .hero.compact.home h1{padding-bottom:0}
}
/* The navbar-brand mobile reflow that used to live here (Fifth Review) moved
   to hammerspace.css's shared 700px block (Sixth Review, 2026-09-08) -- this
   file only loads on the home layout, which is exactly why that reflow never
   reached content/KB pages. See hammerspace.css for the current rule. */

/* -- Seventh Review mobile round (Lindsie, 2026-09-10) -- home hero title +
   paragraph sized up further, plus the "Most Requested Topics" carousel
   paragraph sized down; all pinned to .home / .htpanel so the other four
   category pages (which share .hero.compact but not .home) are untouched. */
@media (max-width:700px){
  .hsp .hero.compact.home h1{font-size:40px;margin-top:1rem}
  .hsp .hero.compact.home p{font-size:.9rem;padding-bottom:.5rem}
  .hsp .htpanel p{font-size:.9rem}
}