/* theme.css v4.7 — unified widths & tidy grid for puzzled.online */

/* --- Tokens --- */
:root{
  --content-max: 1100px;     /* shared page width */
  --gutter: 12px;            /* side padding */
  --controls-max: 820px;     /* optional width for hero controls */
  --search-max: 520px;

  --bg:#f7fafc; --panel:#fff; --border:#e5e7eb;
  --ink:#0f172a; --muted:#64748b;
  --brand:#7c3aed; --brand-2:#22c55e;

  --radius:14px; --shadow:0 8px 24px rgba(2,6,23,.08);
}

/* --- Base --- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-rounded, system-ui, "Segoe UI", Roboto, Arial, "Helvetica Neue", "Nunito", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* --- Shared content width for all major blocks --- */
header,
.hero,
.featured,
#featured,
.filters,
main.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Header */
header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block:16px;
}
.brand{display:flex; align-items:center; gap:12px}
.brand .title{font-weight:800;font-size:22px;line-height:1.1;letter-spacing:-.01em}
.brand img{display:block}
.tagline{color:var(--muted);font-size:14px;margin-top:2px}

/* Buttons & inputs */
.btn{
  background:var(--brand); border:0; color:#fff; font-weight:600;
  padding:10px 14px; border-radius:12px; cursor:pointer;
  transition:transform .06s, box-shadow .15s; box-shadow:0 6px 18px rgba(124,58,237,.25)
}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:#eef2ff;color:#4338ca;box-shadow:none}
.fav-btn{
  background:#eef2ff; color:#4338ca; border:0; box-shadow:none;
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
  transition:transform .06s, box-shadow .15s;
}
.fav-btn:hover{transform:translateY(-1px)}
.fav-btn .heart::before{content:"♥";display:inline-block;margin-right:8px}
.fav-btn[aria-pressed="true"]{background:#fee2e2;color:#991b1b}
.fav-btn[aria-pressed="true"] .heart::before{content:"❤"}

a.btn{display:inline-block;text-decoration:none}

input,textarea,select{
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); background:#fff; color:var(--ink)
}
input::placeholder,textarea::placeholder{color:#9ca3af}

.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.muted{color:var(--muted);font-size:12px}

/* --- Hero --- */
.hero{
  margin:8px auto 6px;
  padding:10px 4px 6px;
  background:transparent;
  border:0;
  box-shadow:none;
  display:block;
}
.hero.hero-card{
  background:linear-gradient(135deg,#fff 0%,#faf5ff 50%,#ecfeff 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.hero.hero-card .controls{flex:0 1 var(--controls-max); max-width:var(--controls-max); display:flex; gap:8px; align-items:center}
.search-input{ width:min(100%,var(--search-max)); flex:0 1 var(--search-max); }

/* --- Filters panel --- */
.filters{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:12px; margin:12px auto; box-shadow:var(--shadow);
}
.filters .grid4{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:10px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{background:#ecfeff;border:1px solid #bae6fd;color:#0369a1;padding:2px 8px;border-radius:999px;font-size:11px;cursor:pointer}

/* --- Featured block (index uses #featured) --- */
#featured{
  background:linear-gradient(135deg,#fff 0%,#faf5ff 50%,#ecfeff 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:var(--shadow);
  margin:12px auto 8px;
}
#featured .wrap{
  display:grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  gap:16px;
  align-items:center;
}
#featured #featImg{
  max-width:360px;
  justify-self:start;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  border:1px solid var(--border);
  border-radius:calc(var(--radius) - 2px);
  background:#f1f5f9;
}
#featured .feat-pill{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3;padding:3px 9px;border-radius:999px;font-size:11px}
#featured .feat-title{margin:6px 0 6px;font-size:1.4rem;letter-spacing:-.01em}
#featured .muted{font-size:13px}

/* --- Featured block --- */
.featured{ margin:12px auto 8px; }
.featured-card{
  display:grid; gap:16px; align-items:start; /* top aligned */
  background:linear-gradient(180deg,#faf8ff, #ffffff);
  border:1px solid var(--border);
  border-radius:16px; padding:16px;
  box-shadow: 0 4px 16px rgba(17,24,39,0.06);
  grid-template-columns: 1fr 1fr;           /* equal columns */
}
.featured-media{
  border-radius:12px; overflow:hidden; border:1px solid var(--border);
  aspect-ratio:16/10; background:#f1f5f9; align-self:start;
}
.featured-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.featured-body{ display:flex; flex-direction:column; justify-content:flex-start; }
.featured-kicker{ font-weight:700; letter-spacing:.04em; color:#7c3aed; margin:0 0 4px; }
.featured h2{ margin:2px 0 6px; font-size:1.35rem; }

/* --- Cards & grid --- */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* equal widths */
  gap:14px;
  align-items:stretch;              /* equal heights per row lane */
}
.grid > *{ min-width:0; }
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow);
  height:100%;
}
.card:hover{transform:translateY(-1px); transition:transform .08s ease}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{background:#eef2ff;border:1px solid #c7d2fe;color:#3730a3;padding:3px 9px;border-radius:999px;font-size:11px}
.star-row button{background:none;border:0;cursor:pointer;font-size:18px;line-height:1}
.star-row button.dim{opacity:.35}


/* Card footer: pin rating + play to bottom */
.card .card-footer{
  margin-top:auto;
  justify-content:space-between;
  align-items:flex-end;
  flex-direction:row-reverse; /* Play on right, rating on left */
  flex-wrap:nowrap;
}
.card .card-footer .muted-small{white-space:nowrap}
.card .card-footer .muted-small{display:flex; align-items:center; gap:6px}

/* Star rating: brighter */
.stars{display:inline-flex; gap:2px; font-size:16px; line-height:1}
.stars .star{color:#cbd5e1}
.stars .star.on{color:#fbbf24; text-shadow:0 1px 0 rgba(2,6,23,.15)}



/* Safety: ensure button labels stay visible even with aggressive CSS resets */
.btn, .btn:link, .btn:visited, .fav-btn, .card-fav{
  font-size:14px;
  line-height:1.2;
  text-indent:0;
  text-decoration:none;
  letter-spacing:normal;
  text-transform:none;
}

/* --- Responsive --- */
@media (max-width:900px){
  .hero.hero-card{flex-direction:column;align-items:stretch;gap:10px}
  .hero.hero-card .controls{width:100%;max-width:100%}
  #featured .wrap{grid-template-columns:1fr}
  #featured #featImg{aspect-ratio:16/9}

  .filters .grid4{grid-template-columns:repeat(2,minmax(180px,1fr))}
  .featured-card{ grid-template-columns: 1fr; }
  .featured-media{ aspect-ratio: 16/9; }
}
@media (max-width:700px){
  header{flex-direction:column;align-items:stretch;gap:10px}
  .brand h1{font-size:20px}
  .tagline{display:block;font-size:12px;line-height:1.2;margin-top:2px;color:var(--muted)}
  .hero{padding:10px 12px; gap:8px}
  .hero .controls{gap:8px; flex-wrap:nowrap}
  .hero .controls .search-input{flex:1 1 auto; width:auto; min-width:0; padding:8px 10px}
  .hero .controls select{flex:0 0 auto; max-width:110px; padding:8px 10px}
}
@media (max-width:360px){
  .grid{ grid-template-columns: 1fr; }   /* single column on tiny phones */
}
  .fav-btn {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform .05s ease-in-out;
  }
  .fav-btn[aria-pressed="true"] { background: #fdf2f8; border-color: #fbcfe8; }
  .fav-btn:active { transform: translateY(1px); }

  .heart {
    width: 16px; height: 16px; display: inline-block; position: relative;
  }
  .heart::before {
    content: "♡"; font-size: 16px; line-height: 1; color: #9ca3af;
  }
  .is-fav .heart::before { content: "❤"; color: #e11d48; }

  .card-fav {
    position: absolute; top: 8px; right: 8px;
    background: #ffffffd9; border: 1px solid #e5e7eb; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px; cursor: pointer; font-size: 12px;
  }
  .card-fav .heart { width: 14px; height: 14px; }
  .card-fav.is-fav { border-color: #fda4af; background: #fff1f2; }
/* HOTFIX: make button labels visible */
.btn,
.btn:link,
.btn:visited,
.card .btn,
.fav-btn,
.card-fav {
  color: #111827 !important;        /* readable text */
  font-size: 14px !important;       /* not 0 */
  line-height: 1.2 !important;
  text-indent: 0 !important;        /* undo any text-hiding */
  text-decoration: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.btn.secondary { color: #111827 !important; }

/* If theme uses icon-only buttons that hide text via pseudo-elements */
.btn::before,
.btn::after { content: none; }

.feat-kicker{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.feat-pill{
  display:inline-block;font-weight:700;font-size:12px;padding:4px 10px;
  border-radius:999px;background:#fef3c7;border:1px solid #fde68a;color:#92400e;
  letter-spacing:.2px
}
.feat-title{margin:0 0 6px 0}