/*!
 * Osso Contact section · (C) 2026 Osso City Lighting · GPL-2.0-or-later
 */
.osso-contact {
  --_line: var(--osso-line, rgba(0, 0, 0, .12));
  --_accent: var(--osso-accent, #b08d57);
  --_radius: var(--osso-radius, 4px);
}

.osso-contact.osso-section--bg-brand,
.osso-contact.osso-section--bg-dark { --_line: rgba(255, 255, 255, .16); }

.osso-contact .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.osso-contact__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: stretch;
}

.osso-contact--with-map .osso-contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.osso-contact--no-map .osso-contact__info { max-width: 760px; margin-inline: auto; }

.osso-contact__intro {
  font-size: 1.075rem;
  max-width: 48ch;
  margin-bottom: 2.25rem !important;
}

.osso-section--bg-brand .osso-contact__intro,
.osso-section--bg-dark .osso-contact__intro { color: var(--osso-on-dark-muted, rgba(255, 255, 255, .78)); }

.osso-contact a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.osso-contact a:hover { color: var(--_accent); }
.osso-section--bg-white .osso-contact a:hover,
.osso-section--bg-light .osso-contact a:hover { color: var(--osso-accent-ink, #7b633d); }

.osso-contact__intro a { font-weight: 600; text-decoration: underline; text-underline-offset: .25em; white-space: nowrap; }

.osso-contact__details {
  display: grid;
  gap: 1rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

.osso-contact__details li { display: flex; align-items: flex-start; gap: 1rem; line-height: 1.55; }
.osso-contact__details a { text-decoration: none; }
.osso-contact__icon { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .1rem; color: var(--_accent); }

.osso-contact__directions {
  display: inline-block;
  margin-top: .35rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
}

.osso-contact__subhead {
  margin: 0 0 1rem !important;
  font-family: var(--osso-font-body, sans-serif) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--_accent);
}

.osso-section--bg-white .osso-contact__subhead,
.osso-section--bg-light .osso-contact__subhead { color: var(--osso-accent-ink, #7b633d); }

/* Hours table */
.osso-hours {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}

.osso-hours th,
.osso-hours td {
  padding: .6rem 0;
  border-bottom: 1px solid var(--_line);
  font-weight: 400;
  text-align: left;
}

.osso-hours td { text-align: right; }
.osso-hours tr:first-child th,
.osso-hours tr:first-child td { border-top: 1px solid var(--_line); }

.osso-hours tr.is-closed td { opacity: .65; }

.osso-hours tr.is-today th,
.osso-hours tr.is-today td { font-weight: 600; }

.osso-hours tr.is-today th { position: relative; }

.osso-hours__today {
  display: inline-block;
  margin-left: .6rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--_accent);
  color: var(--osso-dark, #141c24);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  vertical-align: .15em;
}

.osso-contact__note { margin: 1rem 0 0 !important; font-size: .88rem; opacity: .8; }
.osso-contact__action { margin: 2.5rem 0 0 !important; }

/* Map */
.osso-contact__map {
  position: relative;
  min-height: 420px;
  border-radius: var(--_radius);
  overflow: hidden;
  background: rgba(0, 0, 0, .15);
}

.osso-contact__map iframe,
.osso-contact__map img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.osso-contact--map-mono .osso-contact__map iframe {
  filter: grayscale(1) contrast(1.05);
  transition: filter .6s ease;
}

.osso-contact--map-mono .osso-contact__map:hover iframe,
.osso-contact--map-mono .osso-contact__map:focus-within iframe { filter: none; }

@media (max-width: 899.98px) {
  .osso-contact--with-map .osso-contact__grid { grid-template-columns: 1fr; }
  .osso-contact__map { min-height: 320px; }
}