/* Homepage layout templates — Admin > Homepage > Homepage Template.
   Only ever loaded on index.html. 'default' (no attribute set) means this
   entire file matches nothing and changes nothing — the three alternate
   templates are applied by main.js's initHomepageLayout() setting
   `data-homepage-layout` on <body> and moving the existing apps/featured/
   extra sections into a new shell, never duplicating their content. */

body[data-homepage-layout] .hp-shell {
  display: grid;
  gap: 36px;
  padding: 56px 0 24px;
  align-items: start;
}

/* Directory Split and Command Rail use the exact same sidebar (see
   buildHomepageSidebar() in main.js) sitting on the same side, so they
   share one column track. Command Rail's distinguishing feature is its
   bento-sized first app card (below), not a different sidebar. Widened
   260px -> 320px (max) — category labels ("EFI & System Access") and
   Sidebar Links titles ("How to Open Apps from...") were truncating with
   ellipsis at the old width. */
body[data-homepage-layout="directory-split"] .hp-shell,
body[data-homepage-layout="command-rail"] .hp-shell {
  grid-template-columns: minmax(260px, 320px) 1fr;
}

body[data-homepage-layout="spotlight-grid"] .hp-shell {
  /* Slightly wider than Directory Split's sidebar — this one now carries
     richer content (trending items with a category badge under each name),
     so it needs a bit more breathing room to avoid title truncation.
     Widened 320px -> 360px along with the other two, same reason. */
  grid-template-columns: 1fr minmax(300px, 360px);
}

.hp-main {
  min-width: 0;
}

/* .hp-shell is itself a .container (24px horizontal padding, matching
   value-props/every other section), but the stats-banner/value-props/apps/
   featured/extra sections moved inside .hp-main each carry their OWN inner
   .container div from the static markup — left in place unmodified so
   nothing about their DOM structure changes. Left as-is, that inner
   .container would add its own 24px padding on TOP of .hp-shell's, pushing
   their content in twice as far as the sidebar and visibly misaligning
   everything from each other. Neutralized here rather than restructuring
   the moved markup, since .hp-shell's own padding is already the single
   correct source of the page's horizontal rhythm. */
body[data-homepage-layout] .hp-main > .stats-banner > .container,
body[data-homepage-layout] .hp-main > .value-props > .container,
body[data-homepage-layout] .hp-main .apps-section > .container {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* --- Sidebar (Directory Split + Spotlight Grid) --------------------------- */

.hp-sidebar {
  position: sticky;
  /* Was 100px — sat noticeably below the top of the viewport once scrolled.
     84px = the sticky top navbar's own height (72px, see .nav-inner in
     styles.css) plus a 12px gap, the minimum that still clears it without
     visually touching it. This is the right number for the 'full'/classic
     navbar style, which stays pinned at the top permanently. */
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Dock mode (currently the live navbar_style) hides the top bar entirely
   past scrollTop > 8 — `.navbar.navbar--scrolled { transform:
   translateY(-100%); opacity: 0; }` in the dock branch of
   admin_theme_css() — so once scrolled there's no persistent top navbar
   left to clear at all, and the 84px offset above was pure dead space
   above the sidebar (confirmed from a live screenshot, not guessed).
   `.dock-navbar-active` is the same body class initDockNavbar() sets in
   js/main.js for the footer-clearance fix — reused here since it already
   reliably reflects "dock mode is the active navbar style" with zero new
   JS needed. 20px matches the small resting gap other fixed UI on the
   page already uses. */
body.dock-navbar-active .hp-sidebar {
  top: 20px;
}

.hp-sidebar-title {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin: 0 0 10px;
  font-weight: 700;
}

/* Wraps a heading + its list ("Most Downloaded", "More to Read") as one
   unit, matching .hp-sidebar-categories' own structure — keeps the small
   3px gap scoped to inside the block, so .hp-sidebar's larger 22px gap only
   ever separates whole sections from each other, not a heading from its own
   content underneath it. */
.hp-sidebar-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hp-sidebar-categories {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hp-sidebar-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}

.hp-sidebar-cat:hover {
  background: var(--glass-bg-hover, rgba(127, 127, 127, 0.12));
}

.hp-sidebar-cat--active {
  background: var(--accent-gradient);
  color: #fff;
}

/* .hp-sidebar-cat:hover above only sets `background` (not `color`), but
   :hover's specificity (1 class + 1 pseudo-class) still beats
   .hp-sidebar-cat--active's plain 1-class selector on that shared
   `background` property — so hovering the active row swapped its
   accent-gradient background for the translucent glass-hover one while its
   text stayed white from --active, leaving unreadable white-on-light text.
   This selector needs 2 classes + 1 pseudo-class to outrank both.
   Site defaults to dark mode (no [data-theme] attribute); [data-theme="light"]
   is the override, matching the pattern used everywhere else in this file
   (e.g. the light-mode --navbar-glass-highlight override). glass-bg-hover
   is a translucent dark tint by default and a translucent light tint under
   [data-theme="light"] (see --glass-bg-hover in styles.css), so the
   readable text color has to flip with it: white against the dark-mode
   tint, black against the light-mode one. */
.hp-sidebar-cat--active:hover {
  color: #fff;
}

[data-theme="light"] .hp-sidebar-cat--active:hover {
  color: #000;
}

.hp-sidebar-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.hp-sidebar-cat-icon svg {
  width: 16px;
  height: 16px;
}

.hp-sidebar-cat:hover .hp-sidebar-cat-icon,
.hp-sidebar-cat--active .hp-sidebar-cat-icon {
  opacity: 1;
}

.hp-sidebar-cat-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-sidebar-cat-count {
  font-size: 0.72rem;
  opacity: 0.7;
  background: rgba(127, 127, 127, 0.16);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.hp-sidebar-cat--active .hp-sidebar-cat-count {
  background: rgba(255, 255, 255, 0.28);
  opacity: 1;
}

.hp-sidebar-trending {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hp-sidebar-trending-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.88rem;
  transition: background 0.15s ease;
}

.hp-sidebar-trending-item:hover {
  background: var(--glass-bg-hover, rgba(127, 127, 127, 0.12));
}

.hp-sidebar-trending-item img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
}

.hp-sidebar-trending-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hp-sidebar-trending-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-sidebar-trending-cat {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  opacity: 0.8;
}

/* Real site stats (same 4 numbers as the homepage Stats Banner) — sits
   right above the CTA, replacing the old "App Directory" header block that
   used to open the sidebar. 2x2 glass-tile grid rather than a plain list so
   it reads as a distinct little panel, not just more text in the column. */
.hp-sidebar-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.hp-sidebar-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--glass-bg-hover, rgba(127, 127, 127, 0.12));
  text-align: center;
}

