/* ==========================================================================
   Blog section — Plumbing Advice & Local Service Guides
   Figma canvas: 1920px. Cards at left:240px, width:338, height:500
   4 cards × 338 = 1352px + 3 gaps × 29px = 1440px content width
   Arrow left: 170px from edge | Arrow right: 170px from edge (1920-1710-40)
   ========================================================================== */

   .blog-section {
    --blog-navy:    #00274e;
    --blog-ink:     #040a10;
    --blog-yellow:  #fab72a;
    --card-w:       338px;
    --card-h:       500px;
    --card-gap:     29px;
    --arrow-size:   40px;
  
    background: #fff;
    padding: 78px 0 96px;
  }
  
  /* ==========================================================================
     Heading
     ========================================================================== */
  
  .blog-section__title {
    margin: 0 0 16px;
    text-align: center;
    font-family: 'Gilroy-ExtraBoldItalic', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 54px;
    line-height: 72px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--blog-navy);
  }
  
  .blog-section__title-line {
    display: block;
    font-family: 'Gilroy-ExtraBoldItalic', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 54px;
    line-height: 72px;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    color: #00274e;
  }

  .blog-section__title-desktop {
    display: block;
  }

  .blog-section__title-mobile {
    display: none;
  }
  
  /* ==========================================================================
     Lead text
     ========================================================================== */
  
  .blog-section__lead {
    margin: 0 auto 60px;
    font-family: 'Gilroy-Medium', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0;
    text-align: center;
    color: #040a10;
  }

  .blog-section__lead-desktop {
    display: inline;
  }

  .blog-section__lead-mobile {
    display: none;
  }
  
  /* ==========================================================================
     Carousel — flex row: [arrow-prev] [grid] [arrow-next]
     The wrapper is centred and wide enough to hold cards + arrow zones.
     Figma: 170px arrow zone each side + 1440px cards = 1780px total row.
     ========================================================================== */
  
  .blog-section__carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1780px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    gap: 0;
  }
  
  /* ==========================================================================
     Nav arrows — flex siblings of the grid, NOT absolutely positioned
     Figma: width 40, height 40, border-radius 50%
     Prev: bg #FAB72A4D (yellow 30%) | Next: bg #FAB72A (solid)
     Each arrow zone is ~130px wide so the arrow sits centred in that space
     ========================================================================== */
  
  .blog-section__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 130px;        /* fixed zone width; arrow is centred inside */
    height: var(--card-h);  /* same height as cards so vertical centering works */
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  
  /* The visible circle */
  .blog-section__nav::before {
    content: '';
    display: flex;
    width: var(--arrow-size);   /* 40px */
    height: var(--arrow-size);  /* 40px */
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  .blog-section__nav--prev::before {
    background: #fab72a4d;      /* Figma: #FAB72A4D */
  }
  
  .blog-section__nav--next::before {
    background: #fab72a;        /* Figma: #FAB72A */
  }
  
  /* SVG icon sits on top of the ::before circle via absolute positioning trick */
  .blog-section__nav {
    position: relative;
  }
  
  .blog-section__nav svg {
    position: absolute;
    width: 16px;
    height: 16px;
    color: #fff;
    pointer-events: none;
  }
  
  .blog-section__nav:hover::before {
    transform: scale(1.08);
    transition: transform .15s;
  }
  
  /* ==========================================================================
     Card grid — centred flex child between the two arrows
     ========================================================================== */
  
  .blog-section__grid {
    display: grid;
    grid-template-columns: repeat(4, var(--card-w));
    gap: var(--card-gap);
    flex: 0 0 auto;
  }
  
  /* ==========================================================================
     Cards — 338 × 500px per Figma
     ========================================================================== */
  
  .blog-section__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: var(--card-w);
    height: var(--card-h);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 32px rgba(11, 27, 52, .14);
  }
  
  .blog-section__card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .blog-section__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(11, 27, 52, 0)    30%,
      rgba(11, 27, 52, .55)  62%,
      rgba(11, 27, 52, .88) 100%
    );
  }
  
  .blog-section__body {
    position: relative;
    z-index: 2;
    padding: 20px 18px 24px;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
  }
  
  .blog-section__tag {
    display: block;
    margin-bottom: 6px;
    font-family: 'Gilroy-Medium', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: rgba(255, 255, 255, .85);
  }
  
  .blog-section__card-title {
    margin: 0 0 14px;
    font-family: 'Gilroy-SemiBold', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
  }
  
  .blog-section__read {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }
  
  .blog-section__read-label {
    font-family: 'Gilroy-Medium', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--blog-yellow);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  
  .blog-section__read-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  
  .blog-section__read-ico svg {
    width: 20px;
    height: 20px;
  }
  
  /* ==========================================================================
     View All Blogs button
     Figma: width 222, height 66, padding 20px 30px, border-radius 50px,
            border-width 1px, gap 10px, background #FAB72A
     ========================================================================== */
  
  .blog-section__more {
    margin-top: 60px;
    text-align: center;
  }
  
  .blog-section__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 222px;
    height: 66px;
    padding: 20px 30px;
    border: 1px solid transparent;
    border-radius: 50px;
    background: var(--blog-yellow);
    color: var(--blog-navy);
    font-family: 'Gilroy-ExtraBold', sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(246, 166, 35, .35);
    transition: background .15s;
  }
  
  .blog-section__btn:hover {
    background: #e8920a;
  }

  .blog-section__btn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--blog-navy);
    color: var(--blog-navy);
    flex-shrink: 0;
  }
  
  .blog-section__btn-ico svg {
    width: 13px;
    height: 13px;
  }
  
  /* ==========================================================================
     Large screens (desktop) — centred header per Figma
     ========================================================================== */

  @media (min-width: 1025px) {
    .blog-section__title {
      box-sizing: border-box;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto 16px;
      padding: 0;
      text-align: center;
    }

    .blog-section__title-desktop {
      display: block;
    }

    .blog-section__title-mobile {
      display: none;
    }

    .blog-section__title,
    .blog-section__title-line {
      font-family: 'Gilroy-ExtraBoldItalic', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 54px;
      line-height: 72px;
      letter-spacing: 0;
      text-align: center;
      text-transform: uppercase;
      color: #00274e;
    }

    .blog-section__title-line {
      display: block;
    }

    .blog-section__lead {
      box-sizing: border-box;
      display: block;
      width: 100%;
      max-width: 920px;
      margin: 0 auto 60px;
      padding: 0;
      font-family: 'Gilroy-Medium', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 18px;
      line-height: 28px;
      letter-spacing: 0;
      text-align: center;
      color: #040a10;
    }

    .blog-section__lead-desktop {
      display: inline;
    }

    .blog-section__lead-mobile {
      display: none;
    }
  }

  @media (min-width: 1025px) and (max-width: 1600px) {
    .blog-section__carousel {
      max-width: 1140px;
      padding: 0 16px;
    }

    .blog-section__nav {
      display: none;
    }

    .blog-section__grid {
      grid-template-columns: repeat(3, var(--card-w));
      justify-content: center;
      width: 100%;
      gap: 24px;
    }
  }

  /* ==========================================================================
     Responsive
     ========================================================================== */
  
  /* ─────────────────────────────────────────────────────────────────────────────
     TABLET  769px – 1024px
     2-column grid, arrows hidden, centred block layout
  ───────────────────────────────────────────────────────────────────────────── */
  @media (max-width: 1024px) {
    .blog-section {
      padding: 56px 0 72px;
    }
  
    /* Heading: stays centred, scales down */
    .blog-section__title,
    .blog-section__title-line {
      font-size: 38px;
      line-height: 50px;
      text-align: center;
    }
  
    .blog-section__lead {
      font-size: 16px;
      line-height: 26px;
      text-align: center;
      margin: 0 auto 36px;
      padding: 0 32px;
      max-width: 720px;
    }

    .blog-section__lead-desktop {
      display: inline;
    }

    .blog-section__lead-mobile {
      display: none;
    }

    .blog-section__title-desktop {
      display: block;
    }

    .blog-section__title-mobile {
      display: none;
    }
  
    /* Carousel becomes a plain block — no flex row needed */
    .blog-section__carousel {
      display: block;
      padding: 0 32px;
      max-width: 100%;
    }
  
    /* Arrows hidden on tablet */
    .blog-section__nav {
      display: none;
    }
  
    /* 2-column grid */
    .blog-section__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      max-width: 720px;
      margin: 0 auto;
      flex: none;
    }
  
    .blog-section__card {
      width: auto;
      height: 400px;
    }
  
    .blog-section__more {
      margin-top: 44px;
    }
  
    .blog-section__btn {
      width: auto;
      height: auto;
      padding: 16px 28px;
    }
  }
  
  /* ─────────────────────────────────────────────────────────────────────────────
     MOBILE  ≤ 768px
     Horizontal swipe carousel — one card visible + peek of next card
     Title and lead: centred per mobile reference
     Arrows: hidden (swipe is the interaction)
     "View All Blogs" button: centred below the carousel
  ───────────────────────────────────────────────────────────────────────────── */
  @media (max-width: 768px) {
    .blog-section {
      padding: 40px 0 56px;
      overflow: visible;
    }

    /* h2 — 0% letter-spacing per Figma */
    .blog-section__title {
      box-sizing: border-box;
      width: 100%;
      max-width: 430px;
      margin: 0 auto 14px;
      padding: 0 20px;
      overflow: visible;
      font-family: 'Gilroy-ExtraBoldItalic', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 30px;
      line-height: 40px;
      letter-spacing: 0;
      text-align: center;
      text-transform: uppercase;
      color: #00274e;
    }

    /* span lines — 12% letter-spacing per Figma */
    .blog-section__title-mobile .blog-section__title-line {
      display: block;
      font-family: 'Gilroy-ExtraBoldItalic', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 30px;
      line-height: 40px;
      letter-spacing: 0.12em;
      text-align: center;
      text-transform: uppercase;
      color: #00274e;
    }

    .blog-section__title-mobile {
      display: block;
      overflow: visible;
    }

    /* Lead — centred, three lines */
    .blog-section__lead {
      box-sizing: border-box;
      width: 100%;
      max-width: 390px;
      margin: 0 auto 24px;
      padding: 0 20px;
      font-family: 'Gilroy-Medium', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16px;
      line-height: 26px;
      letter-spacing: 0;
      text-align: center;
      color: #040a10;
    }

    .blog-section__lead-desktop {
      display: none;
    }

    .blog-section__lead-mobile {
      display: block;
    }

    .blog-section__title-desktop {
      display: none;
    }
  
    /* ── Carousel: full-width scroll container ── */
    .blog-section__carousel {
      display: block;
      padding: 0;
      max-width: 100%;
      overflow: hidden;
    }
  
    /* Arrows hidden — swipe only */
    .blog-section__nav {
      display: none;
    }
  
    /*
      Swipe track:
      - overflow-x: auto  → enables horizontal scroll
      - scroll-snap-type  → snaps to each card
      - padding-left: 20px → matches title/lead left edge
      - padding-right: 40px → leaves gap so next card peeks in
      - No flex: none override needed — grid switches to flex row
    */
    .blog-section__grid {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 14px;
      padding-left: 20px;
      padding-right: 40px;   /* this gap shows the peek of next card */
      padding-top: 4px;
      padding-bottom: 8px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      /* Reset grid-specific properties */
      grid-template-columns: none;
      max-width: none;
      margin: 0;
      flex: none;
      box-sizing: border-box;
      width: 100%;
    }
  
    .blog-section__grid::-webkit-scrollbar {
      display: none;
    }
  
    /*
      Each card:
      - flex: 0 0 calc(100vw - 60px) → fills viewport minus left pad (20px)
        and right peek gap (40px), so next card peeks ~40px
      - scroll-snap-align: start → snaps cleanly to left edge
      - height: 300px → matches mobile screenshot proportions
    */
    .blog-section__card {
      flex: 0 0 330px;              /* Figma mobile: width 330 */
      width: 330px;                 /* Figma mobile: width 330 */
      height: 400px;                /* Figma mobile: height 400 */
      scroll-snap-align: start;
      border-radius: 14px;
    }
  
    .blog-section__card img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;            /* image fills card fully */
      object-position: center;
    }
  
    /* ── Button: centred, fixed Figma size ── */
    .blog-section__more {
      margin-top: 32px;
      text-align: center;
      padding: 0 20px;
    }
  
    .blog-section__btn {
      width: 222px;
      height: 66px;
      padding: 20px 30px;
      font-size: 15px;
    }
  }
  
  /* ─────────────────────────────────────────────────────────────────────────────
     SMALL MOBILE  ≤ 400px
     Slightly tighter sizing
  ───────────────────────────────────────────────────────────────────────────── */
  @media (max-width: 400px) {
    .blog-section__title {
      font-size: 30px;
      line-height: 40px;
      letter-spacing: 0;
    }

    .blog-section__title-mobile .blog-section__title-line {
      font-size: 30px;
      line-height: 40px;
      letter-spacing: 0.12em;
    }

    .blog-section__lead {
      max-width: min(340px, calc(100% - 40px));
      font-size: 15px;
      line-height: 24px;
    }
  
    .blog-section__card {
      flex: 0 0 calc(100vw - 44px);
      width: calc(100vw - 44px);
      height: 270px;
    }
  
    .blog-section__grid {
      padding-left: 16px;
      padding-right: 28px;
      gap: 12px;
    }
  
    .blog-section__btn {
      width: auto;
      padding: 16px 24px;
      height: auto;
    }
  }