/* Park Details — "Resort amenities, made for together." (client mockup, 1672 x 940).
   Three rounded photo cards with icon badges, a looping slider and a watercolour plate (clouds, birds, pier, surf) that is the
   mockup with every word, card, badge, arrow and dot removed (LaMa), extended 39 px each side / 90 px top / 30 px bottom.
   Layout units: --k = one mockup pixel scaled to the cards (card = 459 mockup px wide); the outer card edges sit on the hero rails
   (170 / clamp / 24). Top padding is a literal 150px. Type follows the approved homepage design (HP Display / HP Accent /
   HP Text / HP Label from park-details-home-type.css). The slider arrows are the Attractions photo-slider buttons (.br__arrow).
   Below 1000px it shows one card at a time with the arrows and dots in a row under it. */
.amc{
  --u:calc(100vw / 1900);
  --m:calc(100vw / 1750);                          /* plate scale: plate = 1750 mockup px wide */
  --e:calc(30 * var(--u) + max(11px, 14.26 * var(--u)));   /* height the removed eyebrow used to take: everything below moves up by it */
  --rail:170px;
  --cw:calc((100vw - 2 * var(--rail)) / 3.1307);   /* 3 cards + 2 gaps of 30 mockup px (459 : 30) fill rail to rail */
  --k:calc(var(--cw) / 459);
  --gap:calc(30 * var(--k));
  --step:calc(var(--cw) + var(--gap));
  --navy:#073b57; --sand:#917658; --kick:#9c8268; --lead:#0b4b69; --paper:#faf7ef;
  --display:"HP Display",Georgia,serif; --accent:"HP Accent",cursive; --text:"HP Text",Arial,sans-serif; --label:"HP Label",Arial,sans-serif;
  --ease:cubic-bezier(.4,.1,.2,1);
  position:relative;
  box-sizing:border-box;
  height:calc(150px + 922 * var(--m) - var(--e));
  padding-top:150px;
  overflow:hidden;
  background:var(--paper);
  color:var(--navy);
  text-align:center;
  font:400 16px/normal var(--text);
  letter-spacing:normal;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:1901px){.amc{--rail:calc(170 * 100vw / 1900)}}
