/* Icon system — stroke 1.75, 24×24 grid, brand teal */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-brand);
}

.icon svg {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
}

.icon svg [fill="none"] {
  stroke: currentColor;
}

.icon--card {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 12px;
  background: rgba(45, 125, 111, 0.1);
}

.icon--card svg {
  width: 1.625rem;
  height: 1.625rem;
}

.icon--advantage {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 14px;
  background: rgba(45, 125, 111, 0.1);
}

.icon--advantage svg {
  width: 1.75rem;
  height: 1.75rem;
}

.icon--timeline {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.icon--timeline svg {
  width: 1.375rem;
  height: 1.375rem;
}

.icon--inline {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: rgba(45, 125, 111, 0.1);
  vertical-align: -0.25em;
}

.icon--inline svg {
  width: 1.125rem;
  height: 1.125rem;
}

.icon--include {
  width: 3rem;
  height: 3rem;
  border-radius: 11px;
  background: rgba(45, 125, 111, 0.08);
}

.icon--include svg {
  width: 1.5rem;
  height: 1.5rem;
}

.icon--include-pill {
  flex-shrink: 0;
}

.icon--include-pill svg {
  width: 1.5rem;
  height: 1.5rem;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.icon--max-brand {
  background: rgba(79, 70, 229, 0.12);
  color: #5B4EE5;
}

/* Star rating */
.stars {
  display: inline-flex;
  gap: 0.2rem;
  align-items: center;
}

.stars svg {
  width: 1.375rem;
  height: 1.375rem;
  color: #E8A317;
}

.stars svg.stars__item--muted {
  color: var(--color-border);
}

/* Contact rows */
.contact-line {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}

.contact-line__icon {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  display: block;
  color: currentColor;
}

.contact-line__icon [fill="none"] {
  stroke: currentColor;
  fill: none;
}

.contact-line:hover {
  color: var(--color-brand);
  text-decoration: none;
}

.section--brand .contact-line {
  color: #fff;
}

.section--brand .icon--inline {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Location / list labels with icons */
.label-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer__address {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}

.footer__address .contact-line__icon {
  margin-top: 0.2rem;
  opacity: 0.85;
}

.footer .contact-line {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.footer .contact-line:hover {
  color: #fff;
}

.footer .contact-line__icon {
  opacity: 0.85;
}

.footer .contact-line:hover .contact-line__icon {
  opacity: 1;
}

.footer__rating .stars {
  vertical-align: middle;
  margin-right: 0.25rem;
}

body.a11y .icon--card,
body.a11y .icon--advantage,
body.a11y .icon--timeline,
body.a11y .icon--inline,
body.a11y .icon--include {
  background: #eee;
  color: #000;
  border: 1px solid #000;
}
