/*
 * V3 section package: contact-info
 *
 * CSS isolation: every selector rooted under
 *   .pd-section--contact-info[data-pd-module]
 *
 * Class/attribute selectors only - no element selectors.
 *
 * Canonical tokens used:
 *   --pd-color-text, --pd-color-muted, --pd-color-surface,
 *   --pd-color-surface-alt, --pd-color-primary, --pd-color-secondary,
 *   --pd-color-accent, --pd-color-border, --pd-color-muted-bg
 *   --pd-font-heading, --pd-font-body
 *   --pd-radius-md, --pd-radius-lg, --pd-shadow-sm
 *   --pd-space-2, --pd-space-3, --pd-space-4, --pd-space-5,
 *   --pd-space-6, --pd-space-8
 *
 * Variants:
 *   split-info       two-column split (header + cta left, info right)
 *   cards-channels   each contact channel as a card in a grid
 *   inline-minimal   compact single-row strip
 *   map-focus        prominent map iframe with details below
 */

.pd-section--contact-info[data-pd-module] {
  display: block;
  width: 100%;
  font-family: var(--pd-font-body);
  box-sizing: border-box;
}

/* Background tone contrast.
 * Section bg/root color come from the shared [data-background-tone]
 * primitive. cards-channels items keep their .pd-card--soft surface so
 * their internal text stays legible on dark tones; only the section
 * header, the inline-minimal items, and the CTA need scoped contrast
 * inversion since they sit directly on the section root. */
/* PASS 4BO: __headline / __eyebrow / __intro tone-aware contrast
 * moved to shared [data-background-tone] rules in components.css. */
.pd-section--contact-info[data-pd-module][data-background-tone="primary"][data-pd-variant="split-info"] .pd-contact-info__label,
.pd-section--contact-info[data-pd-module][data-background-tone="secondary"][data-pd-variant="split-info"] .pd-contact-info__label,
.pd-section--contact-info[data-pd-module][data-background-tone="primary"][data-pd-variant="inline-minimal"] .pd-contact-info__label,
.pd-section--contact-info[data-pd-module][data-background-tone="secondary"][data-pd-variant="inline-minimal"] .pd-contact-info__label,
.pd-section--contact-info[data-pd-module][data-background-tone="primary"][data-pd-variant="map-focus"] .pd-contact-info__label,
.pd-section--contact-info[data-pd-module][data-background-tone="secondary"][data-pd-variant="map-focus"] .pd-contact-info__label {
  color: var(--pd-color-surface);
  opacity: 0.85;
}
.pd-section--contact-info[data-pd-module][data-background-tone="primary"][data-pd-variant="split-info"] .pd-contact-info__value,
.pd-section--contact-info[data-pd-module][data-background-tone="secondary"][data-pd-variant="split-info"] .pd-contact-info__value,
.pd-section--contact-info[data-pd-module][data-background-tone="primary"][data-pd-variant="split-info"] .pd-contact-info__address,
.pd-section--contact-info[data-pd-module][data-background-tone="secondary"][data-pd-variant="split-info"] .pd-contact-info__address,
.pd-section--contact-info[data-pd-module][data-background-tone="primary"][data-pd-variant="split-info"] .pd-contact-info__hours,
.pd-section--contact-info[data-pd-module][data-background-tone="secondary"][data-pd-variant="split-info"] .pd-contact-info__hours,
.pd-section--contact-info[data-pd-module][data-background-tone="primary"][data-pd-variant="inline-minimal"] .pd-contact-info__value,
.pd-section--contact-info[data-pd-module][data-background-tone="secondary"][data-pd-variant="inline-minimal"] .pd-contact-info__value,
.pd-section--contact-info[data-pd-module][data-background-tone="primary"][data-pd-variant="map-focus"] .pd-contact-info__value,
.pd-section--contact-info[data-pd-module][data-background-tone="secondary"][data-pd-variant="map-focus"] .pd-contact-info__value,
.pd-section--contact-info[data-pd-module][data-background-tone="primary"][data-pd-variant="map-focus"] .pd-contact-info__address,
.pd-section--contact-info[data-pd-module][data-background-tone="secondary"][data-pd-variant="map-focus"] .pd-contact-info__address {
  color: var(--pd-color-surface);
}
.pd-section--contact-info[data-pd-module][data-background-tone="primary"][data-pd-variant="split-info"] .pd-contact-info__link,
.pd-section--contact-info[data-pd-module][data-background-tone="secondary"][data-pd-variant="split-info"] .pd-contact-info__link,
.pd-section--contact-info[data-pd-module][data-background-tone="primary"][data-pd-variant="inline-minimal"] .pd-contact-info__link,
.pd-section--contact-info[data-pd-module][data-background-tone="secondary"][data-pd-variant="inline-minimal"] .pd-contact-info__link,
.pd-section--contact-info[data-pd-module][data-background-tone="primary"][data-pd-variant="map-focus"] .pd-contact-info__link,
.pd-section--contact-info[data-pd-module][data-background-tone="secondary"][data-pd-variant="map-focus"] .pd-contact-info__link {
  color: var(--pd-color-surface);
}
/* PASS 4BN: contact-info CTA tone-aware contrast moved to the
 * shared [data-background-tone] .pd-button rules in components.css. */

