/* ===== HERO component (scoped with .pn-hero) ===== */

.pn-hero{
  position:relative; overflow:hidden;
  border:1px solid #e8e2cf; border-radius:16px; background:#fbf9f2;
  margin:16px 24px 0;
}
@media (max-width:1023px){
  .pn-hero{ margin:0 8px 0; border-radius:14px; }
}

/* On mobile allow content to extend below the image so CTAs don't get clipped */
@media (max-width:640px){
  .pn-hero{ overflow:visible; }
}

.pn-hero__media img{
  width:100%; height:auto; display:block;
  object-fit:cover; aspect-ratio:1920/720;
}
@media (max-width:640px){
  .pn-hero__media img{ aspect-ratio:auto; max-height:66vh; }
}

.pn-hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
  pointer-events:none; z-index:1;
}

/* ===== Pills ===== */
.pn-hero__pills{
  position:absolute; z-index:3;
  left:clamp(12px, 2vw, 24px); top:80px;
  display:flex; gap:8px; flex-wrap:wrap;
}
.pn-hero__pills .hpill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:999px; border:1px solid #e8e2cf;
  background:#fff; color:#185651; font-weight:700; font-size:13px;
  box-shadow:0 1px 0 rgba(0,0,0,.06); text-align:center; white-space:nowrap;
}
.pn-hero__pills .hpill.is-active{ background:#185651; color:#fff; border-color:#185651; }

/* Mobile pills: smaller & 3-up (2-up on tiny screens) */
@media (max-width:640px){
  .pn-hero__pills{
    left:8px; right:8px; top:20px !important;
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:5px; grid-auto-flow:dense;
  }
  @media (max-width:380px){
    .pn-hero__pills{ grid-template-columns:repeat(2,1fr); }
  }
  .pn-hero__pills .hpill{
    width:100%; padding:5px 6px; border-radius:10px; font-size:11.5px;
    white-space:normal; line-height:1.15; min-height:30px; box-sizing:border-box;
    word-break:break-word; overflow-wrap:anywhere; hyphens:auto;
  }
}

/* ===== Copy & CTAs ===== */
.pn-hero__inner{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; padding:24px 24px 20px;
}
.pn-hero__copy{ max-width:720px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.pn-hero__copy h1{
  margin:8px 0 10px; font-size:clamp(26px,3.2vw,42px);
  line-height:1.05; font-weight:800;
}
.pn-hero__copy .sub{
  margin:6px 0 14px; font-size:clamp(14px,1.6vw,18px); color:#eef7f5;
}

/* Mobile: reserve more room for two stacked CTAs and keep them visible */
@media (max-width:640px){
  .pn-hero__inner{
    align-items:flex-end;
    padding:145px 12px 28px;   /* increased bottom padding so both CTAs fit */
  }
  .pn-hero__copy{ max-width:none; width:100%; }
  .pn-hero__copy h1{ margin:6px 0 8px; font-size:clamp(18px,6vw,26px); }
  .pn-hero__copy .sub{ margin:4px 0 10px; font-size:clamp(13px,4vw,15px); color:#f4fbf9; }
}

/* Buttons (desktop defaults) */
.pn-hero__ctas{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:12px; padding:10px 14px; border:1px solid transparent;
  font-weight:800; text-decoration:none;
}
.btn-primary{ background:#185651; color:#fff; border-color:#185651; }
.btn-ghost{ background:#fff; color:#185651; border-color:#e8e2cf; }
.btn.is-disabled{ opacity:.6; pointer-events:none; cursor:default; }

/* ===== Mobile CTA fix: stack & prevent overflow ===== */
@media (max-width:640px){
  .pn-hero__ctas{
    width:100%;
    display:grid;                /* ensures vertical stacking */
    grid-template-columns:1fr;
    gap:8px;
    margin-top:-80px !important;
    position:relative;
    z-index:10;
  }
  .pn-hero__copy{
    padding-top:0px !important;
    margin-top:-100px !important;
    position:relative;
    z-index:5;
  }
  .pn-hero__ctas .btn{
    display:flex;                /* better wrapping than inline-flex */
    width:100%; max-width:100%;
    min-width:0;
    box-sizing:border-box;
    padding:10px 12px;           /* slightly smaller for mobile */
    border-radius:12px;
    text-align:center;

    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
    hyphens:auto;

    font-size:clamp(12px, 3.6vw, 14px);
    line-height:1.2;
  }
}

/* ===== Landscape on phones: avoid pills/title overlap =====
   - Pills move below the image (normal flow)
   - Overlay (title/sub/CTAs) reserves 120px at the bottom for the pills */
@media (max-width: 960px) and (orientation: landscape){
  .pn-hero{ overflow:visible; }

  /* Overlay only covers the image area; leave space for pills at the bottom */
  .pn-hero__inner{ position:absolute; left:0; right:0; top:0; bottom:120px; padding:24px 12px 16px; }
  .pn-hero__scrim{ position:absolute; left:0; right:0; top:0; bottom:120px; }

  /* Pills drop below the image/overlay in normal flow */
  .pn-hero__pills{
    position:static; z-index:auto;
    margin:8px 12px 12px;
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:6px;
  }
  .pn-hero__pills .hpill{
    width:100%; padding:6px 8px; border-radius:10px; font-size:11px;
    white-space:normal; line-height:1.15; min-height:30px; box-sizing:border-box;
  }
}

/* ===== Categories grid ===== */
.pn-section{ padding:24px; }
@media (max-width:1023px){ .pn-section{ padding:16px 10px 24px; } }
.pn-section__head{ max-width:1200px; margin:12px auto 10px; }
.pn-section__head h2{ margin:0; font-size:24px; color:#143f3d; }

.pn-catgrid{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px;
}
@media (max-width:1200px){ .pn-catgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){  .pn-catgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){  .pn-catgrid{ grid-template-columns:1fr; gap:10px; } }

.pn-catcard{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid #e8e2cf; border-radius:16px; background:#fff; text-decoration:none; color:inherit;
}
.pn-catcard__img{ width:100%; height:160px; object-fit:cover; display:block; background:#ddd; }
.pn-catcard__body{ padding:12px; }
.pn-catcard__body h3{ margin:0 0 4px; font-size:18px; color:#143f3d; }
.pn-catcard__body p{ margin:0 0 10px; color:#4d6664; font-size:14px; }

.is-hidden{ display:none !important; }