/* Category page: national parks grid. Two wide photo cards per row, each a
   swipeable strip (scroll-snap) with arrows and dots. The gradient is kept
   to the caption's own band so the photo stays the point; the orange bar
   over the name and the ring on hover are the accents. White ground so the
   milk season block beside it reads as a band. */
.cat-parks{background:#fff;padding:88px 24px}
.cat-parks__inner{max-width:1240px;margin:0 auto}
.cat-parks__header{max-width:68ch;margin-bottom:36px}
.cat-parks__eyebrow{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#FF6A00;margin-bottom:14px}
.cat-parks__h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:#111214;margin:0 0 14px}
.cat-parks__lede{font-size:15px;line-height:1.7;color:rgba(17,18,20,.62);margin:0}

.cat-parks__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

/* Card */
.cat-parks__card{position:relative;display:block;aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:#111214;transition:transform .22s ease,box-shadow .22s ease}
.cat-parks__card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(17,18,20,.24)}
.cat-parks__card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px #FF6A00;opacity:0;pointer-events:none;z-index:4;transition:opacity .2s ease}
.cat-parks__card:hover::after,.cat-parks__card:focus-within::after{opacity:1}

/* Photo strip: scroll-snap, so a touch swipe needs no script at all */
.cat-parks__media{position:absolute;inset:0}
.cat-parks__strip{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.cat-parks__strip::-webkit-scrollbar{display:none}
.cat-parks__slide{flex:0 0 100%;height:100%;scroll-snap-align:center;display:block;text-decoration:none;background:#111214}
.cat-parks__slide:focus{outline:none}
.cat-parks__slide--empty{position:absolute;inset:0;background:linear-gradient(140deg,#23252a,#111214)}
.cat-parks__photo{display:block;width:100%;height:100%;object-fit:cover}

/* A light gradient, only where the caption sits */
.cat-parks__overlay{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(17,18,20,.72) 0%,rgba(17,18,20,.28) 30%,rgba(17,18,20,0) 55%)}

/* Arrows: visible on touch, revealed on hover for a mouse */
.cat-parks__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:none;background:rgba(17,18,20,.5);color:#fff;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0 0 2px;opacity:0;transition:opacity .18s ease,background .18s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.cat-parks__card:hover .cat-parks__nav,.cat-parks__nav:focus-visible{opacity:1}
.cat-parks__nav:hover{background:#FF6A00}
.cat-parks__nav:focus-visible{outline:2px solid #FF6A00;outline-offset:2px}
.cat-parks__nav--prev{left:12px}
.cat-parks__nav--next{right:12px}
@media (hover:none){.cat-parks__nav{opacity:1}}

/* Dots, bottom right so they never sit on the name */
.cat-parks__dots{position:absolute;right:18px;bottom:18px;z-index:3;display:flex;gap:6px;pointer-events:none}
.cat-parks__dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .18s ease,transform .18s ease}
.cat-parks__dot.is-active{background:#FF6A00;transform:scale(1.4)}

/* Country tag */
.cat-parks__country{position:absolute;top:16px;left:16px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:#FF6A00;padding:5px 9px;border-radius:2px;pointer-events:none}

/* Caption: the name with an orange bar above it, the count under it */
.cat-parks__caption{position:absolute;left:22px;right:96px;bottom:20px;z-index:3;display:block;text-decoration:none}
.cat-parks__caption::before{content:"";display:block;width:32px;height:3px;background:#FF6A00;margin-bottom:10px;transition:width .22s ease}
.cat-parks__card:hover .cat-parks__caption::before{width:52px}
.cat-parks__caption:focus-visible{outline:2px solid #FF6A00;outline-offset:6px;border-radius:2px}
.cat-parks__name{display:block;font-size:clamp(20px,2vw,26px);font-weight:800;line-height:1.15;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.cat-parks__n{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.04em;color:#EDE3D5;text-shadow:0 1px 8px rgba(0,0,0,.5)}

@media (max-width:700px){
  .cat-parks{padding:56px 20px}
  .cat-parks__grid{grid-template-columns:1fr;gap:18px}
  .cat-parks__card{aspect-ratio:4/3}
  .cat-parks__caption{left:18px;right:80px;bottom:16px}
  .cat-parks__country{top:12px;left:12px}
}
@media (prefers-reduced-motion:reduce){
  .cat-parks__card,.cat-parks__nav,.cat-parks__caption::before{transition:none}
  .cat-parks__card:hover{transform:none}
  .cat-parks__strip{scroll-behavior:auto}
}