.species-hero {
    position: relative;
    background: 
      linear-gradient(90deg, rgb(0 14 6 / 72%) 0%, rgba(20, 32, 25, .45) 100%, rgba(20, 32, 25, .18) 100%, rgba(20, 32, 25, .10) 100%), 
      url(../images/greenfencethai/asset/ต้นยางนา/bg-ต้นยางนา.webp);

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.bg-text-hero {
    position: relative;
    /* left: 40px; */
    /* bottom: 40px; */
 /*    top: 80px;
    z-index: 3;
    width: min(900px, calc(100% - 80px));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); */
    background: rgba(255, 255, 255, .7);
    background: rgba(230, 255, 231, .5);
    
    border-radius: 18px;
/*     overflow: hidden; */
    /* box-shadow: 0 14px 36px rgba(0, 0, 0, .08); */
    backdrop-filter: blur(10px);
    padding:20px;
    margin-top: 50px;
}

.species-hero-grid {
    padding-left: 20px;
    padding-right: 20px;
}

 
#spacing{
  scroll-margin-top:150px;
}
 

.definition-box {
  max-width: 900px;
  margin: auto;
}
.note-box{
  text-align: center;
  max-width: 900px;
  margin: auto;
}
.tip-box{
  text-align: center;
  max-width: 900px;
  margin: auto;
}
.quick-answer-box{
  text-align: center;
  max-width: 900px;
  margin: auto;
}

.feature-grid-3col{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
 



.species-hero-content h1{
  color:#ffffff;
  text-shadow: 0 3px 18px rgb(0 0 0 / 100%);
}
.species-hero-content p {
    background-color: #092a1f;
    padding: 30px;
    border-radius: 10px;
    color: #ffffff;
}
.breadcrumb a {
  color:#ffffff;
}
.current-page {
  color:#ffffff;
}
.species-breadcrumb span:last-child {
  color:#ffffff;  
}



/* overrides */
.detail-card .padding{
    padding: 34px;
    padding-top: 10px;
}


/* ==========================================
   
   Auto-fit Responsive
========================================== */
.size-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.species-size .size-grid{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 360px), 1fr)
        );
    gap:28px;
    align-items:stretch;
}


/* การ์ด */

.species-size .size-card{
    display:flex;
    flex-direction:column;
    height:100%;

    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.species-size .size-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow);
    border-color:#d7ecd8;
}


/* รูปภาพ */

.species-size .size-card img{
    width:100%;
    aspect-ratio:4 / 5;

    object-fit:cover;
    object-position:center;

    background:#f3f5f4;
}


/* เนื้อหาในการ์ด */

.species-size .size-card .body{
    display:flex;
    flex-direction:column;
    flex:1;

    padding:28px;
}

.species-size .size-card h3{
    margin:0 0 14px;
    color:var(--primary);
}

.species-size .size-card p{
    margin:0 0 16px;
}

.species-size .size-card strong{
    display:block;

    margin:4px 0 20px;
    padding:14px 16px;

    border-radius:14px;
    background:var(--primary-light);
    color:var(--primary-dark);

    line-height:1.7;
}


/* ดันลิงก์ไว้ล่างสุดของการ์ด */

.species-size .size-card a{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:auto;

    color:var(--primary);
    font-weight:700;
}

.species-size .size-card a:hover{
    color:var(--primary-dark);
}


/* ตาราง */

.species-size .table-wrapper{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}


/* CTA */

.species-size .cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.species-size .cta > div{
    flex:1;
}

.species-size .cta .btn{
    flex:none;
}


/* ==========================================
   Tablet
========================================== */

@media(max-width:991px){

    .species-size .size-grid{
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(min(100%, 300px), 1fr)
            );

        gap:22px;
    }

    .species-size .cta{
        align-items:flex-start;
        flex-direction:column;
    }

}


/* ==========================================
   Mobile
========================================== */

