/* =====================================================================
   EPC Blog — shared styles for bloge.html (listing), blog-details.html
   (article) and the dashboard preview. Loaded ONLY by those pages.
   All selectors are namespaced (.epc-blog*, .epc-postCard*, .epc-read*).
   ===================================================================== */

:root{
  --epc-ink:#0b1020;
  --epc-surface:#ffffff;
  --epc-muted:#6b7280;
  --epc-line:rgba(15,23,42,.10);
  --epc-glow:rgba(74,91,249,.20);
  --epc-brand:#243bff;
  --epc-brand-2:#284adc;
  --epc-green:#60d175;
}

/* ---------------------------------------------------------------------
   LISTING (moved unchanged from bloge.html inline styles; generic
   control classes are now scoped to .epc-blog so they cannot leak)
   --------------------------------------------------------------------- */
.epc-blog{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.88));
  padding: 42px 0 64px;
}
.epc-blog__wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.epc-blog__toolbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--epc-line);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 18px 40px rgba(2,6,23,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.epc-blog__controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  width:100%;
}
.epc-blog .epc-input, .epc-blog .epc-select{
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--epc-line);
  background: rgba(255,255,255,.92);
  padding: 0 14px;
  outline: none;
  width: min(520px, 100%);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
  font-family: inherit;
}
.epc-blog .epc-select{ width: 240px; }
.epc-blog .epc-input:focus, .epc-blog .epc-select:focus{
  border-color: rgba(74,91,249,.45);
  box-shadow: 0 0 0 6px var(--epc-glow);
}

.epc-blog__metaLine{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  color: var(--epc-muted);
  font-size: 14px;
  margin-left:auto;
}
.epc-blog .epc-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--epc-line);
  background: rgba(255,255,255,.92);
  font-size: 13px;
  color: #111827;
}

.epc-blog__grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-top: 10px;
}
.epc-postCard{
  position: relative; /* anchor overlay */
  grid-column: span 4;
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid var(--epc-line);
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 40px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer;
  height: 100%;
  display:flex;
  flex-direction:column;
}
.epc-postCard:hover{
  transform: translateY(-3px);
  border-color: rgba(74,91,249,.35);
  box-shadow: 0 26px 60px rgba(2,6,23,.12);
}
.epc-postCard__img{
  position:relative;
  aspect-ratio: 16/9;
  background: #0b1020;
}
.epc-postCard__img img{
  /* absolutely positioned so external images of any ratio (or failed loads)
     never change the 16:9 box — every card keeps identical dimensions */
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.96;
}
.epc-postCard__badge{
  position:absolute;
  left: 14px;
  top: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--epc-line);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color:#111827;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.epc-postCard__body{
  padding: 16px 16px 18px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  flex:1;
}
.epc-postCard__title{
  font-size: 18px;
  line-height: 1.35;
  margin: 0;
  color:#0b1020;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.epc-postCard__excerpt{
  margin:0;
  color: var(--epc-muted);
  font-size: 14px;
  line-height: 1.6;
}
.epc-postCard__footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  margin-top:auto;
  padding-top: 8px;
  border-top: 1px solid var(--epc-line);
  color: var(--epc-muted);
  font-size: 13px;
}
.epc-postCard__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 700;
  color:#243bff;
}

.epc-blog__pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  margin-top: 18px;
}
.epc-blog .epc-btn{
  border: 1px solid var(--epc-line);
  background: rgba(255,255,255,.92);
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  font-weight: 700;
  color:#0b1020;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.epc-blog .epc-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(74,91,249,.35);
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
}
.epc-blog .epc-btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

@media (max-width: 992px){
  .epc-postCard{ grid-column: span 6; }
  .epc-blog__metaLine{ width:100%; margin-left:0; }
  .epc-blog .epc-select{ width:min(340px,100%); }
}
@media (max-width: 576px){
  .epc-postCard{ grid-column: span 12; }
  .epc-blog__toolbar{ padding: 12px; }
}

