/* ============================================================================
   Lifehaki — Genre pages ("tag wall" + "tag page" design system port).
   Desktop layout/spacing/colour live inline in templates/genres.php and
   templates/genre.php (an exact port of the design, same convention as the
   studio/awards pages). This file only carries what inline styles can't:
   hover/focus states, filter-pill states, and the mobile layout.
   Scoped to body.lh-ds-genres (the wall) and body.lh-ds-genre (a tag).
   ========================================================================== */

body.lh-ds-genres, body.lh-ds-genre { background: #f5f5f9; }
body.lh-ds-genres ::selection,
body.lh-ds-genre  ::selection { background: #fdc949; color: #15171c; }

.gw, .gd { font-family: 'Urbanist', system-ui, sans-serif; color: #20242b; overflow-x: hidden; }
.gw a, .gd a { text-decoration: none; }
.gw [hidden], .gd [hidden] { display: none !important; }

@keyframes lhg-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(47,143,91,.55); }
    70%  { box-shadow: 0 0 0 7px rgba(47,143,91,0); }
    100% { box-shadow: 0 0 0 0 rgba(47,143,91,0); }
}
.gw-pulse { animation: lhg-pulse 2.2s infinite; }

/* ── shared: section headings, links, buttons ─────────────────────────── */
.gw-more, .gd-more { transition: gap .16s ease; }
.gw-more:hover, .gd-more:hover { gap: 12px !important; color: #a81a20; }
.gw-btn, .gd-btn { transition: background .16s ease, transform .16s cubic-bezier(.16,1,.3,1); }
.gw-btn:hover, .gd-btn:hover { background: #a81a20 !important; transform: translateY(-2px); color: #fffdf8; }

.gw-search:focus, .gw-search2:focus { border-color: #fdc949 !important; }
.gw-search::placeholder { color: rgba(255,255,255,.45); }
.gw-search2::placeholder { color: #9aa0ab; }
.gw-search2:focus { border-color: #ca2128 !important; }

/* ── /genres: mood picker ─────────────────────────────────────────────── */
.gw-mood {
    background: #ffffff; color: #15171c; border: 1px solid #e3e3ea;
    box-shadow: 0 2px 14px rgba(21,23,40,.06);
    transition: transform .16s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background .16s ease;
}
.gw-mood:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(21,23,40,.12); }
.gw-mood .gw-mood-icon { background: #fbe6e7; color: #ca2128; }
.gw-mood.is-active {
    background: #15171c; color: #ffffff; border-color: #15171c;
    box-shadow: 0 10px 26px rgba(21,23,40,.20);
}
.gw-mood.is-active .gw-mood-icon { background: #fdc949; color: #15171c; }

/* ── /genres: curated collection cards ────────────────────────────────── */
.gw-col { transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease; }
.gw-col:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(21,23,40,.20); }
.gw-col:hover .gw-col-h { color: #fdc949; }
.gw-col-h { transition: color .16s ease; }

/* ── /genres: sort pills ──────────────────────────────────────────────── */
.gw-sort {
    height: 32px; padding: 0 16px; border: none; border-radius: 999px; cursor: pointer;
    font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 13.5px;
    background: transparent; color: #767d89;
    transition: background .12s ease, color .12s ease;
}
.gw-sort.is-active { background: #ffffff; color: #15171c; box-shadow: 0 1px 4px rgba(21,23,40,.14); }

/* ── /genres: the tag wall ────────────────────────────────────────────── */
.gw-tile { transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease; }
.gw-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(21,23,40,.22); }
.gw-tile:hover .gw-tile-name { color: #fdc949; }
.gw-tile-name { transition: color .12s ease; }

/* ── /genre/{slug}: hero ──────────────────────────────────────────────── */
.gd-crumb, .gd-sib { transition: color .14s ease, background .14s ease, border-color .14s ease; }
.gd-crumb:hover { color: #fdc949 !important; }
.gd-sib:hover { background: #fdc949; border-color: #fdc949 !important; color: #15171c !important; }

.gd-follow {
    display: inline-flex; align-items: center; justify-content: center;
    height: 48px; padding: 0 26px; border-radius: 999px; border: none; cursor: pointer;
    font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 15px;
    background: #ca2128; color: #fffdf8; box-shadow: 0 8px 22px rgba(202,33,40,.38);
    transition: transform .12s cubic-bezier(.16,1,.3,1), background .12s ease;
}
.gd-follow:hover { transform: translateY(-1px); background: #a81a20; color: #fffdf8; }
.gd-follow.is-on { background: #fdc949; color: #15171c; box-shadow: none; }
.gd-follow.is-on:hover { background: #ffd968; color: #15171c; }
.gd-follow[disabled] { opacity: .6; cursor: default; }

.gd-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    height: 48px; padding: 0 22px; border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.28); color: #ffffff;
    font-weight: 700; font-size: 15px;
    transition: border-color .12s ease, color .12s ease, transform .12s ease;
}
.gd-ghost:hover { border-color: #fdc949; color: #fdc949; transform: translateY(-1px); }

/* ── /genre/{slug}: filter bar ────────────────────────────────────────── */
.gd-sort {
    display: inline-flex; align-items: center; height: 32px; padding: 0 15px;
    border-radius: 999px; font-weight: 700; font-size: 13.5px;
    background: transparent; color: #767d89;
    transition: background .12s ease, color .12s ease;
}
.gd-sort.is-active { background: #ffffff; color: #15171c; box-shadow: 0 1px 4px rgba(21,23,40,.14); }
.gd-sort:hover { color: #15171c; }

.gd-fmt {
    display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
    border-radius: 999px; font-weight: 700; font-size: 13.5px;
    background: transparent; border: 1.5px solid #d2d3dc; color: #5b616d;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.gd-fmt:hover { border-color: #15171c; color: #15171c; }
.gd-fmt.is-active { background: #15171c; border-color: #15171c; color: #ffffff; }

/* ── /genre/{slug}: poster grid ───────────────────────────────────────── */
.gd-p-art { transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease; }
.gd-p:hover .gd-p-art { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(21,23,40,.22); }
.gd-p-callout { opacity: 0; transform: translateY(6px); transition: opacity .12s ease, transform .2s cubic-bezier(.16,1,.3,1); }
.gd-p:hover .gd-p-callout, .gd-p:focus-visible .gd-p-callout { opacity: 1; transform: translateY(0); }
/* Touch devices never hover — the caption is the only title text, so pin it. */
@media (hover: none) {
    .gd-p-callout { opacity: 1; transform: none; }
}

.gd-loadmore, .gd-page-link {
    display: inline-flex; align-items: center; justify-content: center;
    height: 50px; padding: 0 30px; border-radius: 999px;
    border: 1.5px solid #15171c; background: transparent; color: #15171c;
    font-weight: 700; font-size: 15px;
    transition: background .12s ease, color .12s ease, transform .12s ease;
}
.gd-loadmore:hover, .gd-page-link:hover { background: #15171c; color: #ffffff; transform: translateY(-1px); }
.gd-page-link { height: 42px; padding: 0 20px; font-size: 14px; }

/* ── /genre/{slug}: list cards + takes ────────────────────────────────── */
.gd-list { transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease; }
.gd-list:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(21,23,40,.18); }
.gd-list:hover .gd-list-h { color: #ca2128; }
.gd-list-h { transition: color .14s ease; }

.gd-take-body.is-masked { filter: blur(6px); user-select: none; }
.gd-reveal {
    margin-top: 12px; height: 34px; padding: 0 15px; border-radius: 999px;
    border: 1.5px solid #15171c; background: transparent; color: #15171c;
    font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 13.5px; cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.gd-reveal:hover { background: #15171c; color: #ffffff; }

/* ============================================================================
   Mobile / tablet
   ========================================================================== */
@media (max-width: 1024px) {
    .gw-hero-in, .gw-sec, .gw-bar-in,
    .gd-hero-in, .gd-sec, .gd-bar-in { padding-left: 24px !important; padding-right: 24px !important; }
    .gw-moods { grid-template-columns: repeat(2, 1fr) !important; }
    .gw-cols  { grid-template-columns: 1fr 1fr !important; }
    .gw-col   { height: 340px !important; }
    .gw-grid  { grid-template-columns: repeat(3, 1fr) !important; }
    .gd-hero-in { grid-template-columns: 1fr !important; gap: 32px !important; }
    .gd-grid  { grid-template-columns: repeat(5, 1fr) !important; }
    .gd-lists { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 720px) {
    .gw-hero-in { padding: 36px 18px 40px !important; }
    .gw-sec, .gw-bar-in { padding-left: 18px !important; padding-right: 18px !important; }
    .gw-h1 { font-size: 38px !important; }
    .gw-h2 { font-size: 27px !important; }
    .gw-hero-sub { font-size: 16px !important; }
    .gw-hero-search { flex-direction: column; align-items: stretch !important; max-width: none !important; }
    .gw-hero-search a { width: 100%; }
    /* Moods stay a grid on a phone — two compact tiles per row, icon stacked
       over the label, so the whole picker is thumb-reachable in one screen. */
    .gw-moods { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .gw-mood { flex-direction: column; align-items: flex-start !important; gap: 10px !important; padding: 13px 13px !important; border-radius: 14px !important; }
    .gw-mood .gw-mood-icon { width: 34px !important; height: 34px !important; border-radius: 9px !important; font-size: 16px !important; }
    .gw-mood span:last-child span:first-child { font-size: 14.5px !important; }
    .gw-cols  { grid-template-columns: 1fr !important; }
    .gw-col   { height: 260px !important; }
    .gw-grid  { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    /* The sticky filter bar is two rows on a phone: search, then sort. */
    .gw-bar-in { flex-wrap: wrap; gap: 10px !important; }
    .gw-bar-search { width: 100% !important; }
    .gw-sorts { margin-left: auto; }
    .gw-cta { padding: 56px 20px !important; }
    .gw-cta-h { font-size: 30px !important; }

    .gd-hero-in { padding: 30px 18px 36px !important; }
    .gd-sec, .gd-bar-in { padding-left: 18px !important; padding-right: 18px !important; }
    .gd-h1 { font-size: 44px !important; }
    .gd-h2 { font-size: 27px !important; }
    .gd-lede { font-size: 18px !important; }
    .gd-hero-actions { gap: 10px !important; }
    .gd-followline { width: 100%; }
    /* Mobile poster grid: four columns, per spec. Artwork only — the callout
       and the rating chip are unreadable at this width, so they're dropped. */
    .gd-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
    .gd-p-art { border-radius: 10px !important; }
    .gd-p-callout, .gd-p-score { display: none !important; }
    /* The bar scrolls sideways rather than wrapping into three rows. */
    .gd-bar-in { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .gd-bar-in::-webkit-scrollbar { display: none; }
    .gd-bar-in > span:last-child, .gd-divider { display: none; }
    .gd-sorts, .gd-formats { flex: 0 0 auto; }
    .gd-lists { grid-template-columns: 1fr !important; }
    .gd-takes { grid-template-columns: 1fr !important; }
    .gd-take { padding: 18px 18px !important; }
    .gd-take-body { font-size: 15.5px !important; }
    .gd-cta { padding: 56px 20px !important; }
    .gd-cta-h { font-size: 30px !important; }
    .gd-pager { flex-wrap: wrap; }
}