@media(max-width:640px){

    .species-size .size-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .species-size .size-card{
        border-radius:20px;
    }

    .species-size .size-card img{
        aspect-ratio:1 / 1;
    }

    .species-size .size-card .body{
        padding:22px;
    }

    .species-size .cta{
        padding:22px;
    }

    .species-size .cta .btn{
        width:100%;
    }

}



/* =========================================================
   YANG NA - WINDBREAK COMPARISON
========================================================= */

#compare-windbreak {
    padding: 80px 0;
    background: #f7f8f4;
}


/* Section Heading
--------------------------------------------------------- */

#compare-windbreak .species-section-head {
    max-width: 850px;
    margin: 0 auto 42px;
    padding: 0 20px;
    text-align: center;
}

#compare-windbreak .species-eyebrow {
    display: inline-block;
    margin-bottom: 10px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;

    color: #52734d;
}

#compare-windbreak .species-section-head h2 {
    margin: 0 0 16px;

    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.3;

    color: #26382b;
}

#compare-windbreak .species-section-head p {
    max-width: 760px;
    margin: 0 auto;

    font-size: 17px;
    line-height: 1.85;

    color: #59635b;
}


/* Card Grid
--------------------------------------------------------- */

#compare-windbreak .species-card-grid {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}


/* Card
--------------------------------------------------------- */

#compare-windbreak .species-card {
    position: relative;

    padding: 28px 30px;

    background: #ffffff;
    border: 1px solid #e3e8df;
    border-radius: 16px;

    box-shadow: 0 8px 28px rgba(35, 55, 40, 0.06);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

#compare-windbreak .species-card:hover {
    transform: translateY(-3px);

    border-color: #cbd8c6;

    box-shadow: 0 12px 34px rgba(35, 55, 40, 0.10);
}

#compare-windbreak .species-card h3 {
    margin: 0 0 12px;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;

    color: #304b35;
}

#compare-windbreak .species-card p {
    margin: 0;

    font-size: 16px;
    line-height: 1.8;

    color: #5c645d;
}


/* Internal Links
--------------------------------------------------------- */

#compare-windbreak .species-card a {
    color: #426b45;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition: color 0.2s ease;
}

#compare-windbreak .species-card a:hover {
    color: #294c2e;
}


/* Summary Note
--------------------------------------------------------- */

#compare-windbreak .species-note {
    width: min(1120px, calc(100% - 40px));
    margin: 28px auto 0;

    padding: 22px 26px;

    font-size: 16px;
    line-height: 1.8;

    color: #445247;

    background: #edf3e9;

    border: 1px solid #d9e4d4;
    border-left: 4px solid #66845f;
    border-radius: 12px;
}

#compare-windbreak .species-note strong {
    color: #2f5135;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    #compare-windbreak {
        padding: 64px 0;
    }

    #compare-windbreak .species-section-head {
        margin-bottom: 34px;
    }

    #compare-windbreak .species-card {
        padding: 25px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    #compare-windbreak {
        padding: 52px 0;
    }

    #compare-windbreak .species-section-head {
        margin-bottom: 28px;
    }

    #compare-windbreak .species-section-head h2 {
        font-size: 27px;
        line-height: 1.35;
    }

    #compare-windbreak .species-section-head p {
        font-size: 16px;
        line-height: 1.75;
    }

    #compare-windbreak .species-card-grid {
        width: min(100% - 32px, 1120px);

        grid-template-columns: 1fr;
        gap: 16px;
    }

    #compare-windbreak .species-card {
        padding: 22px 20px;
        border-radius: 14px;
    }

    #compare-windbreak .species-card h3 {
        font-size: 18px;
    }

    #compare-windbreak .species-card p {
        font-size: 15px;
        line-height: 1.75;
    }

    #compare-windbreak .species-note {
        width: min(100% - 32px, 1120px);

        margin-top: 20px;
        padding: 18px 18px;

        font-size: 15px;
        line-height: 1.75;
    }

}