/* =============================================================================
   Card — docs/components/card.md, elevation.md, motion.md
   The shared card rhythm: radius 16, --card-padding, --card-gap, one elevation.
   Siblings in a grid come out equal height because the card is a column flex
   box at height:100% — it fills whatever row height the grid package gives it.
   ============================================================================= */

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--card-padding);
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  color: var(--color-primary);
  transition:
    opacity var(--duration-moderate) var(--ease-standard),
    transform var(--duration-moderate) var(--ease-standard),
    box-shadow var(--duration-moderate) var(--ease-standard),
    background-color var(--duration-moderate) var(--ease-standard),
    border-color var(--duration-moderate) var(--ease-standard);
}

/* ---------------------------------------------------------------------------
   Modifiers
   --------------------------------------------------------------------------- */
.card--shadow {
  box-shadow: var(--shadow-card);
}

.card--border {
  border: 1px solid var(--color-border);
}

/* .card--hover is the lift for a clickable card only — put it on the <a> or
   <button> that is the card (motion.md § Hover only on clickable surfaces; the
   gate rejects it anywhere else). It carries its own transition rather than
   relying on .card's, so it keeps working on an element that is not a .card. */
.card--hover {
  transition:
    opacity var(--duration-moderate) var(--ease-standard),
    transform var(--duration-moderate) var(--ease-standard),
    box-shadow var(--duration-moderate) var(--ease-standard),
    background-color var(--duration-moderate) var(--ease-standard),
    border-color var(--duration-moderate) var(--ease-standard);
  will-change: transform;
}

.card--hover:hover {
  transform: var(--lift-lg);
  box-shadow: var(--shadow-card-hover);
}

/* ---------------------------------------------------------------------------
   Dark sections — card.md § dark background. Translucent white fill and border,
   brightened on hover together with the lift (motion.md § Hover lift).
   The design system has no alpha tokens at these steps, so the values are mixed
   from --color-white; see the report.
   --------------------------------------------------------------------------- */
[data-tone='dark'] .card {
  background-color: color-mix(in srgb, var(--color-white) 5%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 15%, transparent);
  color: var(--color-white);
}

[data-tone='dark'] .card--shadow {
  box-shadow: var(--shadow-tile);
}

[data-tone='dark'] .card--hover:hover {
  background-color: color-mix(in srgb, var(--color-white) 9%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 30%, transparent);
  box-shadow: var(--shadow-tile);
}

[data-tone='dark'] .card__title {
  color: var(--color-white);
}

[data-tone='dark'] .card__text {
  color: var(--color-white);
}

/* ---------------------------------------------------------------------------
   Elements — icon badge 48px / 24px icon / radius 12 (icon-system.md)
   --------------------------------------------------------------------------- */
.card__icon {
  width: var(--space-12);
  height: var(--space-12);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--card-gap);
  background-color: var(--color-primary-pale);
  border-radius: var(--border-radius-md);
  color: var(--color-primary);
  transition: transform var(--duration-moderate) var(--ease-standard);
}

.card__icon svg {
  width: var(--space-6);
  height: var(--space-6);
}

.card__title {
  font-size: 1.5rem;
  line-height: 130%;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.card__text {
  font-size: 1rem;
  line-height: 160%;
  font-weight: 500;
  color: var(--color-text-gray);
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Icon emphasis on card hover — motion.md § Hover lift. Clickable cards only.
   `.icon-badge` is owned by package 3.1; this file owns only the coupling, so
   the badge's own `transition` is declared there, not here.
   --------------------------------------------------------------------------- */
.card--hover:hover .icon-badge,
.card--hover:hover .card__icon {
  transform: scale(1.1);
}

/* ---------------------------------------------------------------------------
   Feature card variant
   --------------------------------------------------------------------------- */
.feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ---------------------------------------------------------------------------
   Value card variant
   --------------------------------------------------------------------------- */
.value-card {
  text-align: center;
  align-items: center;
}

.value-card__icon {
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Responsive typography — the .h4 / .body-regular scale per breakpoint
   (typography.md). Spacing needs no query: --card-padding and --card-gap are
   already redefined per breakpoint in css/variables.css.
   --------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .card__title {
    font-size: 1.375rem;
  }

  .card__text {
    font-size: 0.9375rem;
  }
}

@media (max-width: 600px) {
  .card__title {
    font-size: 1.125rem;
  }

  .card__text {
    font-size: 0.875rem;
  }
}

/* ---------------------------------------------------------------------------
   Division card (compact) — docs/components/card.md § Division card,
   docs/components/footer.md § Divisions section.

   Labels another Danubius division and links to its site. Each card carries its
   OWN division palette, which is the one sanctioned exception to the "EdTech
   trio only" rule in docs/redesign/edtech/contracts.md §1 — a cross-division
   nav has to show the real division colours to be readable as one.

   The palette is bound through three local custom properties so the badge,
   border and fill all track a single `--division-*` triple.
   --------------------------------------------------------------------------- */
.division-card {
  /* Corporate (IT Solutions) is the default. */
  --division-brand: var(--color-info);
  --division-accent: var(--color-info);
  --division-card-bg: var(--color-primary-pale);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  height: 100%;
  min-width: min(300px, 100%);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--division-accent) 35%, transparent);
  border-radius: var(--border-radius-lg);
  background-color: color-mix(in srgb, var(--division-card-bg) 15%, transparent);
  box-shadow: var(--shadow-tile);
  /* card.md "Hover Motion" (Division card): --lift-md, no shadow change — only
     when a link wraps the card (the footer division row). */
  transition: transform var(--duration-base) var(--ease-standard);
}

a:hover > .division-card {
  transform: var(--lift-md);
}

.division-card--ai {
  --division-brand: var(--color-division-ai-brand);
  --division-accent: var(--color-division-ai-accent);
  --division-card-bg: var(--color-division-ai-card-bg);
}

/* card.md: the EdTech border tint is the brand green, not the light accent. */
.division-card--edtech {
  --division-brand: var(--color-division-edtech-brand);
  --division-accent: var(--color-division-edtech-brand);
  --division-card-bg: var(--color-division-edtech-card-bg);
}

.division-card--insurtech {
  --division-brand: var(--color-division-insurtech-brand);
  --division-accent: var(--color-division-insurtech-accent);
  --division-card-bg: var(--color-division-insurtech-card-bg);
}

/* Beats .icon-badge--pale / --division, which read the app-level division token. */
.division-card .icon-badge {
  background-color: var(--division-brand);
  color: var(--color-white);
}

/* typographyH5 — the size comes from the global h3/.h5 scale; only colour is set
   here. The card only ever sits on the dark footer, hence white. */
.division-card__title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 140%;
  color: var(--color-white);
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .division-card__title {
    font-size: 1rem;
  }
}