.pd-section--contact-info[data-pd-module] .pd-contact-info__inner {
  display: grid;
  gap: var(--pd-space-6);
}

.pd-section--contact-info[data-pd-module] .pd-contact-info__header {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
  max-width: 48rem;
}

/* PASS 4BO: contact-info section header typography moved to shared
 * .pd-eyebrow / .pd-section-heading / .pd-section-intro rules in
 * components.css. The placeholder modifier keeps its empty-state cue. */
.pd-section--contact-info[data-pd-module] .pd-contact-info__headline--placeholder {
  font-style: italic;
  opacity: 0.7;
}

.pd-section--contact-info[data-pd-module] .pd-contact-info__info {
  min-width: 0;
}

.pd-section--contact-info[data-pd-module] .pd-contact-info__list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pd-space-4);
}

.pd-section--contact-info[data-pd-module] .pd-contact-info__item {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-2);
  margin: 0;
}

.pd-section--contact-info[data-pd-module] .pd-contact-info__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pd-color-muted);
}

.pd-section--contact-info[data-pd-module] .pd-contact-info__value {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--pd-color-text);
}

.pd-section--contact-info[data-pd-module] .pd-contact-info__link {
  color: var(--pd-color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease, color 150ms ease;
}

.pd-section--contact-info[data-pd-module] .pd-contact-info__link:hover {
  border-bottom-color: currentColor;
}

.pd-section--contact-info[data-pd-module] .pd-contact-info__link:focus-visible {
  outline: 3px solid var(--pd-color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.pd-section--contact-info[data-pd-module] .pd-contact-info__address {
  margin: 0;
  font-style: normal;
  white-space: pre-wrap;
  color: var(--pd-color-text);
}

.pd-section--contact-info[data-pd-module] .pd-contact-info__hours {
  display: inline-block;
  color: var(--pd-color-text);
}

.pd-section--contact-info[data-pd-module] .pd-contact-info__cta-row {
  display: flex;
}

/* PASS 4BN: contact-info CTA composes .pd-button + .pd-button--primary.
 * Visual styling lives in components.css. */

.pd-section--contact-info[data-pd-module] .pd-contact-info__cta-label {
  display: inline-block;
}

/* Variant: split-info (default) */
.pd-section--contact-info[data-pd-module][data-pd-variant="split-info"] .pd-contact-info__inner {
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "info"
    "cta";
}

.pd-section--contact-info[data-pd-module][data-pd-variant="split-info"] .pd-contact-info__header {
  grid-area: header;
}

.pd-section--contact-info[data-pd-module][data-pd-variant="split-info"] .pd-contact-info__info {
  grid-area: info;
}

.pd-section--contact-info[data-pd-module][data-pd-variant="split-info"] .pd-contact-info__cta-row {
  grid-area: cta;
}

@media (min-width: 60rem) {
  .pd-section--contact-info[data-pd-module][data-pd-variant="split-info"] .pd-contact-info__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header info"
      "cta    info";
    align-items: start;
    gap: var(--pd-space-8);
  }
  .pd-section--contact-info[data-pd-module][data-pd-variant="split-info"] .pd-contact-info__cta-row {
    justify-content: flex-start;
  }
}

/* Variant: cards-channels */
.pd-section--contact-info[data-pd-module][data-pd-variant="cards-channels"] .pd-contact-info__inner {
  grid-template-columns: 1fr;
}

.pd-section--contact-info[data-pd-module][data-pd-variant="cards-channels"] .pd-contact-info__list {
  grid-template-columns: 1fr;
  gap: var(--pd-space-4);
}

@media (min-width: 40rem) {
  .pd-section--contact-info[data-pd-module][data-pd-variant="cards-channels"] .pd-contact-info__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60rem) {
  .pd-section--contact-info[data-pd-module][data-pd-variant="cards-channels"] .pd-contact-info__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pd-section--contact-info[data-pd-module][data-pd-variant="cards-channels"] .pd-contact-info__item {
  padding: var(--pd-space-5);
  background: var(--pd-color-surface-alt);
  border-radius: var(--pd-radius-lg);
  box-sizing: border-box;
}

.pd-section--contact-info[data-pd-module][data-pd-variant="cards-channels"] .pd-contact-info__cta-row {
  justify-content: flex-start;
}

/* Variant: inline-minimal */
.pd-section--contact-info[data-pd-module][data-pd-variant="inline-minimal"] .pd-contact-info__inner {
  grid-template-columns: 1fr;
  gap: var(--pd-space-4);
}

.pd-section--contact-info[data-pd-module][data-pd-variant="inline-minimal"] .pd-contact-info__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-space-3) var(--pd-space-5);
}

.pd-section--contact-info[data-pd-module][data-pd-variant="inline-minimal"] .pd-contact-info__item {
  flex-direction: row;
  align-items: baseline;
  gap: var(--pd-space-2);
}

.pd-section--contact-info[data-pd-module][data-pd-variant="inline-minimal"] .pd-contact-info__label {
  font-size: 0.75rem;
}

.pd-section--contact-info[data-pd-module][data-pd-variant="inline-minimal"] .pd-contact-info__value {
  font-size: 0.9375rem;
}

.pd-section--contact-info[data-pd-module][data-pd-variant="inline-minimal"] .pd-contact-info__cta-row {
  justify-content: flex-start;
}

/* Variant: map-focus */
.pd-section--contact-info[data-pd-module][data-pd-variant="map-focus"] .pd-contact-info__inner {
  grid-template-columns: 1fr;
  gap: var(--pd-space-6);
}

.pd-section--contact-info[data-pd-module][data-pd-variant="map-focus"] .pd-contact-info__map {
  width: 100%;
  overflow: hidden;
  border-radius: var(--pd-radius-lg);
  box-shadow: var(--pd-shadow-sm);
  background: var(--pd-color-muted-bg);
  position: relative;
}

.pd-section--contact-info[data-pd-module][data-pd-variant="map-focus"] .pd-contact-info__map-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.pd-section--contact-info[data-pd-module][data-pd-variant="map-focus"][data-map-height="short"] .pd-contact-info__map {
  height: 16rem;
}

.pd-section--contact-info[data-pd-module][data-pd-variant="map-focus"][data-map-height="medium"] .pd-contact-info__map {
  height: 24rem;
}

.pd-section--contact-info[data-pd-module][data-pd-variant="map-focus"][data-map-height="tall"] .pd-contact-info__map {
  height: 32rem;
}

.pd-section--contact-info[data-pd-module][data-pd-variant="map-focus"] .pd-contact-info__map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--pd-space-6);
  font-size: 0.9375rem;
  color: var(--pd-color-muted);
  text-align: center;
}

.pd-section--contact-info[data-pd-module][data-pd-variant="map-focus"] .pd-contact-info__list {
  grid-template-columns: 1fr;
  gap: var(--pd-space-3);
}

@media (min-width: 48rem) {
  .pd-section--contact-info[data-pd-module][data-pd-variant="map-focus"] .pd-contact-info__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pd-space-4);
  }
}

/* PASS 4BN: CTA reduced-motion override moved into components.css
 * .pd-button rule. Contact-info still owns its own __link transition
 * stop. */
@media (prefers-reduced-motion: reduce) {
  .pd-section--contact-info[data-pd-module] .pd-contact-info__link {
    transition: none;
  }
}