/* ECO component CSS: tile link. Skill: eco-tile-link. Link it, do not copy it: <link rel="stylesheet" href="/components/css/tile-link.css">
   Needs the Material Symbols Outlined font. Tokens only. Mobile-first (desktop from 769px). */
.tile-link { display: inline-flex; position: relative; cursor: pointer; text-decoration: none; }

.tile-link__inner {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-action-2);       /* White (default) */
  transition: border-color var(--duration-fast-3) var(--ease-standard);
}
/* Border is its own layer (inset: 0), so it never changes the tile's size */
.tile-link__inner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid var(--color-border-primary);
  transition: border-color var(--duration-fast-3) var(--ease-standard);
}
.tile-link:is(:hover, [data-state="hover"]) .tile-link__inner::before { border-color: var(--color-border-hover); }

/* Background */
.tile-link--grey .tile-link__inner  { background: var(--color-surface-raised-secondary); }
.tile-link--black .tile-link__inner { background: var(--color-surface-100); }
.tile-link--black .tile-link__inner::before { border-color: var(--color-border-action-1); }
.tile-link--black:is(:hover, [data-state="hover"]) .tile-link__inner {
  background-image: linear-gradient(90deg, var(--color-surface-opacity-white-20), var(--color-surface-opacity-white-20)),
                    linear-gradient(90deg, var(--color-surface-100), var(--color-surface-100));
}
.tile-link--black:is(:hover, [data-state="hover"]) .tile-link__inner::before { border-color: var(--color-border-action-1); }

/* Placement */
.tile-link--vertical .tile-link__inner   { flex-direction: column; gap: 4px; }
.tile-link--horizontal .tile-link__inner { flex-direction: row; gap: 4px; }

/* Label: body-md (Large), body-sm (Small) */
.tile-link__label {
  font-family: 'Breuer Condensed', Arial, sans-serif; font-weight: 400;
  color: var(--color-text-primary); white-space: nowrap; text-align: center;
  font-size: 16px; line-height: 22px; letter-spacing: 0.32px;
  font-feature-settings: 'ss02' 1, 'ss03' 1, 'ss06' 1;
}
.tile-link--small .tile-link__label { font-size: 14px; line-height: 20px; letter-spacing: 0.36px; }
.tile-link:is(:hover, [data-state="hover"]) .tile-link__label,
.tile-link:is(:hover, [data-state="hover"]) .tile-link__icon { color: var(--color-text-action-primary-hover); }
.tile-link--black .tile-link__label,
.tile-link--black .tile-link__icon,
.tile-link--black:is(:hover, [data-state="hover"]) .tile-link__label,
.tile-link--black:is(:hover, [data-state="hover"]) .tile-link__icon { color: var(--color-text-primary-inverted); }

/* Label modifiers: weight Medium 500 or Bold 600, italic. The font ships italic faces for every weight. */
.tile-link--weight-medium .tile-link__label { font-weight: 500; }
.tile-link--bold .tile-link__label { font-weight: 600; }
.tile-link--italic .tile-link__label { font-style: italic; }

/* Icon */
.tile-link__icon {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none;
  white-space: nowrap; flex-shrink: 0; user-select: none;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 20px; color: var(--color-text-primary);
}
.tile-link--vertical .tile-link__icon { font-size: 24px; }

/* Padding: mobile */
.tile-link--large.tile-link--vertical .tile-link__inner,
.tile-link--large.tile-link--horizontal .tile-link__inner { padding: 9px 16px; }
.tile-link--small.tile-link--vertical .tile-link__inner,
.tile-link--small.tile-link--horizontal .tile-link__inner { padding: 6px 8px; }

/* Brand (Large only): logo tile */
.tile-link--brand .tile-link__inner { height: 80px; padding: 0 32px; }
.tile-link--brand img { height: 24px; width: auto; display: block; }

@media (min-width: 769px) {
  .tile-link__label { font-size: 17px; line-height: 24px; }
  .tile-link--small .tile-link__label { font-size: 14px; line-height: 20px; }
  .tile-link--large.tile-link--vertical .tile-link__inner   { padding: 10px 16px; }
  .tile-link--large.tile-link--horizontal .tile-link__inner { padding: 8px 16px; gap: 8px; }
  .tile-link--small.tile-link--vertical .tile-link__inner   { padding: 8px 16px; }
  .tile-link--small.tile-link--horizontal .tile-link__inner { padding: 6px 16px; gap: 8px; }
  .tile-link--brand .tile-link__inner { height: 112px; padding: 0 48px; }
  .tile-link--brand img { height: 48px; }
}

body.keyboard-nav .tile-link:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }