/* ═══════════════════════════════════
   BLOG · SHARED STYLES
   ═══════════════════════════════════ */

/* ── BLOG PAGE HERO ─────────────────────────────────── */
.bph {
  position: relative;
  background: var(--dark);
  overflow: hidden;
  padding: 80px var(--pad) 88px;
}
.bph__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 100% at 80% 50%, rgba(62,203,164,.1) 0%, transparent 65%);
  pointer-events: none;
}
.bph__shapes {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}
.bph__shape { position: absolute; color: var(--mint); }
.bph__shape--tri {
  width: 120px; top: 10%; right: 8%;
  opacity: .06; animation: sf 14s ease-in-out infinite;
}
.bph__shape--circ {
  width: 180px; bottom: -30px; right: 20%;
  opacity: .04; animation: sf 18s ease-in-out infinite reverse;
}
.bph__body {
  position: relative; z-index: 2;
  max-width: var(--max); width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
.bph__back {
  font-size: .8rem; font-weight: 600;
  color: rgba(62,203,164,.6); text-decoration: none;
  letter-spacing: .02em; transition: color .2s; width: fit-content;
}
.bph__back:hover { color: var(--mint); }
.bph__label {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--mint); opacity: .7;
}
.bph__h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 300; line-height: 1.15;
  color: var(--snow); letter-spacing: -.02em;
}
.bph__h1 em { font-style: italic; }
.bph__sub {
  font-size: clamp(.9rem, 1.5vw, 1.05rem);
  color: var(--sdim); max-width: 620px; line-height: 1.65;
}

/* ── BLOG LISTING ─────────────────────────────────────── */
.bl { padding: var(--sp) var(--pad); }
.bl__inner { max-width: var(--max); margin: 0 auto; }
.bl__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.bl__loading {
  grid-column: 1 / -1;
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  padding: 64px 0;
  color: var(--t3); font-size: .9rem;
}
.bl__spinner {
  width: 36px; height: 36px;
  border: 2px solid var(--border);
  border-top-color: var(--mint);
  border-radius: 50%;
  animation: blspin .8s linear infinite;
}
@keyframes blspin { to { transform: rotate(360deg); } }
.bl__empty {
  padding: 80px 0; text-align: center;
  color: var(--t3); font-style: italic;
}

/* ── BLOG CARD ─────────────────────────────────────────── */
.bcard {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.bcard:hover {
  border-color: rgba(62,203,164,.35);
  box-shadow: 0 8px 32px rgba(0,0,0,.07);
  transform: translateY(-3px);
}
.bcard__cat {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--teal); background: rgba(62,203,164,.1);
  padding: 4px 10px; border-radius: 999px; width: fit-content;
}
.bcard__title {
  font-family: var(--serif);
  font-size: 1.25rem; font-weight: 300;
  line-height: 1.3; flex: 1;
}
.bcard__title a {
  color: var(--t1); text-decoration: none; transition: color .2s;
}
.bcard__title a:hover { color: var(--teal); }
.bcard__excerpt {
  font-size: .9rem; color: var(--t2); line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bcard__meta {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.bcard__meta time { font-size: .8rem; color: var(--t3); }
.bcard__read {
  font-size: .82rem; font-weight: 600;
  color: var(--teal); text-decoration: none; transition: color .2s;
}
.bcard__read:hover { color: var(--teal-deep); }

/* ── ARTICLE HERO ─────────────────────────────────────── */
.art-hero {
  position: relative;
  background: var(--dark);
  overflow: hidden;
  padding: 80px var(--pad) 88px;
}
.art-hero__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 90% at 90% 40%, rgba(62,203,164,.08) 0%, transparent 65%);
  pointer-events: none;
}
.art-hero__body {
  position: relative; z-index: 2;
  max-width: var(--max); margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.art-hero__back {
  font-size: .8rem; font-weight: 600;
  color: rgba(62,203,164,.6); text-decoration: none;
  letter-spacing: .02em; transition: color .2s; width: fit-content;
}
.art-hero__back:hover { color: var(--mint); }
.art-hero__meta { display: flex; align-items: center; gap: 12px; }
.art-hero__cat {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--mint); background: rgba(62,203,164,.12);
  padding: 4px 10px; border-radius: 999px;
}
.art-hero__date { font-size: .8rem; color: var(--sdim); }
.art-hero__h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 300; line-height: 1.15;
  color: var(--snow); letter-spacing: -.02em;
  max-width: 860px;
}
.art-hero__excerpt {
  font-size: 1.05rem; color: var(--sdim);
  max-width: 640px; line-height: 1.65; font-style: italic;
}

