/* ============================================================
   Articles — index, single post, tags, search, images
   Dark frosted panels on the brand gradient, white copy.
   Accent: amber #ffb23e
   ============================================================ */
:root {
  --art-panel: rgba(10, 8, 30, .55);
  --art-border: rgba(255, 255, 255, .10);
  --art-accent: #ffb23e;
}

.article { padding: 5rem 1rem 0; }
.articles-index { padding: 5rem 1rem 5rem; }

/* ---------- Single article ---------- */
.article-back { font-size: .95rem; }
.article-back a { text-decoration: none; color: var(--art-accent); opacity: .9; }
.article-back a:hover { opacity: 1; }
.article-back--top { max-width: 820px; margin: 0 auto 1rem; padding: 2rem 0 0; }
.article-back--foot { margin: 3rem 0 0; }

.article .container {
  max-width: 820px;
  background: var(--art-panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--art-border);
  border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  color: #fff;
}

.article-head { margin-bottom: 2rem; }
.article-head h1 { line-height: 1.1; margin-bottom: 1rem; color: #fff; }
.article-meta { font-size: .9rem; color: rgba(255, 255, 255, .65); margin-bottom: 1rem; }

.article-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.article-tags a {
  display: inline-block; text-decoration: none;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .85);
  transition: all .15s ease;
}
.article-tags a:hover { border-color: var(--art-accent); color: var(--art-accent); }

/* hero + in-body images */
.article-hero { margin: 0 0 2rem; }
.article-hero img,
.article-figure img { width: 100%; height: auto; border-radius: 12px; display: block; }
.article-figure { margin: 2rem 0; }
.article-figure figcaption {
  font-size: .85rem; color: rgba(255, 255, 255, .6);
  text-align: center; margin-top: .6rem;
}

/* body copy — white */
.article-body { font-size: 1.12rem; line-height: 1.7; color: #fff; }
.article-body p, .article-body li { color: #fff; margin: 0 0 1.4rem; }
.article-body li { margin-bottom: .5rem; }
.article-body h2 { margin: 2.6rem 0 1rem; line-height: 1.2; color: var(--gradient-start); }
.article-body h3 { margin: 2rem 0 .8rem; color: #fff; }
.article-body ul { margin: 0 0 1.4rem 1.2rem; }
.article-body strong, .article-body em { color: #fff; }
.article-body a { color: var(--art-accent); text-underline-offset: 2px; }
.article-body a:hover { color: #ffc76e; }

/* ---------- Index / listing ---------- */
.articles-index .container { max-width: 880px; }
.articles-head { margin-bottom: 1.5rem; }
.articles-head h1 { margin-bottom: .5rem; color: #fff; }
.articles-intro { font-size: 1.1rem; color: rgba(255, 255, 255, .8); max-width: 40em; }
.articles-clear { margin-top: .75rem; }
.articles-clear a { color: var(--art-accent); text-decoration: none; font-size: .95rem; }
.articles-empty { color: rgba(255, 255, 255, .8); }

/* search */
.articles-search { display: flex; gap: .5rem; margin: 0 0 2.5rem; max-width: 480px; }
.articles-search input {
  flex: 1; padding: .7rem 1rem; border-radius: 10px;
  border: 1px solid var(--art-border);
  background: rgba(255, 255, 255, .06); color: #fff; font: inherit;
}
.articles-search input::placeholder { color: rgba(255, 255, 255, .55); }
.articles-search input:focus { outline: none; border-color: var(--art-accent); }
.articles-search button {
  padding: .7rem 1.25rem; border-radius: 10px; border: 0; cursor: pointer;
  font: inherit; font-weight: 600;
  background: var(--art-accent); color: #231300;
}
.articles-search button:hover { filter: brightness(1.05); }

/* cards */
.articles-list { display: flex; flex-direction: column; gap: 1.75rem; }
.article-card {
  background: var(--art-panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--art-border);
  border-radius: 18px;
  padding: 1.9rem clamp(1.5rem, 3vw, 2.25rem);
  transition: border-color .2s ease, transform .2s ease;
}
.article-card:hover { border-color: rgba(255, 255, 255, .25); transform: translateY(-2px); }

/* card with thumbnail -> media layout */
.article-card.has-image { display: flex; gap: 1.5rem; align-items: flex-start; }
.article-card-thumb { flex: 0 0 34%; max-width: 34%; display: block; }
.article-card-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; aspect-ratio: 16/10; }
.article-card-body { flex: 1 1 auto; }

.article-card-title { line-height: 1.2; margin-bottom: .5rem; }
.article-card-title a { text-decoration: none; color: #fff; }
.article-card-title a:hover { color: var(--art-accent); }
.article-card-meta { font-size: .85rem; color: rgba(255, 255, 255, .6); margin-bottom: .6rem; }
.article-card-excerpt { font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, .88); margin-bottom: .75rem; }

.article-card-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 .9rem; }
.article-card-tags a {
  text-decoration: none; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .8);
  transition: all .15s ease;
}
.article-card-tags a:hover { border-color: var(--art-accent); color: var(--art-accent); }

.article-card-more { margin-bottom: 0; }
.article-card-more a { text-decoration: none; font-weight: 600; color: var(--art-accent); }
.article-card-more a:hover { color: #ffc76e; }

@media (max-width: 600px) {
  .article, .articles-index { padding-top: 4rem; }
  .article-body { font-size: 1.05rem; }
  .article-card.has-image { flex-direction: column; }
  .article-card-thumb { max-width: 100%; flex-basis: auto; width: 100%; }
}

/* ---------- Buttons + CTA ---------- */
.article-btn,
.article-body a.article-btn {
  display: inline-block; text-decoration: none; line-height: 1.25;
  background: var(--art-accent); color: #231300; font-weight: 600;
  padding: .75em 1rem 1rem; border-radius: 10px;
  transition: filter .15s ease, transform .15s ease;
}
.article-btn:hover,
.article-body a.article-btn:hover { filter: brightness(1.06); transform: translateY(-1px); color: #231300; }

.article-btn--ghost,
.article-body a.article-btn--ghost {
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4);
}
.article-btn--ghost:hover,
.article-body a.article-btn--ghost:hover { border-color: var(--art-accent); color: var(--art-accent); filter: none; }

.article-cta-wrap { padding: 2rem 1rem 0; }
.article-cta {
  max-width: 820px; margin: 0 auto; color: #fff;
  background: rgba(255, 178, 62, .10);
  border: 1px solid rgba(255, 178, 62, .30);
  border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.article-cta h2 { color: #fff; margin: 0 0 .6rem; line-height: 1.2; }
.article-cta p { color: rgba(255, 255, 255, .9); margin: 0 0 1.25rem; }
.article-cta p:last-child { margin: 0; }

.article-back--foot { max-width: 820px; margin: 2rem auto 0; padding: 0; }