/* Accessible toilets: the opener crop and "The door opens" (partials/pieces/accessible-door.php) */

/* opener: the photo is landscape, so the tall frame crops to the unit with the wheelchair sign on its door */
.page--accessible .sop__pic img { object-position: 96% 50%; }
/* two access tiles (the unit's own size is not known yet) */
.page--accessible .acc__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- the door ---------- */
.adr { --sh: min(calc(100svh - var(--tb) - var(--hh) - 90px), 700px); position: relative; background: var(--ink); color: rgba(255, 255, 255, .86); overflow: clip; }
.motion .adr { height: 100svh; min-height: 660px; }
.adr__glow { position: absolute; inset: -10%; background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(31, 107, 83, .75), transparent 70%) 10% 40% / 90% 100% no-repeat, radial-gradient(ellipse 50% 50% at 50% 50%, rgba(80, 170, 38, .18), transparent 70%) 100% 100% / 80% 80% no-repeat; }
.adr__grid { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); align-items: center; height: 100%; padding: calc(var(--tb) + var(--hh) + 24px) 0 32px; }
html:not(.motion) .adr__grid { padding: clamp(80px, 9vw, 140px) 0; }

.adr__spill { position: absolute; left: -10%; top: 50%; width: 90%; aspect-ratio: 1.3; translate: 0 -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(190, 240, 160, .38), rgba(108, 196, 63, .16) 50%, transparent); pointer-events: none; }
html:not(.motion) .adr__spill { display: none; }
.adr__stage { position: relative; height: var(--sh); aspect-ratio: 4 / 5; perspective: 1900px; perspective-origin: 30% 50%; }
.adr__frame { position: absolute; inset: 0; border-radius: 60px 60px 12px 12px; overflow: clip; background: var(--ink-2); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75); }
.adr__pic { position: absolute; inset: 0; }
.adr__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 24% 50%; }
.adr__shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(4, 18, 12, .75), rgba(4, 18, 12, .2) 70%); opacity: 0; pointer-events: none; }

/* a plain trail-green panel, hinged on the left, with a handle and the lock */
.adr__door { position: absolute; inset: 0; z-index: 2; transform-origin: 0% 50%; transform-style: preserve-3d; }
html:not(.motion) .adr__door { display: none; }
.adr__face { position: absolute; inset: 0; border-radius: 60px 60px 12px 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.adr__face--front { background: linear-gradient(115deg, #2a7d62 0%, var(--trail) 45%, #185a45 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), inset 0 -30px 60px rgba(0, 0, 0, .18); }
.adr__face--front::before { content: ""; position: absolute; inset: 9% 11% 8%; border-radius: 40px 40px 8px 8px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 0 0 1px rgba(0, 0, 0, .12); }
.adr__face--front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .45)); opacity: var(--turn, 0); }
.adr__face--back { transform: rotateY(180deg); background: linear-gradient(90deg, #123f31, #0f3528); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); }
.adr__sheen { position: absolute; inset: 0; border-radius: inherit; overflow: clip; pointer-events: none; }
.adr__sheen i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .02) 60%, transparent); }
.adr__handle { position: absolute; right: 7%; top: 46%; width: 14px; height: 18%; border-radius: 999px; background: linear-gradient(90deg, #d9dfdc, #8f9a95); box-shadow: 0 6px 12px rgba(0, 0, 0, .35); }
.lock--door { position: absolute; right: 5%; top: calc(46% - 52px); }

/* the checklist */
.adr__text { display: grid; gap: clamp(18px, 2.6vh, 28px); align-content: center; }
.adr__list { display: grid; gap: 4px; }
.adr__item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start; padding: clamp(10px, 1.5vh, 16px) 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: clamp(1.0625rem, 1.2vw, 1.2rem); line-height: 1.45; transition: opacity .45s; }
.adr__item strong { display: block; font: 800 clamp(1.25rem, 1.7vw, 1.6rem)/1.1 var(--display); font-stretch: 82%; color: var(--white); margin-bottom: 4px; }
.adr__item svg { width: 34px; height: 34px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.adr__item circle { stroke: rgba(255, 255, 255, .28); fill: rgba(255, 255, 255, .04); transition: stroke .4s, fill .4s; }
.adr__item path { stroke: var(--white); }
.adr__item { margin-inline: -12px; padding-inline: 12px; border-radius: 12px; transition: opacity .45s, background .45s; }
.motion .adr__item.is-on { background: rgba(255, 255, 255, .06); }
.adr__item.is-on circle, html:not(.motion) .adr__item circle { stroke: var(--brand-hi); fill: rgba(80, 170, 38, .35); }
.motion .adr__item:not(.is-on) { opacity: .42; }
.adr__bar { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.adr__bar span { display: block; height: 100%; background: var(--brand-hi); transform-origin: left; transform: scaleX(0); }
html:not(.motion) .adr__bar { display: none; }

@media (max-width: 1180px) {
  .adr { --sh: min(calc(100svh - var(--tb) - var(--hh) - 90px), 560px); }
  .adr__item { font-size: 1rem; }
}
@media (max-width: 960px) {
  .page--accessible .sop__pic img { object-position: 50% 55%; }
  .page--accessible .acc__tiles { grid-template-columns: minmax(0, 1fr); }
  .adr { --sh: 33svh; }
  .adr__spill { left: -20%; width: 140%; top: 30%; }
  .adr__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: center; padding-top: calc(var(--tb) + var(--hh) + 4px); padding-bottom: 16px; }
  .adr__text { display: contents; }
  .adr .h2 { order: -2; font-size: 1.8rem; }
  .adr__stage { order: -1; justify-self: center; }
  .adr__frame, .adr__face { border-radius: 40px 40px 10px 10px; }
  .adr__face--front::before { border-radius: 28px 28px 6px 6px; }
  .lock--door { top: calc(46% - 40px); right: 4%; transform: scale(.85); transform-origin: right center; }
  .adr__item { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; margin-inline: -8px; padding: 6px 8px; font-size: .9rem; line-height: 1.35; }
  .adr__item svg { width: 26px; height: 26px; }
  .adr__item strong { font-size: 1.05rem; margin-bottom: 2px; }
  .adr__list { gap: 0; }
}