/* ===============================================================
   Coheron Website 2025 — Blog module
   assets/blogs/blogs.css   (loaded for $Page == 'blogs' via inc/css.php)

   Bootstrap 5.3.3 handles the grid, .ratio and spacing utilities.
   This file only sets type, colour and the few custom bits.
   Fonts are inherited from inc/fonts.php — nothing is imported here.
   =============================================================== */

.blogs_sec-head,
.blogs_sec-featured,
.blogs_sec-list,
.blog_sec-article{
  --blog-ink:#16181B;
  --blog-muted:#6E7378;
  --blog-rule:#E2E1DC;
  --blog-accent:#17423B;   /* swap for the Coheron brand colour */
  color:var(--blog-ink);
}

/* ---------------------------------------------------------------
   LANDING — masthead
   --------------------------------------------------------------- */
.blogs_sec-head{ padding:clamp(2.5rem,10vw,13rem) 0 1.25rem;}

.blogs-masthead__title{
  margin:0;
  font-size:clamp(3rem,1rem + 8vw,7rem);
  font-weight:300;
  letter-spacing:-.03em;
  line-height:.95;
}
.blogs-masthead__intro{
  margin:1rem 0 0;
  max-width:52ch;
  color:var(--blog-muted);
}
.blogs_sec-head .container > .row{
  border-bottom:1px solid var(--blog-ink);
  padding-bottom:1.25rem;
}

/* ---------------------------------------------------------------
   LANDING — featured (latest) blog
   --------------------------------------------------------------- */
.blogs_sec-featured{ padding:clamp(2rem,5vw,4rem) 0 }

.blogs-featured__media,
.blogs-row__media{
  overflow:hidden;
  background:#EFEEE9;
}
.blogs-featured__media img,
.blogs-row__media img,
.blog-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.blogs-featured__media img{ transition:transform .6s ease }
.blogs-featured:hover .blogs-featured__media img{ transform:scale(1.02) }

.blogs-meta{
  margin:0 0 .9rem;
  font-size:.8125rem;
  color:var(--blog-muted);
}
.blogs-meta__sep{ padding:0 .35rem }

.blogs-featured__title{
  margin:0 0 1rem;
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.125rem);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.01em;
}
.blogs-featured__title a{ color:inherit; text-decoration:none }
.blogs-featured__title a:hover{ text-decoration:underline; text-underline-offset:5px }

.blogs-featured__excerpt{
  margin:0 0 1.6rem;
  max-width:56ch;
  color:#3A3E42;
  line-height:1.7;
}

.blogs-readmore{
  display:inline-block;
  /* font-size:.8125rem; */
  /* letter-spacing:.02em; */
  color:inherit;
  text-decoration:none;
  padding-bottom:.3rem;
  border-bottom:1px solid var(--blog-ink);
}
.blogs-readmore:hover{ color:var(--blog-accent); border-color:var(--blog-accent) }

/* ---------------------------------------------------------------
   LANDING — list
   --------------------------------------------------------------- */
.blogs_sec-list{ padding:0 0 clamp(3rem,7vw,5rem) }

.blogs-list__head{
  margin:0 0 0;
  padding-bottom:1rem;
  border-bottom:1px solid var(--blog-ink);
  font-size:clamp(2.5rem,1.4rem + 4.4vw,4.5rem);
  font-weight:300;
  letter-spacing:-.02em;
}

.blogs-list{ margin:0; padding:0 }
.blogs-item{ border-bottom:1px solid var(--blog-rule) }
.blogs-item[hidden]{ display:none !important }
.blogs-row{ padding:2rem 0 }

.blogs-row__date{
  margin:0;
  font-size:.8125rem;
  color:var(--blog-muted);
}
.blogs-row__media img{
  filter:grayscale(1);
  transition:filter .45s ease,transform .6s ease;
}
.blogs-row:hover .blogs-row__media img{ filter:grayscale(0); transform:scale(1.03) }

.blogs-row__title{
  margin: 0 0 1.16rem;
  font-size: 1.725rem;
  font-weight:500;
  line-height: 1.1;
}
.blogs-row__title a{ color:inherit; text-decoration:none }
.blogs-row__title a:hover{ text-decoration:underline; text-underline-offset:4px }

.blogs-row__excerpt{
  margin:0 0 1.25rem;
  /* font-size:.9375rem; */
  line-height: 1.3;
  color:var(--blog-muted);
  max-width:62ch;
}

.blogs-loadmore{ padding:2.5rem 0 0 }
.blogs-loadmore__btn{
  color: var(--color-11);
  /* font:inherit; */
  /* font-size:.8125rem; */
  /* letter-spacing:.04em; */
  background:none;
  border:0;
  border-bottom: 3px solid var(--color-11);
  padding:0 0 .35rem;
  cursor:pointer;
}
.blogs-loadmore__btn:hover{ color:var(--blog-accent); border-color:var(--blog-accent) }

