/* ----------- Variables & Base ----------- */
:root {
  --bg: #f9faff;
  --card: #ffffff;
  --text: #1c1f2b;
  --muted: #6b6f85;
  --accent: #635bff;
  --accent-grad: linear-gradient(135deg,#635bff,#8f6bff);
  --radius: 18px;
  --shadow: 0 10px 28px rgba(25,31,58,.10);

  /* Mobile tuning */
  --container: 1120px;
  --safe-pad: clamp(12px, 3vw, 16px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
.hidden { display: none; }

/* ----------- Header ----------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--card);
  border-bottom: 1px solid #eef0f6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex; gap: 14px; align-items: center;
  padding: 10px var(--safe-pad);
}
.brand { display:flex; align-items:center; gap:10px; min-width: 0; }
.brand .logo { width:32px; height:32px; flex:0 0 32px; }
.wordmark { font-weight:700; color:#2e3473; font-size:1.06rem; white-space:nowrap; }

.search {
  flex:1; display:flex; gap:8px; align-items:center; min-width: 40%;
  max-width: 560px; margin-left: 2px;
}
.search input {
  flex:1; height:44px; padding:0 14px;
  border:1px solid #e3e6ef; border-radius:999px;
  font-size:0.95rem; outline: none;
}
.btn {
  height:44px; padding:0 18px;
  border:none; border-radius:999px;
  background: var(--accent-grad);
  color:#fff; font-weight:600; cursor:pointer;
  transition:background .2s, transform .15s;
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-1px); }

.top-nav { margin-left:auto; display:flex; align-items:center; gap:14px; }
.top-nav a { font-weight:500; color:#333; }

/* ----------- Hero ----------- */
.hero {
  background: linear-gradient(135deg,#faf9ff,#f3f5ff);
  padding: 36px var(--safe-pad) 24px;
}
.hero-inner {
  max-width: var(--container); margin:0 auto;
  display:grid; grid-template-columns: 1.25fr .9fr;
  gap: 28px; align-items:center;
}
.hero h1 {
  font-size: clamp(1.6rem, 2.6vw + 1rem, 2.25rem);
  margin:0 0 .4rem;
}
.sub { color:var(--muted); margin:0; font-size: clamp(.95rem, .4vw + .9rem, 1rem); }
.hero-cover { display:flex; justify-content:center; }
.hero-cover img {
  width:100%; max-width: 320px; border-radius:18px;
  box-shadow:var(--shadow);
  aspect-ratio:3/4; object-fit:contain; background:#fff;
}

/* ----------- Sections & Grid ----------- */
.section {
  max-width: var(--container); margin: 22px auto;
  padding: 0 var(--safe-pad);
}
.section-head h2 { margin:.5rem 0 1rem; font-size:1.25rem; }

.grid {
  display:grid; gap: 16px;
  /* smaller min width so 320–360px phones still show 2+ columns */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.card {
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid #eef0f6;
  cursor:pointer; transition:transform .15s, box-shadow .15s;
}
.card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(25,31,58,.12); }
.card .thumb { width:100%; aspect-ratio:3/4; position:relative; background:#fff; }
.card .thumb img {
  position:absolute; inset:0; margin:auto; width:100%; height:100%;
  object-fit:contain; object-position:center;
}
.card .info { padding:10px 12px 14px; }
.card .title {
  margin:0 0 4px; font-weight:700; font-size: .96rem;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  min-height: 2.6em; /* keeps height consistent */
}
.card .author { margin:0; color:var(--muted); font-size: .86rem; }

/* ----------- Detail Page ----------- */
.detail-card {
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:grid; grid-template-columns: minmax(210px, 300px) 1fr;
  gap: 20px; padding: 18px; align-items:start;
}
.detail-card img {
  width:100%; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.1);
  aspect-ratio:3/4; object-fit:contain; background:#fff;
}
.detail-card .info h1 { font-size: clamp(1.35rem, 1.4vw + 1rem, 1.7rem); margin:.2rem 0 .6rem; }
.detail-card .info p { margin:.25rem 0; color:#444; }

.actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0; }
.actions .btn { flex:1 1 160px; text-align:center; font-size:0.95rem; min-height:44px; }

/* Subject chips keep same class you already render */
.subject-wrap .chip {
  background:#f1f2fa; color:#4b4f5d;
  padding:6px 12px; border-radius:999px; font-size:0.8rem; font-weight:500;
}

/* ----------- Ads (placeholders only) ----------- */
.ad-container { max-width: var(--container); margin:16px auto; padding:0 var(--safe-pad); }
.ad-placeholder {
  border:2px dashed #d0d3db; border-radius:14px;
  padding:20px; text-align:center; color:#6b6f76; background:#fff;
  font-weight:600; min-height:120px;
}

/* ----------- About & Footer ----------- */
.about-grid {
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.about-grid article {
  background:#fff; border:1px solid #eef0f6;
  border-radius:16px; padding:16px; box-shadow:var(--shadow);
}
.site-footer {
  max-width: var(--container); margin: 40px auto 20px;
  padding: 0 var(--safe-pad); text-align:center;
  color:#7b7f94; font-size: .92rem;
}

/* ----------- Placeholder Image ----------- */
img[src*="branding/placeholder.png"] {
  object-fit:contain; background:#fff;
  border-radius:12px; padding:12px;
}

/* ----------- Responsive ----------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 18px; }
  .hero-cover img { max-width: 280px; margin-inline: auto; }
}

@media (max-width: 760px) {
  .header-inner { flex-wrap: wrap; row-gap: 8px; }
  .top-nav { order: 2; width: 100%; justify-content: flex-end; }
  .search { order: 3; width: 100%; }
  .search input, .btn { height: 42px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
  .detail-card { grid-template-columns: 1fr; padding: 14px; gap: 16px; }
  .detail-card img { max-width: 260px; margin: 0 auto; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .hero { padding: 28px var(--safe-pad) 18px; }
  .section { margin: 18px auto; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card .info { padding: 8px 10px 12px; }
  .actions .btn { flex: 1 1 100%; }
}