/* Prevent horizontal overflow on mobile */
* {
  box-sizing: border-box;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Shared article styles (AA contrast, dark-mode aware) */
:root {
  --bg: var(--bg-primary, #f5f7fb);
  --panel: var(--bg-secondary, #ffffff);
  --ink: var(--text-primary, #0e1827);
  --ink-muted: var(--text-secondary, #4a5568);
  --accent: var(--primary-color, #2c4c7c);
  --accent-2: var(--secondary-color, #0c4061);
  --border: var(--border-color, #e2e8f0);
  --focus: var(--border-focus, #4a86e8);
  --link: var(--tertiary-color, #0b6aa6);
}

/* Dark theme override when data-theme="dark" is set */
[data-theme="dark"] {
  --bg: var(--bg-primary, #0f172a);
  --panel: var(--bg-secondary, #1e293b);
  --ink: var(--text-primary, #f1f5f9);
  --ink-muted: var(--text-secondary, #cbd5e1);
  --accent: var(--primary-color, #3b82f6);
  --accent-2: var(--secondary-color, #1d4ed8);
  --border: var(--border-color, #374151);
  --focus: var(--border-focus, #60a5fa);
  --link: var(--tertiary-color, #60a5fa);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--bg-primary, #0f172a);
    --panel: var(--bg-secondary, #1e293b);
    --ink: var(--text-primary, #f1f5f9);
    --ink-muted: var(--text-secondary, #cbd5e1);
    --accent: var(--primary-color, #3b82f6);
    --accent-2: var(--secondary-color, #1d4ed8);
    --border: var(--border-color, #374151);
    --focus: var(--border-focus, #60a5fa);
    --link: var(--tertiary-color, #60a5fa);
  }
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
}

.a-container {
  max-width: 980px;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 3vw, 2rem);
}

.a-header {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
}
.a-header h1 {font-weight: 700; letter-spacing: .2px;}

/* Topbar layout for back button + title */
.a-topbar {display:flex; align-items:center; gap: .9rem; padding-block: .25rem; flex-wrap: wrap}
.a-topbar__title {margin: 0; font-size: 1.1rem; font-weight: 600}

.a-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 1.25rem;
}

.a-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.a-card:hover {transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.12)}
.a-card__thumb {position: relative; aspect-ratio: 16/9; background: #0f172a10; display:flex; align-items:center; justify-content:center; overflow:hidden; transition: aspect-ratio 0.3s ease, max-height 0.3s ease}
.a-card__thumb.no-img {color: white; font-weight: 700; font-size: 1.1rem}
.a-card__thumb .a-card__img {width:100%; height:100%; object-fit:cover; display:block; transition: object-fit 0.3s ease, object-position 0.3s ease}
.a-card__body {padding: 1rem 1rem 1.2rem}
.a-card__title {font-size: 1.125rem; font-weight: 700; margin-bottom: .4rem}
.a-card__meta {color: var(--ink-muted); font-size: .9rem; margin-bottom: .75rem}
.a-card__desc {color: var(--ink-muted)}
.a-card__tags {display:flex; flex-wrap: wrap; gap:.4rem; margin-top:.75rem}
.tag {border:1px solid var(--border); color: var(--ink); padding:.2rem .5rem; border-radius:999px; font-size:.8rem}

.a-toolbar {display:flex; gap:.5rem; align-items:center; margin-top: .75rem}
.a-input {flex:1; border:2px solid var(--border); background: var(--bg); color: var(--ink); border-radius:10px; padding:.6rem .8rem}
.a-input:focus {outline:none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent)}
.a-select {border:2px solid var(--border); background: var(--bg); color: var(--ink); border-radius:10px; padding:.55rem .6rem}

/* Article page */
.article {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(1.25rem, 3.2vw, 2.25rem);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.article h1 {font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.2; margin-bottom: .75rem}
.article .a-byline {color: var(--ink-muted); margin-bottom: 1.25rem}
.article p {margin: 1rem 0; font-size: 1.06rem}
.article img {max-width: 100%; border-radius: 10px; margin: .75rem 0}
.article figure {margin: 1rem 0;}
.article figure img {display:block; width:100%; height:auto}
.article figcaption {color: var(--ink-muted); font-size: .9rem; margin-top: .4rem}
.article blockquote {border-left: 4px solid var(--accent); padding-left: .9rem; color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 8px; margin: 1.1rem 0;}
.article a {color: var(--link); text-decoration: underline; text-underline-offset: 2px;}

/* Better rhythm for headings and lists */
.article h2 {font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 1.4rem 0 .5rem; line-height: 1.25}
.article h3 {font-size: 1.2rem; margin: 1.1rem 0 .4rem}
.article ul, .article ol {padding-left: 1.2rem; margin: .6rem 0 1rem}
.article li {margin: .35rem 0}

/* Callouts */
.callout {padding: .8rem 1rem; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 6%, transparent)}
.callout.info {border-color: var(--info-color, var(--accent));}

/* Code and tables (future-proofing) */
.article code {background: color-mix(in srgb, var(--ink) 5%, transparent); padding: .1rem .3rem; border-radius: 4px}
.article table {width: 100%; border-collapse: collapse; margin: 1rem 0}
.article th, .article td {border: 1px solid var(--border); padding: .5rem .6rem; text-align: left}

.a-footer {text-align:center; color: var(--ink-muted); padding: 2rem 0;}

/* Loading spinner animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-spinner {
  border: 4px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Header background image class */
.header-bg-image {
  display: block !important;
  width: 100% !important;
  height: 400px !important;
  object-fit: cover !important;
  object-position: top !important;
  filter: blur(4px) !important;
  opacity: 0.8 !important;
  margin: 0 !important;
}

/* NYT-like narrow measure and comfortable reading width */
@media (min-width: 960px){
  .article {padding: 2.25rem 2.6rem}
}

/* Mobile optimizations - reduce excessive margins/padding */
@media (max-width: 768px) {
  .a-wrap {
    padding: 0.75rem clamp(0.5rem, 2vw, 1rem);
  }
  
  .a-topbar {
    gap: 0.5rem;
    padding-block: 0.15rem;
  }
  
  .article {
    padding: clamp(0.75rem, 2.5vw, 1.5rem);
    margin-left: 0;
    margin-right: 0;
  }
  
  .article h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0.5rem;
  }
  
  .article h2 {
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    margin: 1rem 0 0.4rem;
  }
  
  .article p {
    margin: 0.75rem 0;
    font-size: 1rem;
  }
  
  .article ul, .article ol {
    padding-left: 1rem;
    margin: 0.5rem 0 0.75rem;
  }
  
  .article blockquote {
    padding-left: 0.6rem;
    margin: 0.8rem 0;
  }
  
  .a-card__body {
    padding: 0.75rem;
  }
}

@media (max-width: 480px) {
  .a-wrap {
    padding: 0.5rem;
  }
  
  .article {
    padding: 0.75rem;
    border-radius: 8px;
  }
  
  .article h1 {
    font-size: 1.4rem;
  }
  
  .article h2 {
    font-size: 1.15rem;
  }
  
  .article p {
    font-size: 0.95rem;
  }
  
  .a-card__body {
    padding: 0.6rem;
  }
  
  .a-toolbar {
    flex-direction: column;
    gap: 0.4rem;
  }
  
  .a-input, .a-select {
    padding: 0.5rem 0.6rem;
    margin-left: 0;
    margin-right: 0;
  }
}