/* Start custom CSS *//* ============================================================================
   OMNI MLS — BLOG RESTYLE (CSS only · stays dynamic)
   ----------------------------------------------------------------------------
   HOW TO INSTALL:
   WordPress Admin → Appearance → Customize → Additional CSS
   Paste ALL of this code → Publish.
   (Or via your theme/Elementor "Custom CSS" box.)

   It targets the existing blog markup (theme "omnimls"), so new posts you
   publish are styled automatically — nothing to maintain by hand.
   Scope: everything is limited to the blog page via "main.section-blog".
   The @import line MUST stay on the very first line.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap');

/* ---- Brand tokens (used via the values below) ----
   green #008A4F · ink #0e120f · muted #5f6b63 · line #e3e9e4 · soft #f4f8f5 */

/* Typography for blog content */
.section-blog .block-hero h2,
.section-blog .block-blog h3,
.section-blog .block-blog p,
.section-blog .block-blog a,
.section-blog .block-blog .btn{
  font-family:'Readex Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ============================ PAGE TITLE / HERO ============================ */
.section-blog .block-hero{
  text-align:center;
  padding:66px 20px 8px !important;
}
.section-blog .block-hero h2{
  display:inline-block;
  font-size:clamp(2.2rem,5vw,3.3rem) !important;
  font-weight:700 !important;
  letter-spacing:-.02em;
  color:#0e120f !important;
  margin:0 !important;
}
.section-blog .block-hero h2::before{
  content:"NOTICIAS · RECURSOS";
  display:block;
  font-size:.8rem;
  letter-spacing:.18em;
  font-weight:600;
  color:#008A4F;
  margin-bottom:14px;
}
.section-blog .block-hero h2::after{
  content:"";
  display:block;
  width:64px;height:4px;
  background:#008A4F;
  border-radius:2px;
  margin:18px auto 0;
}

/* ============================ GRID LAYOUT ============================ */
.section-blog .block-blog{ padding:26px 0 84px; }
.section-blog .block-blog .container{ max-width:1180px; }

.section-blog .block-blog .row{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin:0 !important;
}
.section-blog .block-blog .row > .col,
.section-blog .block-blog .row > .col-6{
  width:auto !important;
  max-width:none !important;
  flex:0 1 auto !important;
  padding:0 !important;
  margin:0 !important;
}
@media (max-width:992px){
  .section-blog .block-blog .row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .section-blog .block-blog .row{ grid-template-columns:1fr; }
}

/* ============================ POST CARD ============================ */
.section-blog article.blog-post{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  margin:0 !important;
  background:#fff;
  border:1px solid #e3e9e4;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 26px -14px rgba(14,18,15,.22);
  transition:transform .25s ease, box-shadow .25s ease;
}
.section-blog article.blog-post:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px -20px rgba(0,138,79,.30);
}

/* whole-card clickable: stretch the theme's (empty) post link as an overlay */
.section-blog article.blog-post > a.post-link{
  position:absolute;
  inset:0;
  z-index:2;
  text-indent:-9999px;
  overflow:hidden;
}

/* image */
.section-blog article.blog-post > img.post-image{
  width:100%;
  height:210px;
  object-fit:cover;
  display:block;
  margin:0 !important;
  transition:transform .45s ease;
}
.section-blog article.blog-post:hover > img.post-image{ transform:scale(1.05); }

/* title */
.section-blog article.blog-post > h3{
  font-size:1.12rem;
  line-height:1.32;
  font-weight:600;
  color:#0e120f !important;
  margin:20px 22px 10px !important;
}

/* excerpt (clamped to 3 lines) */
.section-blog article.blog-post > p{
  color:#5f6b63 !important;
  font-size:.93rem;
  font-weight:300;
  line-height:1.6;
  margin:0 22px 18px !important;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* read-more row + button */
.section-blog article.blog-post > p.text-end{
  margin:auto 22px 22px !important;
  text-align:left !important;
}
.section-blog article.blog-post .btn.btn-secondary{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:7px;
  /* Bootstrap 5 buttons are themed via CSS variables — override those too */
  --bs-btn-bg:#008A4F; --bs-btn-border-color:#008A4F;
  --bs-btn-hover-bg:#006b3d; --bs-btn-hover-border-color:#006b3d;
  --bs-btn-active-bg:#006b3d; --bs-btn-active-border-color:#006b3d;
  background-color:#008A4F !important;
  border-color:#008A4F !important;
  color:#fff !important;
  font-weight:500 !important;
  font-size:.85rem !important;
  padding:9px 18px !important;
  border-radius:999px !important;
  box-shadow:0 8px 18px -10px rgba(0,138,79,.6);
  transition:background-color .2s ease, transform .2s ease;
}
.section-blog article.blog-post .btn.btn-secondary:hover{
  background-color:#006b3d !important;
  transform:translateX(2px);
}
.section-blog article.blog-post .btn.btn-secondary::after{ content:"→"; }

/* ============================ FEATURED (first) POST ============================ */
.section-blog .block-blog .row > .col:first-child{ grid-column:1 / -1; }

@media (min-width:900px){
  .section-blog .block-blog .row > .col:first-child article.blog-post{
    display:grid;
    grid-template-columns:1.15fr 1fr;
  }
  .section-blog .block-blog .row > .col:first-child article.blog-post > img.post-image{
    grid-column:1;
    grid-row:1 / 4;
    height:100%;
    min-height:340px;
  }
  .section-blog .block-blog .row > .col:first-child article.blog-post > h3{
    grid-column:2; grid-row:1;
    align-self:end;
    font-size:1.75rem !important;
    line-height:1.2;
    margin:38px 38px 8px !important;
  }
  .section-blog .block-blog .row > .col:first-child article.blog-post > p{
    grid-column:2; grid-row:2;
    font-size:1rem;
    -webkit-line-clamp:4;
    margin:0 38px 20px !important;
  }
  .section-blog .block-blog .row > .col:first-child article.blog-post > p.text-end{
    grid-column:2; grid-row:3;
    align-self:start;
    margin:0 38px 38px !important;
  }
}/* End custom CSS */