.blogs-page {
  padding: clamp(48px, 6vw, 88px) max(4.5vw, 24px) 80px;
  background:
    radial-gradient(ellipse at 0 0, #24100a 0, transparent 42%),
    #080807;
}
.blogs-page h1 {
  margin: 8px 0 16px;
  font-size: clamp(42px, 5vw, 72px);
}
.blogs-intro {
  max-width: 720px;
  margin: 0 0 36px;
  color: var(--muted);
}
.blogs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #101010;
  border: 1px solid rgba(240, 68, 22, .35);
}
.blog-card-media {
  display: block;
  height: 220px;
  overflow: hidden;
  background: #141414;
  flex: none;
}
.blogs-page .blog-card-media img,
.blog-card img {
  width: 100%;
  height: 220px;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.blog-card-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  flex: 1;
}
.blog-card-copy small,
.blog-article-meta {
  color: #f04416;
  font: 600 13px var(--heading);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.blog-card h2,
.blog-card h2 a {
  margin: 0;
  font-size: 26px;
  line-height: 1.05;
  text-transform: none;
  letter-spacing: 0;
}
.blog-card p {
  margin: 0 0 12px;
  color: #d9d1cb;
}
.blog-card .button {
  align-self: flex-start;
  margin-top: auto;
}
.blogs-status { color: var(--muted); }
.blogs-pager {
  display: flex;
  gap: 8px;
  margin-top: 32px;
  justify-content: center;
  flex-wrap: wrap;
}
.blogs-page-btn {
  min-width: 40px;
  height: 40px;
  border: 1px solid rgba(240, 68, 22, .55);
  background: transparent;
  color: #fff;
  font: 600 16px var(--heading);
  cursor: pointer;
}
.blogs-page-btn.is-current,
.blogs-page-btn:hover { background: #f04416; }
.blog-article { max-width: 820px; }
.blog-article img {
  width: 100%;
  height: min(460px, 56vw);
  object-fit: cover;
  margin: 18px 0 22px;
}
.blog-article h1 {
  font-size: clamp(34px, 4vw, 56px);
  text-transform: none;
  letter-spacing: 0;
}
.blog-article h2 {
  margin: 28px 0 10px;
  font-size: clamp(26px, 3vw, 36px);
}
.blog-body p,
.blog-body li {
  color: #e4dcd5;
  font-size: 17px;
}
.blog-body a { color: #f04416; }
.blog-body img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  margin: 18px 0;
}
.blog-article ul,
.blog-article ol { margin: 0 0 16px; padding-left: 22px; }
.blog-back { margin-bottom: 18px; }
@media (max-width: 1200px) {
  .blogs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .blogs-grid { grid-template-columns: 1fr; }
  .blog-card-media,
  .blogs-page .blog-card-media img,
  .blog-card img { height: 200px; }
}
.blog-admin { max-width: 820px; }
.admin-card, .admin-list article {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  padding: 18px;
  background: #101010;
  border: 1px solid rgba(240, 68, 22, .35);
}
.admin-card label { display: grid; gap: 6px; color: #d9d1cb; }
.admin-card input, .admin-card textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: #080807;
  color: #fff;
  font: 16px/1.4 Inter, sans-serif;
}
.admin-tools, .admin-list a { color: #f04416; }
.admin-notice { color: #d7f5c8; }
.admin-error { color: #ffb4a2; }
.admin-preview, .admin-list img { width: 160px; height: 100px; object-fit: cover; }
.admin-list article { grid-template-columns: 160px 1fr; align-items: center; }
.admin-list h2 { margin: 0 0 6px; font-size: 28px; text-transform: none; letter-spacing: 0; }
.admin-list button {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: #ffb4a2;
  cursor: pointer;
}
@media (max-width: 680px) {
  .admin-list article { grid-template-columns: 1fr; }
}


/* Blog detail — editorial layout aligned with the COREO visual system */
.blog-detail-page {
  min-height: 70vh;
  padding-top: clamp(34px, 4vw, 58px);
  padding-bottom: clamp(72px, 8vw, 118px);
  background:
    radial-gradient(ellipse at 12% 0%, rgba(240,68,22,.13) 0, transparent 34%),
    linear-gradient(180deg, #090807 0%, #050505 100%);
}
.blog-detail-shell { width: min(1120px, 100%); margin: 0 auto; }
.blog-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:clamp(32px,5vw,60px); color:#8f8883; font:500 13px/1.4 var(--body); }
.blog-breadcrumb a { color:#c9c2bd; }
.blog-breadcrumb a:hover { color:var(--orange); }
.blog-article { max-width:none; }
.blog-article-header { width:min(900px,100%); margin:0 auto clamp(28px,4vw,44px); text-align:center; }
.blog-back { display:inline-flex; margin:0 0 26px; color:#c9c2bd; font:600 13px/1 var(--body); text-transform:uppercase; letter-spacing:.08em; }
.blog-back:hover { color:var(--orange); }
.blog-article-meta { margin:0 0 15px; }
.blog-article h1 { margin:0; font-size:clamp(42px,6vw,78px); line-height:.98; font-weight:800; text-transform:uppercase; letter-spacing:-.025em; text-wrap:balance; }
.blog-hero-media { width:min(1040px,100%); aspect-ratio:16/8.4; margin:0 auto clamp(40px,5vw,64px); overflow:hidden; border:1px solid rgba(240,68,22,.28); background:#111; }
.blog-article .blog-hero-media img { width:100%; height:100%; margin:0; object-fit:cover; }
.blog-body { width:min(760px,100%); margin:0 auto; color:#ddd7d2; font:400 17px/1.85 var(--body); }
.blog-body > p:first-child { font-size:clamp(19px,2vw,22px); line-height:1.65; color:#f0ebe7; }
.blog-body p { margin:0 0 24px; color:#ddd7d2; font-size:17px; line-height:1.85; }
.blog-body h2 { margin:52px 0 18px; font-size:clamp(30px,4vw,44px); line-height:1.05; color:#fff; }
.blog-body h3 { margin:38px 0 14px; font-size:clamp(23px,3vw,30px); color:#fff; }
.blog-body ul,.blog-body ol { margin:0 0 28px; padding-left:24px; }
.blog-body li { margin:0 0 10px; line-height:1.75; }
.blog-body strong { color:#fff; }
.blog-body blockquote { margin:36px 0; padding:24px 28px; border-left:3px solid var(--orange); background:#10100f; color:#f1ebe6; font-size:20px; line-height:1.6; }
.blog-body a { color:var(--orange); text-decoration:underline; text-underline-offset:3px; }
.blog-body img { border:1px solid rgba(255,255,255,.08); }
.blog-article-end { width:min(760px,100%); margin:58px auto 0; padding-top:30px; border-top:1px solid rgba(255,255,255,.12); display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:680px) {
  .blog-detail-page { padding-left:18px; padding-right:18px; }
  .blog-article-header { text-align:left; }
  .blog-article h1 { font-size:clamp(38px,12vw,54px); }
  .blog-hero-media { aspect-ratio:4/3; margin-bottom:34px; }
  .blog-body p,.blog-body li { font-size:16px; }
  .blog-body h2 { margin-top:40px; }
  .blog-article-end .button { flex:1 1 100%; }
}

/* Keep pagination hidden when every article fits on one page. */
.blogs-pager[hidden] { display: none; }
.blogs-page-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.blog-card h2, .blog-card p { overflow-wrap: anywhere; }
.blogs-grid > .blogs-status { grid-column: 1 / -1; }

.blogs-page-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; }

.blogs-page main, .blogs-page #blogs-list.coreo-reveal, .blogs-page .blog-card.coreo-reveal, .blogs-page .blog-article.coreo-reveal { opacity: 1; transform: none; }

/* Preserve article/editor formatting inside the reading column. */
.blog-body h1 { text-align: left; font-size: clamp(32px, 4vw, 46px); margin: 36px 0 18px; }
.blog-body h4, .blog-body h5, .blog-body h6 { margin: 28px 0 12px; line-height: 1.3; }
.blog-body pre { overflow-x: auto; padding: 18px; background: #141414; }
.blog-body code { overflow-wrap: anywhere; }
.blog-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 24px 0; }
.blog-body th, .blog-body td { padding: 12px; border: 1px solid #393939; text-align: start; }
.blog-body figure { max-width: 100%; margin: 24px 0; }
.blog-body figcaption { color: var(--muted); font-size: 14px; }