/* PeakMade Specials: the bottom tab, its drawer and the specials carousel (scoped to .pms), and the pop-up (.pms-pop).
   Colors and type come from the theme (specials.js reads them into --pms-*); only the tab color is set in the admin.
   Drawer height: 40% of the screen on desktop, 30% on tablets and phones.
   Desktop fits exactly three images (small tablets two) at one shared height, sized from the drawer height and the
   images' own width/height ratios (--r per card, --pms-sum2 / --pms-sum3 from PHP), so nothing is cropped. */
.pms {
  --pms-h: max(40vh, 260px);
  --pms-px: clamp(24px, 4vw, 64px);
  --pms-py: 28px;
  --pms-gap: 24px;
  --pms-col-gap: clamp(32px, 4vw, 64px);
  --pms-text-min: 240px;
  --pms-maxw: 1360px;
  --pms-lift: 16px;   /* room above and below the cards for the shadow and hover lift */
  --pms-bleed: 12px;  /* the row runs this far past its box so card shadows aren't cut off */
  --pms-radius: 14px;
  --pms-per: 3;
  --pms-sum: var(--pms-sum3, 3);
  --pms-k: min(var(--pms-n, 3), var(--pms-per));
  --pms-hmax: calc(var(--pms-h) - 2 * var(--pms-py) - 2 * var(--pms-lift));
  --pms-avail: calc(min(100vw, var(--pms-maxw)) - 2 * var(--pms-px) - var(--pms-text-min) - var(--pms-col-gap));
  --pms-ch: min(var(--pms-hmax), calc((var(--pms-avail) - (var(--pms-k) - 1) * var(--pms-gap)) / var(--pms-sum)));
  --pms-ease: cubic-bezier(.32, .72, 0, 1); /* the iOS sheet curve */
  font-family: inherit;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@supports (height: 1dvh) { .pms { --pms-h: max(40dvh, 260px); } }
.pms.is-images-only { --pms-text-min: 0px; --pms-col-gap: 0px; }
.pms:not(.is-ready) { display: none; } /* no tab until the script is ready to open it */
.pms, .pms *, .pms *::before, .pms *::after { box-sizing: border-box; }

/* page dim behind the drawer */
.pms .pms-scrim { position: fixed; inset: 0; z-index: 1000000; background: rgba(12, 12, 14, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.pms.is-open .pms-scrim { opacity: 1; visibility: visible; transition: opacity .45s ease; }

/* the drawer, parked just below the screen; the tab rides on its top edge */
.pms .pms-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000001; height: var(--pms-h); pointer-events: none;
  transform: translate3d(0, 100%, 0); transition: transform .62s var(--pms-ease); }
.pms.is-open .pms-dock { transform: none; }

/* Settings › Tab width (200 / 150 / 150px unless changed). specials.js gives the text the largest size that keeps it on
   one line at that width; padding, gap and the +/× are in em (1.3 + 1.1 + 0.9 + 1 = 4.3em, TAB_EMS in specials.js), so
   the whole tab scales with the text. */
.pms { --pms-tab-w: var(--pms-tab-w-d, 200px); }
@media (max-width: 1024px) { .pms { --pms-tab-w: var(--pms-tab-w-t, 150px); } }
@media (max-width: 640px) { .pms { --pms-tab-w: var(--pms-tab-w-m, 150px); } }
.pms .pms-tab { pointer-events: auto; position: absolute; bottom: 100%; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: .9em;
  width: var(--pms-tab-w); max-width: calc(100% - 32px); min-height: 28px; margin: 0 auto; /* 28px: still easy to tap at small text sizes */ padding: .95em 1.1em .95em 1.3em; border: 0; border-radius: 12px 12px 0 0;
  background: var(--pms-tab, var(--pms-brand, #1d1d1f)); color: var(--pms-tab-ink, var(--pms-brand-ink, #fff));
  font-family: var(--pms-tab-font, inherit); font-size: var(--pms-tab-fit, 10px); font-weight: var(--pms-tab-weight, 600); font-style: normal; line-height: 1.2;
  letter-spacing: var(--pms-tab-tracking, .12em); text-transform: var(--pms-tab-case, uppercase); text-align: left; text-decoration: none;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .16); cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: pms-tab-in .9s var(--pms-ease) .8s both; transition: filter .2s ease, scale .2s ease; }
.pms .pms-tab:hover { filter: brightness(1.06); }
.pms .pms-tab:active { scale: .98; }
.pms .pms-tab-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pms .pms-tab-icon { position: relative; flex: 0 0 1em; width: 1em; height: 1em; transition: transform .55s var(--pms-ease); }
.pms .pms-tab-icon::before, .pms .pms-tab-icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: max(1.5px, .12em); transform: translateY(-50%); border-radius: 1px; background: currentColor; }
.pms .pms-tab-icon::after { transform: translateY(-50%) rotate(90deg); }
.pms.is-open .pms-tab-icon, .pms.is-popup-open .pms-tab-icon { transform: rotate(135deg); } /* + turns into × */
/* Display as › Pop-up: the tab alone (no drawer), above the pop-up and its dim so it can close it. */
.pms.is-tab-only .pms-dock { z-index: 1000003; }

.pms .pms-panel { pointer-events: auto; position: relative; height: 100%; margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); background: var(--pms-surface, #f7f7f5);
  box-shadow: 0 -14px 44px rgba(0, 0, 0, .2); visibility: hidden; transition: visibility 0s linear .62s; }
.pms.is-open .pms-panel { visibility: visible; transition: none; }
.pms .pms-inner { display: flex; align-items: center; justify-content: center; gap: var(--pms-col-gap); height: 100%; max-width: var(--pms-maxw); margin: 0 auto;
  padding: var(--pms-py) max(var(--pms-px), env(safe-area-inset-right, 0px)) var(--pms-py) max(var(--pms-px), env(safe-area-inset-left, 0px)); }

/* title and copy */
.pms .pms-text { flex: 1 1 var(--pms-text-min); min-width: var(--pms-text-min); max-width: 460px; }
.pms .pms-title { margin: 0; padding: 0; border: 0; font-family: var(--pms-heading-font, inherit); font-size: clamp(24px, 2.3vw, 38px); font-weight: var(--pms-heading-weight, 700); font-style: normal;
  line-height: 1.1; letter-spacing: var(--pms-heading-tracking, -.01em); text-transform: var(--pms-heading-case, none); color: var(--pms-heading-color, inherit); text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pms .pms-copy { margin: 12px 0 0; padding: 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; color: var(--pms-text-color, inherit); white-space: pre-line;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }

/* the carousel: exactly three across on desktop; arrows when there are more */
.pms .pms-carousel { position: relative; flex: 0 0 auto; width: calc(var(--pms-ch) * var(--pms-sum) + (var(--pms-k) - 1) * var(--pms-gap)); max-width: 100%; }
.pms .pms-track { position: relative; display: flex; gap: var(--pms-gap); margin: 0 calc(-1 * var(--pms-bleed)); padding: var(--pms-lift) var(--pms-bleed);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pms-bleed);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pms .pms-track::-webkit-scrollbar { display: none; }
.pms .pms-track:focus { outline: none; }
.pms .pms-track:focus-visible { outline: 2px solid #1d1d1f; outline-offset: -2px; box-shadow: inset 0 0 0 4px #fff; border-radius: calc(var(--pms-radius) + 4px); }
.pms .pms-card { position: relative; flex: 0 0 auto; width: calc(var(--pms-ch) * var(--r, 1)); min-width: 0; height: var(--pms-ch); margin: 0; padding: 0;
  overflow: hidden; border-radius: var(--pms-radius); background: rgba(0, 0, 0, .04); scroll-snap-align: start;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .07), 0 6px 14px rgba(0, 0, 0, .09); transition: translate .45s var(--pms-ease), box-shadow .45s var(--pms-ease); }
.pms .pms-card::before, .pms .pms-card::after { content: none; }
.pms .pms-card img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; object-fit: cover;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
@media (hover: hover) {
  .pms .pms-card:hover { translate: 0 -4px; box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 10px 20px rgba(0, 0, 0, .14); }
}

/* A special with a link: hover (or keyboard focus, or a first tap on touch) washes the image in the drawer color
   and lifts the theme-styled button into place; the image eases forward a touch behind it. */
.pms .pms-link { position: relative; display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; }
.pms .pms-link img { transition: transform .7s var(--pms-ease); }
.pms .pms-veil { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; background: var(--pms-veil, rgba(255, 255, 255, .62));
  opacity: 0; transition: opacity .35s ease; }
.pms .pms-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 14px 26px; border-radius: var(--pms-btn-radius, 0);
  background: var(--pms-brand, #1d1d1f); color: var(--pms-brand-ink, #fff); box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
  font-family: var(--pms-tab-font, inherit); font-size: 15px; font-weight: var(--pms-tab-weight, 600); line-height: 1.15; letter-spacing: var(--pms-tab-tracking, .08em);
  text-transform: var(--pms-tab-case, uppercase); text-align: center; overflow-wrap: anywhere;
  opacity: 0; transform: translateY(10px) scale(.94); transition: transform .5s var(--pms-ease), opacity .3s ease; }
.pms .pms-btn svg { flex: 0 0 11px; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pms .pms-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (hover: hover) {
  .pms .pms-link:hover .pms-veil { opacity: 1; }
  .pms .pms-link:hover .pms-btn { opacity: 1; transform: none; }
  .pms .pms-link:hover img { transform: scale(1.04); }
}
.pms .pms-link:focus-visible .pms-veil, .pms .pms-card.is-active .pms-veil { opacity: 1; }
.pms .pms-link:focus-visible .pms-btn, .pms .pms-card.is-active .pms-btn { opacity: 1; transform: none; }
/* focus ring drawn inside the card (which clips anything outside), over the image */
.pms .pms-link:focus-visible::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px #1d1d1f, inset 0 0 0 5px #fff; pointer-events: none; }

.pms .pms-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #1d1d1f; box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  cursor: pointer; transition: opacity .3s ease, visibility 0s, scale .2s ease; }
.pms .pms-arrow[hidden] { display: none; }
.pms .pms-arrow.is-off { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.pms .pms-arrow:hover { scale: 1.06; }
.pms .pms-arrow:active { scale: .96; }
.pms .pms-arrow.is-prev { left: -20px; }
.pms .pms-arrow.is-next { right: -20px; }
.pms .pms-arrow svg { width: 10px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pms .pms-arrow.is-prev svg { margin-left: -2px; }
.pms .pms-arrow.is-next svg { margin-left: 2px; }
/* focus rings: white inside dark, visible on any tab color, page or drawer */
.pms .pms-tab:focus-visible, .pms .pms-arrow:focus-visible { outline: 2px solid #1d1d1f; outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }

/* opening: title and copy rise in, then the cards tilt up from their bottom edge one after another */
.pms.is-open .pms-text > * { animation: pms-rise .6s var(--pms-ease) both; }
.pms.is-open .pms-title { animation-delay: .14s; }
.pms.is-open .pms-copy { animation-delay: .2s; }
.pms.is-open .pms-card { transform-origin: 50% 100%; animation: pms-tilt .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.16s + var(--i, 0) * 70ms); }
@keyframes pms-tab-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes pms-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pms-tilt { from { opacity: 0; transform: perspective(1400px) rotateX(-22deg) translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }

/* tablets: 30% of the screen */
@media (max-width: 1024px) {
  .pms { --pms-h: max(30vh, 210px); --pms-px: 28px; --pms-py: 20px; --pms-gap: 16px; --pms-col-gap: 28px; --pms-text-min: 190px; --pms-lift: 12px; --pms-bleed: 12px; --pms-radius: 12px; }
  @supports (height: 1dvh) { .pms { --pms-h: max(30dvh, 210px); } }
  .pms .pms-title { font-size: clamp(20px, 2.6vw, 26px); }
  .pms .pms-copy { margin-top: 8px; font-size: 15px; -webkit-line-clamp: 3; }
}
@media (max-width: 900px) { .pms { --pms-per: 2; --pms-sum: var(--pms-sum2, 2); } }

/* phones: title and copy on top, then a row that runs to the screen edges and scrolls sideways */
@media (max-width: 640px) {
  .pms { --pms-px: 16px; --pms-py: 16px; --pms-gap: 12px; --pms-lift: 8px; --pms-bleed: 16px; }
  .pms .pms-inner { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; }
  .pms .pms-text { flex: 0 0 auto; min-width: 0; max-width: none; }
  .pms .pms-title { font-size: 19px; line-height: 1.15; -webkit-line-clamp: 2; }
  .pms .pms-copy { margin-top: 4px; font-size: 14px; line-height: 1.4; -webkit-line-clamp: 2; }
  .pms .pms-carousel { flex: 1 1 auto; width: auto; min-height: 0; }
  .pms .pms-track { height: 100%; }
  .pms .pms-card { width: auto; height: 100%; aspect-ratio: var(--r, 1); }
  .pms .pms-arrow { width: 34px; height: 34px; margin-top: -17px; }
  .pms .pms-btn { min-height: 36px; padding: 9px 14px; font-size: 12px; gap: 6px; }
  .pms .pms-arrow.is-prev { left: -4px; }
  .pms .pms-arrow.is-next { right: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .pms *, .pms *::before, .pms *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------- Display as › Pop-up (.pms-pop) ----------
   One image, centered, shown whole: up to 560px wide (wider for landscape images, up to 860px), never taller than the
   screen less room for the tab at the bottom. It tilts up from its bottom edge like the Floor Plans popup; the × sits in
   its top-right corner. The page keeps scrolling under a light dim (no blur, so it stays readable); a click on the dim
   closes it. */
.pms-pop { --pms-ease: cubic-bezier(.32, .72, 0, 1); position: fixed; inset: 0; z-index: 1000002; display: none; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(76px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  font-family: inherit; line-height: 1.4; -webkit-font-smoothing: antialiased; }
.pms-pop.is-open { display: grid; }
.pms-pop, .pms-pop *, .pms-pop *::before, .pms-pop *::after { box-sizing: border-box; }
.pms-pop .pms-pop-scrim { position: absolute; inset: 0; background: rgba(12, 12, 14, .32); animation: pms-pop-fade .2s ease both; }
.pms-pop .pms-pop-box { position: relative; margin: 0; padding: 0; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); outline: none;
  width: min(860px, calc(560px * max(1, var(--r, 1))), calc(100vw - 32px), calc((100vh - 108px) * var(--r, 1)));
  transform-origin: 50% 100%; animation: pms-pop-in .7s ease .15s both; }
@supports (height: 1dvh) { .pms-pop .pms-pop-box { width: min(860px, calc(560px * max(1, var(--r, 1))), calc(100vw - 32px), calc((100dvh - 108px) * var(--r, 1))); } }
.pms-pop .pms-pop-box img { display: block; width: 100%; height: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.pms-pop .pms-pop-link { display: block; color: inherit; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; }
.pms-pop .pms-pop-link img { transition: transform .6s var(--pms-ease); }
@media (hover: hover) { .pms-pop .pms-pop-link:hover img { transform: scale(1.02); } }
.pms-pop .pms-pop-link:focus-visible::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px #1d1d1f, inset 0 0 0 5px #fff; pointer-events: none; }
.pms-pop .pms-pop-close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #1d1d1f; box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
  cursor: pointer; transition: scale .2s ease, background .2s ease; }
.pms-pop .pms-pop-close:hover { scale: 1.06; background: #fff; }
.pms-pop .pms-pop-close:active { scale: .95; }
.pms-pop .pms-pop-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pms-pop .pms-pop-close:focus-visible { outline: 2px solid #1d1d1f; outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
.pms-pop .pms-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.pms-pop.is-closing .pms-pop-scrim { animation: pms-pop-fade-out .2s ease both; }
.pms-pop.is-closing .pms-pop-box { animation: pms-pop-out .22s ease both; }
@keyframes pms-pop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pms-pop-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pms-pop-in { from { opacity: 0; transform: perspective(3000px) rotateX(-25deg) scale(.95); } to { opacity: 1; transform: perspective(3000px) rotateX(0) scale(1); } }
@keyframes pms-pop-out { to { opacity: 0; transform: scale(.97); } }
@media (max-width: 640px) {
  .pms-pop .pms-pop-box { border-radius: 16px; }
  .pms-pop .pms-pop-close { top: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pms-pop *, .pms-pop *::before, .pms-pop *::after { animation: none !important; transition-duration: .01ms !important; }
}