/* Shared support-page hero follows the Pradu two-column layout. */
.species-hero.pradiphat-support-hero {
    padding: 40px 0 76px;
    background-image: linear-gradient(90deg, rgba(8,31,23,.95), rgba(8,31,23,.65) 60%, rgba(8,31,23,.36)),
        var(--support-hero-image);
    background-position: center;
}
.species-hero.pradiphat-support-hero::before,
.species-hero.pradiphat-support-hero::after { display: none; }
.pradiphat-support-hero .species-hero-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    gap: 56px; padding: 0; align-items: end;
}
.pradiphat-support-hero .species-hero-content { min-width: 0; max-width: none; margin: 0; text-align: left; }
.pradiphat-support-hero .species-hero-content h1 {
    font-size: clamp(2.1rem, 3.8vw, 3.4rem); line-height: 1.45;
    letter-spacing: -.035em; text-shadow: none; text-wrap: balance; margin: 20px 0;
}
.species-hero.pradiphat-support-hero .species-badge {
    color: #eee4c8; background: rgba(255,255,255,.08);
    border: 1px solid rgba(238,228,200,.3); font-size: .85rem;
}
.pradiphat-support-hero .species-hero-content p {
    color: #e1e8df; background: none; padding: 0; border: 0; border-radius: 0;
    font-size: 1.02rem; margin: 0 0 32px; max-width: none;
}
.species-hero.pradiphat-support-hero .hero-action { justify-content: flex-start; }
.species-hero.pradiphat-support-hero .btn-primary { color: #153a2a; background: #e8d8a8; border-color: #e8d8a8; }
.species-hero.pradiphat-support-hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.55); background: transparent; }
.species-hero.pradiphat-support-hero .btn-outline:hover { background: rgba(255,255,255,.12); }
.pradiphat-support-hero .pradiphat-hero-note {
    min-width: 0; padding: 32px; border: 1px solid rgba(238,228,200,.4);
    border-top: 3px solid #cbb578; border-radius: 6px 6px 24px 24px;
    background: rgba(12,37,27,.84);
}
.pradiphat-support-hero .pradiphat-eyebrow {
    display: block; margin-bottom: 14px; font-size: .8rem;
    font-weight: 700; letter-spacing: .05em; color: #e5d2a0;
}
.pradiphat-support-hero .pradiphat-hero-note h2 { color: #fff; margin: 0 0 20px; font-size: clamp(1.45rem, 2vw, 1.9rem); line-height: 1.5; text-align: left; }
.pradiphat-support-hero .pradiphat-hero-note ul { padding-left: 20px; margin: 0 0 24px; }
.pradiphat-support-hero .pradiphat-hero-note li { color: #e1e8df; font-size: .95rem; margin-bottom: 8px; }
.pradiphat-support-hero .pradiphat-hero-note a {
    display: flex; justify-content: space-between; gap: 12px; color: #efdeb2;
    padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18);
    text-decoration: underline; text-underline-offset: 5px;
}
@media (max-width: 960px) {
    .pradiphat-support-hero .species-hero-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
    .species-hero.pradiphat-support-hero { padding: 28px 0 44px; }
    .pradiphat-support-hero .species-hero-content h1 { font-size: 2.05rem; line-height: 1.5; }
    .pradiphat-support-hero .pradiphat-hero-note { padding: 24px; }
    .species-hero.pradiphat-support-hero .hero-action .btn { width: 100%; justify-content: center; }
}

.pradiphat-support-hero p, .pradiphat-support-hero li { line-height: 1.95; overflow-wrap: anywhere; }
.pradiphat-support-hero .guide-link { display: inline; padding: 0; margin: 0; border: 0; background: none; color: #efdeb2; text-decoration: underline; text-underline-offset: 4px; }
.pradiphat-support-hero a:focus-visible { outline: 3px solid #e8d8a8; outline-offset: 5px; }
.pradiphat-hero-benefits { --support-hero-image: url(../images/greenfencethai/asset/ต้นสนประดิพัทธ์/bg-ประโยชน์สนประดิพัทธ์.webp); }
.pradiphat-hero-characteristics { --support-hero-image: url(../images/greenfencethai/asset/ต้นสนประดิพัทธ์/bg-ลักษณะสนประดิพัทธ์.webp); }
.pradiphat-hero-planting { --support-hero-image: url(../images/greenfencethai/asset/ต้นสนประดิพัทธ์/bg-วิธีปลูกสนประดิพัทธ์.webp); }
.pradiphat-hero-price { --support-hero-image: url(../images/greenfencethai/asset/ต้นสนประดิพัทธ์/bg-สนประดิพัทธ์ราคา.webp); }
.pradiphat-hero-propagation { --support-hero-image: url(../images/greenfencethai/asset/ต้นสนประดิพัทธ์/bg-วิธีขยายพันธุ์สนประดิพัทธ์.webp); }
.pradiphat-hero-seedlings { --support-hero-image: url(../images/greenfencethai/asset/ต้นสนประดิพัทธ์/bg-ต้นกล้าสนประดิพัทธ์.webp); }

/* Topic-specific aside treatments, inspired by the Pradu support cards. */
.pradiphat-support-hero .pradiphat-hero-note {
    --note-bg: #f1f3e6;
    --note-ink: #204832;
    --note-text: #3d5545;
    --note-accent: #526d3c;
    --note-line: #cad7bc;
    background: var(--note-bg);
    color: var(--note-text);
    border: 1px solid var(--note-line);
    border-radius: 24px;
    box-shadow: 0 18px 40px #0002;
    padding: clamp(24px, 3vw, 34px);
}
.pradiphat-support-hero .pradiphat-hero-note .pradiphat-eyebrow { color: var(--note-accent); }
.pradiphat-support-hero .pradiphat-hero-note h2 { color: var(--note-ink); text-align: center; }
.pradiphat-support-hero .pradiphat-hero-note li { color: var(--note-text); }
.pradiphat-support-hero .pradiphat-hero-note li::marker { color: var(--note-accent); }
.pradiphat-support-hero .pradiphat-hero-note a {
    color: var(--note-ink); border-color: var(--note-line); font-weight: 700;
    line-height: 1.8; overflow-wrap: anywhere;
}
.pradiphat-support-hero .pradiphat-hero-note a:hover { text-decoration-thickness: 2px; }
.pradiphat-support-hero .pradiphat-hero-note a:focus-visible { outline-color: var(--note-accent); }

/* Benefits: a soft green card with separate use-case tiles. */
.pradiphat-hero-benefits .pradiphat-hero-note { border-radius: 32px 32px 8px 32px; border-top: 5px solid #789452; }
.pradiphat-hero-benefits .pradiphat-hero-note ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.pradiphat-hero-benefits .pradiphat-hero-note li { padding: 12px 16px; margin: 0; background: #ffffffa6; border-radius: 12px; border-left: 3px solid #789452; }

/* Characteristics: a field notebook with ruled observations. */
.pradiphat-hero-characteristics .pradiphat-hero-note {
    --note-bg: #f7f4e9; --note-ink: #41482f; --note-text: #535943;
    --note-accent: #656d40; --note-line: #d8d8c2;
    border-radius: 6px 22px 22px 6px; border-left: 6px solid #8b9569;
}
.pradiphat-hero-characteristics .pradiphat-hero-note li { padding-block: 8px; border-bottom: 1px solid var(--note-line); }
.pradiphat-hero-characteristics .pradiphat-eyebrow { letter-spacing: .08em; }

/* Planting: numbered steps connected along the left edge. */
.pradiphat-hero-planting .pradiphat-hero-note { --note-bg: #edf4ef; --note-line: #c6d8ca; border-radius: 20px; }
.pradiphat-hero-planting .pradiphat-hero-note ul { list-style: none; padding: 0; counter-reset: planting-step; }
.pradiphat-hero-planting .pradiphat-hero-note li {
    counter-increment: planting-step; position: relative; margin: 0 0 0 15px;
    padding: 0 0 20px 30px; border-left: 1px solid #9bb8a3;
}
.pradiphat-hero-planting .pradiphat-hero-note li:last-child { padding-bottom: 0; border-color: transparent; }
.pradiphat-hero-planting .pradiphat-hero-note li::before {
    content: counter(planting-step, decimal-leading-zero); position: absolute; left: -16px; top: 0;
    width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%;
    background: #315b43; color: #fff; font-size: .75rem; font-weight: 700;
}

/* Price: warm quotation-style card with divided cost factors. */
.pradiphat-hero-price .pradiphat-hero-note {
    --note-bg: #f7f0df; --note-ink: #514126; --note-text: #5b503c;
    --note-accent: #796030; --note-line: #ded1b1;
    border-top: 5px solid #b49150; border-radius: 12px;
}
.pradiphat-hero-price .pradiphat-hero-note ul { list-style: none; padding: 0; }
.pradiphat-hero-price .pradiphat-hero-note li { padding: 12px 0; margin: 0; border-bottom: 1px dashed #c9b993; }
.pradiphat-hero-price .pradiphat-hero-note a { border-top: 0; background: #ebe0c5; border-radius: 8px; padding: 14px 16px; }

/* Propagation: a deep teal process card. */
.pradiphat-hero-propagation .pradiphat-hero-note {
    --note-bg: #173f3c; --note-ink: #f1f7ee; --note-text: #d9e9e3;
    --note-accent: #c3dfbd; --note-line: #557b72;
    border-radius: 24px 6px 24px 6px; border-top: 4px solid #9ac4ae;
}
.pradiphat-hero-propagation .pradiphat-hero-note li { padding-block: 6px; }
.pradiphat-hero-propagation .pradiphat-hero-note .pradiphat-eyebrow { display: inline-block; padding: 6px 12px; border: 1px solid var(--note-line); border-radius: 20px; }

/* Seedlings: a pale nursery card with a compact inspection checklist. */
.pradiphat-hero-seedlings .pradiphat-hero-note { --note-bg: #f0f5df; --note-line: #cbd8ad; border-radius: 32px 8px 32px 8px; border-bottom: 5px solid #87a35d; }
.pradiphat-hero-seedlings .pradiphat-hero-note ul { list-style: none; padding: 0; }
.pradiphat-hero-seedlings .pradiphat-hero-note li { position: relative; padding: 10px 0 10px 30px; margin: 0; }
.pradiphat-hero-seedlings .pradiphat-hero-note li::before { content: ''; position: absolute; top: 20px; left: 2px; width: 12px; height: 7px; border-left: 2px solid #526d3c; border-bottom: 2px solid #526d3c; transform: rotate(-45deg); }
@media (max-width: 640px) {
    .pradiphat-support-hero .pradiphat-hero-note { padding: 24px 22px; }
    .pradiphat-support-hero .pradiphat-hero-note h2 { font-size: 1.5rem; }
}