/* Blog Listing template styles — OceanWP child theme
   Enqueued by page-blog-listing.php */

  :root{
    --navy-deep:#0d4a5c;
    --navy-mid:#125a70;
    --teal:#4fb4c4;
    --teal-dark:#3a9aab;
    --bg-light:#f4f6f7;
    --card-white:#ffffff;
    --text-dark:#16242b;
    --text-muted:#5b6b71;
    --border-soft:#e6eaec;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    font-family:'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
    background:var(--bg-light);
    color:var(--text-dark);
    line-height:1.5;
  }
  a{text-decoration:none;color:inherit;}

  /* ===== FULL-WIDTH BREAKOUT (escapes OceanWP's content container) ===== */
  .blt-breakout{
    width:100vw;
    position:relative;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;
    overflow-x:hidden;
  }

  /* ===== HERO ===== */
  .hero{
    position:relative;
    width:100%;
    background-image:url('../images/hero-hexagon.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
    padding:90px 24px 110px;
    text-align:center;
    color:#fff;
  }
  .hero-inner{position:relative; z-index:1; max-width:820px; margin:0 auto;}
  .hero h1{
    font-size:clamp(2.1rem, 4.4vw, 3.2rem);
    font-weight:800;
    margin-bottom:18px;
    letter-spacing:-0.5px;
  }
  .hero h2{
    font-size:clamp(1.2rem, 2.4vw, 1.6rem);
    font-weight:700;
    color:var(--teal);
    margin-bottom:22px;
  }
  .hero p{
    font-size:1.05rem;
    color:rgba(255,255,255,0.85);
    max-width:640px;
    margin:0 auto;
  }

  /* ===== MAIN LAYOUT ===== */
  .main-wrap{
    max-width:1600px;
    margin:0 auto;
    padding:60px 24px 20px;
    display:grid;
    grid-template-columns:260px 1fr;
    gap:28px;
    align-items:start;
  }

  /* ===== SIDEBAR ===== */
  .sidebar{
    background:var(--card-white);
    border-radius:14px;
    padding:22px;
    box-shadow:0 2px 10px rgba(15,50,60,0.06);
  }
  .sidebar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
  }
  .sidebar h3{
    font-size:1.15rem;
    font-weight:800;
    letter-spacing:0.5px;
  }
  .sidebar-close{
    display:none;
    background:#f1f3f4;
    border:none;
    border-radius:50%;
    width:32px;
    height:32px;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:var(--text-dark);
    flex-shrink:0;
  }
  .sidebar-close svg{width:16px; height:16px;}

  /* Mobile filter trigger button (hidden on desktop) */
  .filter-toggle{
    display:none;
    align-items:center;
    gap:10px;
    background:var(--teal);
    color:#fff;
    border:none;
    border-radius:10px;
    padding:13px 18px;
    font-size:0.98rem;
    font-weight:700;
    cursor:pointer;
    margin-bottom:20px;
  }
  .filter-icon{width:18px; height:18px; flex-shrink:0;}

  .sidebar-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(10,30,38,0.5);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:999;
  }
  .sidebar-backdrop.open{
    opacity:1;
    pointer-events:auto;
  }

  .cat-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  /* ===== BLOG GRID ===== */
  .blog-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
  }
  .blog-card{
    background:var(--card-white);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(15,50,60,0.06);
    display:flex;
    flex-direction:column;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .blog-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 24px rgba(15,50,60,0.12);
  }
  .thumb{
    position:relative;
    height:170px;
    background:linear-gradient(160deg,#0f5064 0%, #1a7288 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .thumb::before{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:38%;
    background:linear-gradient(180deg, rgba(150,190,200,0) 0%, rgba(150,190,200,0.55) 100%);
  }
  .laptop{width:110px; position:relative; z-index:1;}
  .laptop-screen{
    width:100px;
    height:66px;
    background:#f4f6f7;
    border-radius:4px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.25);
  }
  .wp-logo{
    width:36px; height:36px;
    border-radius:50%;
    border:2.5px solid #1b5a86;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#1b5a86;
    font-weight:800;
    font-size:19px;
    font-family:Georgia, serif;
  }
  .laptop-base{
    width:118px;
    height:10px;
    background:#1b5a86;
    border-radius:0 0 6px 6px;
    margin:0 auto;
    margin-top:-2px;
  }
  .card-body{padding:18px 18px 20px;}
  .card-tag{
    font-size:0.7rem;
    font-weight:700;
    letter-spacing:0.6px;
    color:var(--teal-dark);
    text-transform:uppercase;
    margin-bottom:8px;
    display:block;
  }
  .card-title{
    font-size:0.98rem;
    font-weight:700;
    color:var(--text-dark);
    margin-bottom:16px;
    min-height:44px;
  }
  .read-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--teal);
    color:#fff;
    font-size:0.88rem;
    font-weight:600;
    padding:9px 18px;
    border-radius:22px;
    border:none;
    cursor:pointer;
    transition:background .15s ease;
  }
  .read-btn:hover{background:var(--teal-dark);}

  /* ===== CTA BANNER ===== */
  .cta-wrap{
    max-width:1600px;
    margin:60px auto 80px;
    padding:0 24px;
  }
  .cta-banner{
    background:linear-gradient(100deg, #0d4a5c 0%, #1a7288 100%);
    border-radius:16px;
    padding:44px 48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    color:#fff;
  }
  .cta-text h3{
    font-size:1.5rem;
    font-weight:800;
    margin-bottom:10px;
  }
  .cta-text p{
    color:rgba(255,255,255,0.85);
    max-width:480px;
    font-size:0.98rem;
  }
  .cta-btn{
    background:var(--teal);
    color:#fff;
    font-weight:700;
    font-size:0.98rem;
    padding:14px 28px;
    border-radius:24px;
    border:none;
    white-space:nowrap;
    cursor:pointer;
    transition:background .15s ease;
  }
  .cta-btn:hover{background:var(--teal-dark);}

  /* ===== RESPONSIVE ===== */
  @media (max-width:1100px){
    .blog-grid{grid-template-columns:repeat(2, 1fr);}
    .main-wrap{grid-template-columns:1fr;}
  }

  /* Mobile: sidebar becomes a slide-in drawer, opened via the filter button */
  @media (max-width:768px){
    .filter-toggle{display:inline-flex;}
    .sidebar-backdrop{display:block;}

    .sidebar{
      position:fixed;
      top:0;
      left:0;
      height:100vh;
      width:82%;
      max-width:320px;
      border-radius:0;
      overflow-y:auto;
      transform:translateX(-100%);
      transition:transform .3s ease;
      z-index:1000;
      box-shadow:2px 0 24px rgba(0,0,0,0.2);
    }
    .sidebar.open{transform:translateX(0);}
    .sidebar-close{display:flex;}
  }

  @media (max-width:640px){
    .blog-grid{grid-template-columns:1fr;}
    .hero{padding:60px 20px 80px;}
    .cta-banner{flex-direction:column; align-items:flex-start;}
  }

  /* ===== CATEGORY LINKS (anchor-based, real WP navigation) ===== */
  .cat-list a{
    display:block;
    width:100%;
    text-align:left;
    padding:12px 14px;
    border-radius:8px;
    background:#f1f3f4;
    color:var(--text-dark);
    font-size:0.98rem;
    transition:background .15s ease, color .15s ease;
  }
  .cat-list a:hover{background:#e4eaec;}
  .cat-list a.active{
    background:var(--teal);
    color:#fff;
    font-weight:600;
  }

  /* ===== POST THUMBNAILS (real featured images) ===== */
  .thumb-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .thumb-link{display:block;}

  /* ===== PAGINATION ===== */
  .blog-pagination{
    grid-column:1 / -1;
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:16px;
    flex-wrap:wrap;
  }
  .blog-pagination a,
  .blog-pagination span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 10px;
    border-radius:8px;
    background:var(--card-white);
    color:var(--text-dark);
    font-size:0.92rem;
    box-shadow:0 2px 8px rgba(15,50,60,0.06);
  }
  .blog-pagination .current{
    background:var(--teal);
    color:#fff;
    font-weight:700;
  }
  .no-posts{
    grid-column:1 / -1;
    text-align:center;
    color:var(--text-muted);
    padding:40px 0;
  }