.hp-sidebar-stat-value {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hp-sidebar-stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.hp-sidebar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 16px;
  border-radius: var(--btn-radius, 999px);
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  margin-top: auto;
  transition: transform 0.2s var(--ease-premium), filter 0.2s var(--ease-premium);
}

.hp-sidebar-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* --- Spotlight card (Spotlight Grid) ---------------------------------------- */

.hp-spotlight {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border-radius: calc(var(--radius) + 6px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  text-decoration: none;
  color: var(--text-primary);
  margin-bottom: 32px;
  transition: transform 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium);
}

.hp-spotlight:hover {
  transform: translateY(-3px);
  border-color: var(--accent-purple);
}

.hp-spotlight-media {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: rgba(127, 127, 127, 0.08);
}

.hp-spotlight-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-spotlight-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-purple);
  font-weight: 700;
  margin-bottom: 8px;
}

.hp-spotlight-copy h3 {
  margin: 0 0 8px;
  font-size: 1.6rem;
}

.hp-spotlight-copy p {
  margin: 0 0 18px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.hp-spotlight-cta {
  display: inline-flex;
}

/* --- Bento first card (Command Rail) --------------------------------------- */
/* Command Rail used to lead with a separate "Spotlight" card identical to
   Spotlight Grid's — but stacked directly under the hero, which already
   shows the same kind of promotional content, it just read as a redundant
   repeat. Removed (see main.js) in favor of giving the apps grid's own
   first card real visual weight instead: it spans a 2x2 area with a larger
   icon/title, and `grid-auto-flow: dense` lets the smaller cards that
   follow fill in the remaining cells around it rather than leaving a gap —
   a genuine bento layout built from real grid data, not a bolted-on extra
   component. */
body[data-homepage-layout="command-rail"] .hp-main .app-grid {
  grid-auto-flow: dense;
}

body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px;
  background: var(--glass-bg-hover, var(--glass-bg));
  border-color: rgba(47, 111, 237, 0.3);
}

body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child .app-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 22px;
  border-radius: var(--radius);
}

body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child h3 {
  font-size: 1.5rem;
}

body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child p {
  font-size: 1rem;
}

@media (max-width: 900px) {
  body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child {
    grid-column: span 1;
    grid-row: span 1;
    padding: 24px;
  }

  body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child .app-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
  }

  body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child h3 {
    font-size: 1.05rem;
  }

  body[data-homepage-layout="command-rail"] .hp-main .app-grid .app-card:first-child p {
    font-size: 0.9rem;
  }
}

/* --- Grid columns: match the apps grid's natural column count ------------- */
/* .hp-main is narrower than the full-width layout .app-grid's auto-fill
   sizing was designed for, so it settles on ~3 columns on its own — but
   Featured/"More to explore" default to a FIXED column count from
   Appearance settings (often 4), which doesn't shrink to match and instead
   just crams narrower cards into the same space. Overridden here (using
   .apps-section/.post-grid rather than any specific --cols-N variant, so
   it wins on specificity over whatever fixed count is configured and stays
   correct even if that setting changes later) so all three grids read as
   one consistent width throughout the sidebar layouts. */
body[data-homepage-layout] .hp-main .app-grid,
body[data-homepage-layout] .hp-main .post-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  body[data-homepage-layout] .hp-main .app-grid,
  body[data-homepage-layout] .hp-main .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body[data-homepage-layout] .hp-main .app-grid,
  body[data-homepage-layout] .hp-main .post-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Responsive: collapse to a single column ------------------------------ */

@media (max-width: 980px) {
  body[data-homepage-layout] .hp-shell {
    grid-template-columns: 1fr;
  }

  body[data-homepage-layout="spotlight-grid"] .hp-shell .hp-main {
    order: 1;
  }

  body[data-homepage-layout="spotlight-grid"] .hp-shell .hp-sidebar {
    order: 2;
  }

  .hp-sidebar {
    position: static;
    width: 100%;
  }

  .hp-spotlight {
    grid-template-columns: 1fr;
  }
}