@media (max-width:1450px){.amc{--rail:clamp(80px,8.947vw,170px)}}
.amc,.amc *,.amc *::before,.amc *::after{box-sizing:border-box}
.amc :where(h2,h3,p,figure){margin:0}
.amc svg{max-width:none}
.amc img{display:block;max-width:none}
.amc :focus-visible{outline:2px solid #b89a6a;outline-offset:4px}

/* watercolour plate: top of the plate sits so the eyebrow lands 150px below the section top */
.amc__plate{position:absolute;left:0;width:100%;top:calc(150px - 138 * var(--m) - var(--e));height:calc(1060 * var(--m));background:url("../img/amenities/amenities-cards-plate-1750.webp?v=1") 0 0 / 100% 100% no-repeat;pointer-events:none}
.amc__stage{position:relative;z-index:1;height:calc(922 * var(--m) - var(--e))}

/* heading */
.amc__head{padding:0 var(--rail)}
.amc__title{margin-top:0;font:400 max(40px,calc(85.8 * var(--u)))/.99 var(--display);letter-spacing:-.01em;color:var(--navy);text-wrap:wrap}
.amc__title em{display:inline-block;font:400 1.1em/.72 var(--accent);font-style:normal;letter-spacing:0;color:var(--sand);white-space:nowrap}
.amc__lead{margin-top:calc(24 * var(--u));font:500 max(15px,calc(24 * var(--u)))/1.35 var(--text);letter-spacing:-.012em;color:var(--lead)}

/* slider */
.amc__show{position:absolute;left:0;right:0;top:calc(243 * var(--k) - var(--e));height:calc(660 * var(--k))}
.amc__show:focus-visible{outline-offset:-6px}
.amc__a{
  position:absolute;top:0;left:var(--rail);width:var(--cw);
  transform:translateX(calc(var(--step) * var(--p,0)));
  transition:transform .8s var(--ease),opacity .55s ease;
  will-change:transform;
}
.amc__a.no-anim{transition:none}
.amc__a:nth-child(2){--p:1}.amc__a:nth-child(3){--p:2}   /* before the script runs */
.amc__a[data-pos="-2"]{--p:-2}.amc__a[data-pos="-1"]{--p:-1}.amc__a[data-pos="0"]{--p:0}
.amc__a[data-pos="1"]{--p:1}.amc__a[data-pos="2"]{--p:2}.amc__a[data-pos="3"]{--p:3}
.amc__a[data-pos="-2"],.amc__a[data-pos="-1"],.amc__a[data-pos="3"]{opacity:0;pointer-events:none}
.amc__ph{height:calc(380 * var(--k));overflow:hidden;border-radius:calc(28 * var(--k));background:#e9e2d4;box-shadow:0 calc(12 * var(--k)) calc(34 * var(--k)) rgba(60,44,20,.12),0 1px 3px rgba(60,44,20,.08)}
.amc__ph img{width:100%;height:100%;object-fit:cover}
.amc__badge{position:absolute;left:50%;top:calc(314 * var(--k));display:grid;place-items:center;width:calc(104 * var(--k));height:calc(104 * var(--k));margin-left:calc(-52 * var(--k));border:1.5px solid #e1c9a6;border-radius:50%;background:#fff;color:var(--navy);box-shadow:0 calc(8 * var(--k)) calc(22 * var(--k)) rgba(60,44,20,.16)}
.amc__badge svg{width:calc(58 * var(--k));height:calc(58 * var(--k));fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.amc__a h3{margin-top:calc(46 * var(--k));font:400 calc(38 * var(--k))/1.15 var(--display);letter-spacing:0;color:var(--navy);text-wrap:wrap}
.amc__a p{margin-top:calc(6 * var(--k));font:400 calc(25 * var(--k))/1.24 var(--text);letter-spacing:-.005em;color:var(--lead)}

/* arrows = the Attractions photo-slider buttons (.br__arrow): 32px circle, paper, 1px #c9b897, sand chevron glyph */
.amc__arrow{position:absolute;z-index:3;top:calc(190 * var(--k) - 16px);width:32px;height:32px;padding:0;border:1px solid #c9b897;border-radius:50%;background:var(--paper);color:var(--sand);font:400 24px/1 var(--text);text-align:center;cursor:pointer}
.amc__arrow--prev{left:calc(var(--rail) - 46px)}
.amc__arrow--next{right:calc(var(--rail) - 46px)}

/* dots (mockup: filled tan = current, ring = the others) */
.amc__dots{position:absolute;left:50%;top:calc(567 * var(--k));display:flex;gap:calc(20 * var(--k));transform:translateX(-50%)}
.amc__dot{width:max(12px,calc(26 * var(--k)));height:max(12px,calc(26 * var(--k)));padding:0;border:max(1.5px,calc(2 * var(--k))) solid #cfae8e;border-radius:50%;background:transparent;cursor:pointer;transition:background .3s,border-color .3s}
.amc__dot[aria-current="true"]{border-color:#c0956e;background:#c0956e}

/* "Inside the gate" fades out into this section's paper (was in the arch-flow stylesheet) */
.ig::after{background:linear-gradient(to bottom, rgba(250,247,239,0), #faf7ef)!important}

/* ---------- below 1000px: one card at a time, controls in a row ---------- */
@media (max-width:999px){
  .amc{--rail:clamp(20px,5vw,48px);--cw:min(calc(100vw - 2 * var(--rail)),460px);height:auto;padding:72px 0 150px}
  .amc__plate{top:0;height:100%;background:none}
  .amc__plate::before,.amc__plate::after{content:"";position:absolute;left:0;right:0;background:url("../img/amenities/amenities-cards-plate-1100.webp?v=1") no-repeat;background-size:190vw auto}
  .amc__plate::before{top:0;height:330px;background-position:50% 0;-webkit-mask-image:linear-gradient(#000 50%,transparent);mask-image:linear-gradient(#000 50%,transparent)}
  .amc__plate::after{bottom:0;height:250px;background-position:100% 100%;-webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%)}
  .amc__stage{height:auto}
  .amc__title{margin-top:0;font-size:clamp(38px,8.6vw,64px);line-height:1.02}
  .amc__lead{max-width:36ch;margin:16px auto 0;font-size:16.5px;line-height:1.45;text-wrap:balance}
  .amc__a p{text-wrap:balance}
  .amc__br{display:none}
  .amc__show{position:relative;top:auto;height:auto;margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px}
  .amc__track{display:grid;flex:0 0 100%;justify-items:center}
  .amc__a{position:relative;left:auto;top:auto;grid-area:1/1;width:var(--cw);transform:translateX(calc(100vw * var(--p,0)))}
  .amc__a[data-pos="0"]{opacity:1}
  .amc__a:not([data-pos="0"]){opacity:0;pointer-events:none}
  .amc__arrow{position:static}
  .amc__dots{position:static;transform:none;gap:12px}
}
@media (max-width:600px){.amc__arrow{width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){.amc__a{transition:none}}