/* ── ARTICLE BODY ─────────────────────────────────────── */
.art-body { background: var(--cream); padding: var(--sp) var(--pad); }
.art-content {
  max-width: 720px; margin: 0 auto;
  font-size: 1.02rem; line-height: 1.8; color: var(--t1);
}
.art-content h2 {
  font-family: var(--serif);
  font-size: 1.7rem; font-weight: 300;
  line-height: 1.2; color: var(--t1);
  margin: 2.2em 0 .7em; letter-spacing: -.01em;
}
.art-content h3 {
  font-family: var(--serif);
  font-size: 1.25rem; font-weight: 400;
  line-height: 1.3; color: var(--t1);
  margin: 1.8em 0 .5em;
}
.art-content p { margin-bottom: 1.2em; }
.art-content p:last-child { margin-bottom: 0; }
.art-content strong { font-weight: 700; }
.art-content em { font-style: italic; color: var(--t2); }
.art-content a {
  color: var(--teal); text-decoration: underline;
  text-decoration-color: rgba(42,122,108,.35); transition: color .2s;
}
.art-content a:hover { color: var(--teal-deep); }
.art-content ul, .art-content ol { padding-left: 1.6em; margin-bottom: 1.2em; }
.art-content li { margin-bottom: .4em; }
.art-content blockquote {
  border-left: 3px solid var(--mint);
  padding: 16px 24px; margin: 1.6em 0;
  background: rgba(62,203,164,.05);
  border-radius: 0 var(--rsm) var(--rsm) 0;
  font-family: var(--serif); font-size: 1.1rem;
  font-weight: 300; color: var(--t2); font-style: italic;
}
.art-content hr {
  border: none; border-top: 1px solid var(--border); margin: 2.4em 0;
}
.art-state {
  max-width: 720px; margin: 0 auto;
  padding: 80px 0; text-align: center; color: var(--t3);
}
.art-state h2 {
  font-family: var(--serif); font-size: 1.6rem;
  font-weight: 300; color: var(--t2); margin-bottom: 12px;
}
.art-state a { color: var(--teal); }

/* ── ARTICLE BRIDGE ──────────────────────────────────── */
.art-bridge {
  background: var(--cream);
  padding: 0 var(--pad) 72px;
}
.art-bridge__card {
  max-width: 720px; margin: 0 auto;
  padding: 28px 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.art-bridge__logo { height: 32px; width: auto; flex-shrink: 0; opacity: .8; }
.art-bridge__desc {
  flex: 1; min-width: 180px;
  font-size: .88rem; color: var(--t2); line-height: 1.65;
}
.art-bridge__link {
  font-size: .88rem; font-weight: 600;
  color: var(--teal); text-decoration: none;
  white-space: nowrap; transition: color .2s;
}
.art-bridge__link:hover { color: var(--teal-deep); }

/* ── BLOG FOOTER ──────────────────────────────────────── */
.blog-footer {
  background: var(--ink-dark);
  padding: 24px var(--pad);
  border-top: 1px solid rgba(255,255,255,.05);
}
.blog-footer__in {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.blog-footer__logo { height: 24px; width: auto; filter: brightness(0) invert(1) opacity(.3); }
.blog-footer__links { display: flex; gap: 20px; align-items: center; }
.blog-footer__link {
  font-size: .8rem; color: rgba(255,255,255,.35);
  text-decoration: none; transition: color .2s;
}
.blog-footer__link:hover { color: var(--mint); }
.blog-footer__copy { font-size: .79rem; color: rgba(255,255,255,.2); }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 900px) {
  .bl__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bl__grid { grid-template-columns: 1fr; }
  .bph { padding: 60px var(--pad) 68px; }
  .art-hero { padding: 60px var(--pad) 68px; }
}