/* ===============================================================
   INNER ARTICLE
   =============================================================== */
.blog_sec-article{ padding:10rem 0 clamp(3rem,7vw,5rem) }

.blog-topbar{ gap:1rem; padding:0 0 2.5rem }

.blog-nav{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--blog-ink);
}
.blog-nav__icon{
  width:2.5rem;height:2.5rem;
  display:grid;place-items:center;
  background:#fff;
  border:1px solid var(--blog-rule);
  border-radius:2px;
  flex:none;
}
.blog-nav:hover{ color:var(--blog-ink) }
.blog-nav:hover .blog-nav__icon{ background:var(--blog-ink); color:#fff; border-color:var(--blog-ink) }
.blog-nav svg{ width:16px;height:16px }

.blog-chip{
  display:inline-block;
  padding:.35rem .7rem;
  background: linear-gradient(106deg, #ED1750 18.69%, #3B4B95 80.29%, #065BAA 90.98%);
  color:#fff;
  font-size: 1rem;
  letter-spacing: .1em;
  /* text-transform:uppercase; */
  border-radius:2px;
}

.blog-article__title{
  margin:0;
  text-align:center;
  font-size:clamp(2.25rem,1.3rem + 3.8vw,4rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.blog-byline{
  margin:1.5rem 0 0;
  text-align:center;
  font-size:.875rem;
}
.blog-byline strong{ font-weight:600 }
.blog-byline > span{
  display:block;
  margin-top:.35rem;
  font-size:.8125rem;
  color:var(--blog-muted);
}

.blog-hero{
  margin:clamp(2rem,5vw,3.5rem) 0 0;
  background:#EFEEE9;
  overflow:hidden;
}

.blog-share{
  padding:clamp(2rem,5vw,3rem) 0 1.75rem;
}
.blog-share__label{
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--blog-muted);
  margin-right:.35rem;
}
.blog-share a{
  width:2.25rem;height:2.25rem;
  display:grid;place-items:center;
  background:#fff;
  border:1px solid var(--blog-rule);
  border-radius:2px;
  color:var(--blog-ink);
}
.blog-share a:hover{ background:var(--blog-ink); color:#fff; border-color:var(--blog-ink) }
.blog-share svg{ width:15px;height:15px;fill:currentColor }

.blog-copy > p{
  /* margin:0 0 1.4rem; */
  /* font-size:1.0625rem; */
  /* line-height: 1.5; */
  /* color:#2B2F33; */
}
.blog-copy__lead{
  font-size:clamp(1.25rem,1.05rem + .6vw,1.5rem) !important;
  font-weight:600;
  line-height:1.35 !important;
  color:var(--blog-ink) !important;
  margin-bottom:1.8rem !important;
}
.blog-copy strong{ font-weight:600; color:var(--blog-ink) }

.blog-quote{
  color: var(--color-11);
  margin:2.5rem 0;
  padding:2.25rem 2rem;
  background:#fff;
  border-left: 2px solid var(--color-11);
  font-size:1.375rem;
  line-height:1.45;
  text-align:center;
}
.blog-quote p{ margin:0 }
.blog-quote::before{
  content:"\201C";
  display:block;
  font-size:3rem;
  line-height:.6;
  color: var(--color-11);
  /* opacity:.5; */
  margin-bottom:.5rem;
}

.blog-note{
  margin:3rem 0 0 !important;
  padding-top:1.25rem;
  border-top:1px solid var(--blog-rule);
  font-size: 1rem !important;
  font-style:italic;
  line-height:1.6 !important;
  color:var(--blog-muted) !important;
}

.blog-foot{
  margin:clamp(3rem,7vw,5rem) 0 0;
  padding-top:2rem;
  border-top:1px solid var(--blog-ink);
  gap:1rem;
}
.blog-foot__label{
  display:block;
  margin-bottom:.5rem;
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--blog-muted);
}
.blog-foot__title{
  display:inline-block;
  max-width:32ch;
  font-size:1.5rem;
  font-weight:500;
  line-height:1.25;
  color:inherit;
  text-decoration:none;
}
.blog-foot__title:hover{ color:inherit; text-decoration:underline; text-underline-offset:5px }

@media (max-width:575.98px){
  .blog-quote{ padding:1.75rem 1.25rem; font-size:1.125rem }
  .blog-foot__title{ font-size:1.25rem }
}

@media (prefers-reduced-motion:reduce){
  .blogs-featured__media img,
  .blogs-row__media img{ transition:none }
}