/* --- More Guides layout tuning --- */
  
/* Desktop / default: simple row */
.more-guides-section .js-more-guides-row {
  display: flex;
  gap: 16px;              /* nice even space between tiles */
  flex-wrap: wrap;
  justify-content: center; /* make sure first card starts at left */
  overflow: visible;
}

/* Desktop tiles inside More Guides */
.more-guides-section .plate {
  padding-bottom: 0;      /* remove big bottom padding from main grid */
  flex-shrink: 0;
  min-width: 30%;
  max-width: 30%;
  overflow: visible;      /* ensure title/text not clipped */
}

.more-guides-section .plate:last-child {
  margin-right: 0;
}

.readmore{
  font-weight: 600;
  text-decoration: underline;
}
.plate > p{
    margin-top: 5px;
    font-size: 12px;
}

.color-grey{
  color: grey;
}
.blog-main-container picture{
    min-height: 25vw;
}
.more-guides-title{
    font-size: 24px !important;
    text-align: center;
    padding-bottom: 1em;
    letter-spacing: -0.75px;
}

.blog-container > .h2 {
    font-size: 44px;
    text-align: center;
    padding-bottom: 70px;
    letter-spacing: -0.75px;
}

.blog-banner-overlay{
    z-index: 3;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
}
.blog-container{
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
}

.blog-banner-overlay a{
    color: white;
    border: 2px solid white;
    font-size: .85vw;
    font-weight: 600;
    padding: .85rem 1.25rem;
}

.blog-banner-overlay a:hover{
    color: #a0a3ca;
    background-color: white;
}

.blog-main{
    margin: 1rem 5rem;
}

.blog-banner-overlay img {
    width: 30vw; 
    max-width: 100%; 
    height: auto; 
}

.blog-main p{
    color: #111;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.blog-main .blog-breadcrumb{
    font-size: 12px;
}

.blog-main-container,
.more-guides-section {
    max-width: 900px;
    min-height: 25vw;
}

.blog-main > h2{
    font-family: Poppins;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px; 
}

.blog-main .blog-img-caption{
    font-style: Italic;
    font-size: 12px;
    line-height: 18px;
    width: 250px;
}

.blog-main a.btn{
    width: max-content;
}

.blog-main a.btn:hover{
    color: black;
    border: 1px solid black;
    background-color: white;
}
.links{
    text-decoration: underline;
    font-weight: 600;
    
}
.sourcelink{
    font-style: italic !important;
}

/* ===== MOBILE: make More Guides a slider, show 75% of card ===== */
@media only screen and (max-width: 767px) {
  .more-guides-section{
      min-height: auto;
      width: 100%;
  }

  .blog-main-container picture{
      min-height: 42vw;
  }

  /* Slider track */
  .more-guides-section .js-more-guides-row {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      gap: 16px;
      justify-content: left; /* first card fully visible */
      overflow-y: hidden;
  }

  /* Each slide: 75% width, full height for image + text */
  .more-guides-section .plate {
      max-width: 75%;
      padding-bottom: 0;
      scroll-snap-align: start;
      overflow: visible;
  }

  .blog-banner-overlay a{
      font-size: 2vw;
  }

  .blog-banner-overlay img {
      width: 65vw; 
  }

  .blog-main{
      margin: 1rem 1rem;
  }

  .blog-main-container{
      max-width: 100%;
  }

  .blog-hero{
      margin: 0 -1rem;
  }
}