/* Gallery / Home page (03). Page-specific layout on top of the component library;
 * loaded via the `stylist` convention. */

/* ---- Hero ---- */
.gh-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 40px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-hairline);
}
.gh-hero__art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}
/* Faint angled comic-panel geometry + diagonal crimson hairline. */
.gh-hero__geo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(83, 74, 183, 0.18) 0 38%, transparent 38.3%),
    linear-gradient(115deg, transparent 38%, rgba(226, 75, 74, 0.9) 38.1%, transparent 38.4%),
    linear-gradient(115deg, transparent 39%, rgba(38, 33, 92, 0.22) 39.2% 100%);
}
/* heroFade — darken the lower portion so the text stays legible. */
.gh-hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10, 10, 18, 0.92) 0%,
    rgba(10, 10, 18, 0.7) 45%,
    rgba(10, 10, 18, 0.25) 100%
  );
}
.gh-hero__body {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding: 48px var(--gutter);
}
.gh-hero__title { margin: 10px 0 6px; }
.gh-hero__sub { font-size: 13px; opacity: 0.7; margin-bottom: 20px; }
.gh-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
}
.gh-hero__cta:hover { background: var(--accent); color: #fff; }

/* ---- Section header + controls ---- */
.gh-sectionhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.gh-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gh-search { position: relative; display: inline-flex; align-items: center; flex: 1 1 220px; max-width: 320px; }
.gh-search__icon { position: absolute; left: 12px; font-size: 14px; opacity: 0.45; pointer-events: none; }
.gh-search__input {
  width: 100%; background: var(--surface-2); color: inherit;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-pill);
  padding: 9px 14px 9px 32px; font-size: 13px; transition: border-color var(--motion-fast, .15s);
}
.gh-search__input::placeholder { color: inherit; opacity: 0.4; }
.gh-search__input:focus { outline: none; border-color: var(--accent); }
.gh-search__input::-webkit-search-cancel-button { filter: invert(0.6); cursor: pointer; }
.gh-sort { display: inline-flex; align-items: center; gap: 8px; }
.gh-sort__label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.4; }
/* Explicit ascending/descending toggle beside the sort-field pills. */
.gh-sortdir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; font-size: 14px; line-height: 1; cursor: pointer;
  color: rgba(255, 255, 255, 0.7); background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-pill);
  transition: all var(--motion-fast, .15s) var(--ease-out, ease);
}
.gh-sortdir:hover { color: #fff; border-color: var(--accent); }

/* ---- Category filters — one collapsed dropdown per tag kind, AND-combined ---- */
.gh-filters {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 16px;
  margin: 4px 0;
}
.gh-filter { display: inline-flex; flex-direction: column; gap: 5px; }
.gh-filter__kind {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  opacity: 0.4; white-space: nowrap;
}
.gh-filter__select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer; min-width: 160px; max-width: 100%;
  font-size: 13px; font-weight: 600; color: #fff;
  background-color: var(--surface-2);
  border: 0.5px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-pill);
  padding: 9px 34px 9px 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
  transition: border-color var(--motion-fast, .15s) var(--ease-out, ease), color var(--motion-fast, .15s) var(--ease-out, ease);
}
.gh-filter__select:hover { border-color: rgba(255, 255, 255, 0.5); }
.gh-filter__select:focus { outline: none; border-color: var(--accent); }
.gh-filter__select.is-active { color: #fff; border-color: var(--accent); }
/* Pin the option list to dark surface + white text so it stays readable regardless of the
 * platform's native popup colors. */
.gh-filter__select option { color: #fff; background-color: var(--surface-2); }
.gh-filter__clear {
  align-self: flex-end; cursor: pointer; padding: 9px 4px;
  font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.6);
  background: transparent; border: 0; text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--motion-fast, .15s) var(--ease-out, ease);
}
.gh-filter__clear:hover { color: #fff; }

/* ---- Grid + load more ---- */
.gh-grid { margin-top: 8px; }
.gh-grid > .is-hidden { display: none; }
.gh-loadmore-wrap { text-align: center; margin: 28px 0 8px; }
.gh-loadmore {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
}
.gh-loadmore:hover { background: var(--accent); color: #fff; }
.gh-count { font-size: 11px; opacity: 0.4; margin-top: 10px; text-align: center; }

/* ---- Empty / error states ---- */
.gh-state {
  text-align: center;
  padding: 64px var(--gutter);
  border: 1px dashed var(--border-hairline);
  border-radius: var(--radius-lg);
}
.gh-state__msg { opacity: 0.6; margin: 8px 0 16px; font-size: 13px; }
.gh-state__action {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
}
.gh-state__action:hover { background: var(--accent); color: #fff; }

/* R4e — categorized home rails. Each rail is a single-height horizontal strip; tiles keep the
 * canonical sizing tokens (--grid-min / --grid-gap, base.css) so they match the wrapping .cl-grid
 * everywhere else — only the flow is horizontal (one row, scroll for the rest + "See more"). */
.gh-rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gh-rail__more { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.gh-rail__more:hover { color: var(--accent-on-dark); }
.gh-rail__viewport { position: relative; }
.gh-rail__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--grid-min);   /* same tile width as .cl-grid */
  gap: var(--grid-gap);
  overflow-x: auto;
  overflow-y: hidden;                   /* keep the x-scrollbar from forcing a y-scrollbar */
  scroll-snap-type: x proximity;
  scrollbar-width: none;                /* Firefox — hide scrollbar */
  -ms-overflow-style: none;             /* old Edge/IE */
}
.gh-rail__strip > * { scroll-snap-align: start; }
.gh-rail__strip::-webkit-scrollbar { display: none; }   /* WebKit — hide scrollbar */

/* Light edge fades that signal off-screen tiles; toggled per side by home-rails.js. */
.gh-rail__viewport::before,
.gh-rail__viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 44px;
  pointer-events: none; opacity: 0; transition: opacity var(--motion-fast, .15s) ease; z-index: 1;
}
.gh-rail__viewport::before { left: 0;  background: linear-gradient(to right, var(--bg-page), transparent); }
.gh-rail__viewport::after  { right: 0; background: linear-gradient(to left,  var(--bg-page), transparent); }
.gh-rail__viewport.can-left::before  { opacity: 1; }
.gh-rail__viewport.can-right::after  { opacity: 1; }