/* --- More Guides layout tuning --- */
.links{
    text-decoration: underline;
}
  /* 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;
  }
  .blog-date{
    color: #888888;
    font-size: 16px;
    padding: 14px 0;

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

  .blog-main-container picture{
    aspect-ratio: 14/6;
    min-height: 22vw;
  }
  .more-guides-title{
      font-size: 24px !important;
      text-align: center;
      padding-bottom: 1em;
      letter-spacing: -0.75px;
  }
  
  .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{
      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;
  }

  /* ===== 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: 22vw;
    }

    /* 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;
    }
  }