/* visit.css — contact details, the opening-hours list and the map card. */

.split-visit{display:grid;align-items:center;gap:clamp(24px,4.5vw,66px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

.hours{margin-top:20px;max-width:460px;list-style:none}
.hours li{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:13px 22px;border-radius:999px;font-size:.96rem;
  transition:background .4s var(--ease),transform .4s var(--ease)}
.hours li:nth-child(odd){background:var(--surface-2)}
.hours li:hover{transform:translateX(6px)}
/* hours.js adds .today to whichever day it is in the visitor's browser */
.hours li.today{background:linear-gradient(135deg,rgba(220,3,3,.9),rgba(142,5,9,.9));color:#fff;
  font-weight:500;box-shadow:0 12px 30px -14px rgba(220,3,3,.9)}
.hours b{font-family:var(--font-head);font-weight:600;letter-spacing:-.005em}
.hours .shut{opacity:.5}

.maplabel{display:inline-flex;align-items:center;gap:10px;margin:34px 0 16px;
  font-family:var(--font-head);font-weight:700;font-size:.98rem;letter-spacing:-.005em;opacity:.86;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.maplabel svg{width:19px;height:19px;flex:none;color:var(--red)}
.maplabel:hover{opacity:1;transform:translateX(4px)}

.mapcard{border-radius:var(--r-lg);overflow:hidden;width:100%;
  height:clamp(220px,32vw,340px);position:relative;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.mapcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mapcard iframe{display:block;width:100%;height:100%;border:0}

@media(max-width:860px){
  .split-visit{grid-template-columns:1fr;gap:clamp(22px,5vw,34px)}
  .hours li{padding:11px 20px;font-size:.92rem}
  /* Contact details and the hours list centre on a phone. */
  .split-visit{text-align:center}
  .hours{margin-inline:auto}
  .maplabel{justify-content:center}
  .split-visit address{text-align:center}
}