/* ---- additions: real-link cards, placeholders, states (no visual redesign) ---- */
.epc-blog .sr-only, .epc-read-page .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.epc-postCard__anchor{
  color: inherit;
  text-decoration: none;
}
.epc-postCard__anchor:hover{ color: inherit; }
.epc-postCard__anchor::after{        /* whole card is clickable through the real <a> */
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius: inherit;
}
.epc-postCard__anchor:focus{ outline: none; }
.epc-postCard:focus-within{
  border-color: rgba(74,91,249,.55);
  box-shadow: 0 0 0 4px var(--epc-glow), 0 26px 60px rgba(2,6,23,.12);
}
.epc-postCard__img--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(400px 160px at 85% 5%, rgba(40,74,220,.45), transparent 60%),
    radial-gradient(300px 140px at 15% 90%, rgba(96,209,117,.30), transparent 55%),
    linear-gradient(180deg, #010826, #050b2a);
}
.epc-postCard__placeholder{
  color: rgba(252,245,231,.85);
  font-weight: 900;
  letter-spacing: .3em;
  font-size: 28px;
}

.epc-blog__state{
  grid-column: 1 / -1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-align:center;
  padding: 44px 18px;
  border: 1px dashed rgba(15,23,42,.16);
  border-radius: 20px;
  background: rgba(255,255,255,.7);
  color: var(--epc-muted);
}
.epc-blog__state i{ font-size: 26px; color: var(--epc-brand-2); }
.epc-blog__state strong{ color: var(--epc-ink); font-size: 17px; }
.epc-blog__state p{ margin:0; max-width: 460px; }
.epc-blog__state--error i{ color:#dc2626; }

.epc-skel{
  grid-column: span 4;
  border-radius: 20px;
  border: 1px solid var(--epc-line);
  background: #fff;
  overflow:hidden;
}
.epc-skel__img{ aspect-ratio:16/9; }
.epc-skel__line{ height: 14px; margin: 14px 16px 0; border-radius: 8px; }
.epc-skel__line--short{ width: 55%; margin-bottom: 18px; }
.epc-skel__img, .epc-skel__line{
  background: linear-gradient(90deg, #eef1f7 0%, #f7f8fb 50%, #eef1f7 100%);
  background-size: 200% 100%;
  animation: epcShimmer 1.3s ease-in-out infinite;
}
@keyframes epcShimmer{ from{ background-position: 200% 0; } to{ background-position: -200% 0; } }
@media (max-width: 992px){ .epc-skel{ grid-column: span 6; } }
@media (max-width: 576px){ .epc-skel{ grid-column: span 12; } .epc-skel:nth-child(n+3){ display:none; } }
@media (prefers-reduced-motion: reduce){
  .epc-skel__img, .epc-skel__line{ animation:none; }
}

/* ---------------------------------------------------------------------
   ARTICLE PAGE (blog-details.html)
   --------------------------------------------------------------------- */
.epc-hero-min--dark .epc-hero-min__title.epc-read__title{
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  max-width: 920px;
  overflow-wrap: anywhere;
}
.epc-hero-min--dark .epc-hero-min__crumb .epc-read__crumbCurrent{
  display:inline-block;
  max-width: 46ch;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.epc-read__crumbList{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px;
  list-style:none;
  margin:0;
  padding:0;
}
.epc-read__crumbList li{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
.epc-read__crumbList li + li::before{ content:"•"; opacity:.7; }

.epc-read__dek{
  margin: 14px 0 0;
  max-width: 760px;
  color: rgba(252,245,231,.82);
  font-size: 18px;
  line-height: 1.6;
}

.epc-read__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 8px 18px;
  margin-top: 18px;
  font-size: 14px;
  color: rgba(252,245,231,.78);
}
.epc-read__meta i{ margin-right: 6px; color: rgba(164,179,249,.95); }
.epc-read__chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:#fff;
  background: rgba(40,74,220,.55);
  border: 1px solid rgba(164,179,249,.35);
}
.epc-read__meta--light{ color: var(--epc-muted); }
.epc-read__meta--light i{ color: var(--epc-brand-2); }

.epc-read{
  background:#fff;
  padding: 48px 0 40px;
}
/* Reading column: starts on the same left edge as the hero title (both sit on the
   Bootstrap .container content edge — the hero wrap has no horizontal padding) and
   keeps a readable maximum width; whitespace stays on the right. Full width < 992px. */
.epc-read__column{
  max-width: 960px;
  margin: 0;
}

/* Table of contents (only rendered for articles with enough sections) */
.epc-read__toc{
  margin: 0 0 32px;
  border: 1px solid var(--epc-line);
  border-radius: 16px;
  background: #f8f9fc;
  padding: 0;
}
.epc-read__toc summary{
  cursor:pointer;
  padding: 14px 18px;
  font-weight: 800;
  color: var(--epc-ink);
  font-size: 15px;
  list-style: none;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.epc-read__toc summary::-webkit-details-marker{ display:none; }
.epc-read__toc summary::after{ content:"\25BE"; color: var(--epc-brand-2); transition: transform .2s ease; }
.epc-read__toc[open] summary::after{ transform: rotate(180deg); }
.epc-read__toc ol{
  margin: 0;
  padding: 0 18px 16px 38px;
  list-style: decimal;
}
.epc-read__toc li{ margin: 6px 0; color: var(--epc-muted); }
.epc-read__toc ul{ list-style: circle; margin: 4px 0 0; padding-left: 20px; }
.epc-read__toc ul li{ margin: 4px 0; }
.epc-read__toc a{ color: var(--epc-ink); text-decoration:none; font-weight:500; }
.epc-read__toc a:hover, .epc-read__toc a:focus-visible{ color: var(--epc-brand); text-decoration: underline; }

/* Article typography */
.epc-read__content{
  font-size: 18px;
  line-height: 1.8;
  color: #1f2937;
  overflow-wrap: break-word;
}
.epc-read__content > :first-child{ margin-top: 0; }
.epc-read__content p{ margin: 0 0 1.25em; color: #1f2937; font-size: inherit; line-height: inherit; }
/* Heading hierarchy: H1 (hero) > H2 (primary sections) > H3 (subsections) > body */
.epc-read__content h2{
  margin: 56px 0 16px;
  font-size: 30px;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #010826;              /* EPC navy */
  scroll-margin-top: 140px;
}
.epc-read__content h3{
  margin: 36px 0 10px;
  font-size: 22px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #16328f;              /* EPC deep blue (hero gradient) */
  scroll-margin-top: 140px;
}
.epc-read__content h2 + h3{ margin-top: 12px; }
.epc-read__content > h2:first-child,
.epc-read__content > h3:first-child{ margin-top: 0; }
.epc-read__content strong{ color: var(--epc-ink); font-weight: 700; }
.epc-read__content em{ font-style: italic; }
.epc-read__content a{
  color: var(--epc-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.epc-read__content a:hover{ color: var(--epc-brand-2); text-decoration-thickness: 2px; }
.epc-read__content a:focus-visible{ outline: 3px solid var(--epc-glow); outline-offset: 2px; border-radius: 3px; }
.epc-read__content ul, .epc-read__content ol{ margin: 0 0 1.3em; padding-left: 1.4em; }
.epc-read__content ul{ list-style: disc; }
.epc-read__content ol{ list-style: decimal; }
.epc-read__content li{ margin: .45em 0; padding-left: .2em; }
.epc-read__content li::marker{ color: var(--epc-brand-2); font-weight: 700; }
.epc-read__content blockquote{
  margin: 1.8em 0;
  padding: 18px 22px;
  border-left: 4px solid var(--epc-brand-2);
  background: linear-gradient(90deg, rgba(40,74,220,.07), rgba(96,209,117,.05));
  border-radius: 0 14px 14px 0;
  font-size: 19px;
  font-style: italic;
  color: var(--epc-ink);
}
.epc-read__content blockquote p:last-child{ margin-bottom: 0; }
.epc-read__content img{
  display:block;
  max-width:100%;
  height:auto;
  margin: 1.8em auto;
  border-radius: 14px;
}
.epc-read__content figure{ margin: 1.8em 0; }
.epc-read__content figure img{ margin: 0 auto; }
.epc-read__content figcaption{ margin-top: 8px; font-size: 14px; color: var(--epc-muted); text-align:center; }

/* After-article blocks */
.epc-read__after{
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--epc-line);
  display:flex;
  flex-direction:column;
  gap: 24px;
}
.epc-read__share{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px;
}
.epc-read__shareLabel{ font-weight: 800; color: var(--epc-ink); margin-right: 4px; font-size: 15px; }
.epc-read__btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--epc-line);
  background: #fff;
  color: var(--epc-ink);
  font-weight: 700;
  font-size: 14px;
  text-decoration:none;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.epc-read__btn:hover{
  color: var(--epc-ink);
  transform: translateY(-1px);
  border-color: rgba(74,91,249,.35);
  box-shadow: 0 14px 30px rgba(2,6,23,.08);
}
.epc-read__btn:focus-visible{ outline: 3px solid var(--epc-glow); outline-offset: 2px; }

.epc-read__author{
  display:flex;
  gap: 16px;
  align-items:center;
  padding: 20px;
  border-radius: 18px;
  background: #f8f9fc;
  border: 1px solid var(--epc-line);
}
.epc-read__avatar{
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 19px;
  color:#fff;
  background: linear-gradient(135deg, var(--epc-brand-2), var(--epc-green));
}
.epc-read__authorLabel{ display:block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--epc-muted); font-weight: 700; }
.epc-read__authorName{ display:block; font-size: 18px; font-weight: 800; color: var(--epc-ink); }
.epc-read__authorJob{ display:block; font-size: 14px; color: var(--epc-muted); }

.epc-read__back{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  color: var(--epc-brand);
  text-decoration:none;
}
.epc-read__back:hover{ text-decoration: underline; color: var(--epc-brand-2); }

.epc-read-related{
  background: linear-gradient(180deg, #f6f7fb, #fff);
  padding: 46px 0 64px;
  border-top: 1px solid var(--epc-line);
}
.epc-read-related__title{
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 800;
  color: var(--epc-ink);
  letter-spacing: -0.01em;
}
.epc-read-related .epc-blog__grid{ margin-top: 0; }

/* Loading / not-found / error states */
.epc-read__state{
  text-align:center;
  padding: 30px 10px 10px;
  color: var(--epc-muted);
}
.epc-read__state i{ font-size: 34px; color: var(--epc-brand-2); margin-bottom: 12px; }
.epc-read__state h2{ font-size: 24px; color: var(--epc-ink); margin: 0 0 10px; font-weight: 800; }
.epc-read__state p{ margin: 0 auto 18px; max-width: 480px; }
.epc-read__state--error i{ color:#dc2626; }
.epc-read__stateActions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.epc-read__skel .epc-skel__line{ margin: 0 0 16px; height: 16px; }
.epc-read__skel .epc-skel__line:nth-child(3n){ width: 82%; }
.epc-read__skel .epc-skel__line--h{ height: 26px; width: 55%; margin: 30px 0 18px; }

@media (max-width: 767px){
  .epc-read{ padding: 32px 0 28px; }
  .epc-read__content{ font-size: 17px; line-height: 1.75; }
  .epc-read__content h2{ font-size: 25px; margin: 44px 0 12px; }
  .epc-read__content h3{ font-size: 20px; margin: 28px 0 8px; }
  .epc-read__content blockquote{ font-size: 17px; padding: 14px 16px; }
  .epc-read__dek{ font-size: 16px; }
  .epc-read__author{ align-items:flex-start; }
  .epc-hero-min--dark .epc-hero-min__crumb .epc-read__crumbCurrent{ max-width: 24ch; }
}