/* Landing pages built from a header and a grid of link cards: Elevi and
   Link-uri utile. Page shell from the template.css tokens, so the title and
   cards start on the logo's edge. */

.landing-page {
  padding: var(--page-top) 0 var(--page-end);
}

.landing-container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.landing-header {
  max-width: 44rem;
  margin-bottom: var(--page-head-gap);
}

.landing-pill {
  margin-bottom: 1rem;
}

.landing-title {
  font-size: var(--fs-page-title);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--primary);
  margin-bottom: 0.75rem;
  text-wrap: balance;
}

.landing-lead {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--on-surface-variant);
  max-width: 40rem;
  margin: 0;
}

/* One column on phones: two columns below 768px squeezed the card titles
   into 150px ("Ministerul / Educației / Naționale"). */
.landing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--card-gap);
}

/* Three cards (Link-uri utile) sit in one row from tablet width: from
   1024px only, 768-1023px showed two and a lone third (brief 116). */
@media (min-width: 768px) {
  .landing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The icon sits beside the title; the description and the call to action
   span the card below them. */
.landing-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: center;
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  background-color: var(--surface-container-lowest);
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.landing-card:hover,
.landing-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}

.landing-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background-color: var(--tint);
  color: var(--primary);
}

.landing-card-icon .material-symbols-outlined {
  font-size: 1.375rem;
}

.landing-card-title {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--on-surface);
  margin: 0;
}

.landing-card-desc,
.landing-card-cta {
  grid-column: 1 / -1;
}

/* Link-uri utile's three cards share a row from 768px, stretched to the
   tallest. A stretched card shares its spare height out between its rows,
   and each button sat centred in its share, 1-8px off its neighbours'. The
   button now sits at the end of its row, the card's bottom edge, so the
   three line up; the title and the description stay put (brief 142). */
@media (min-width: 768px) {
  .landing-grid-3 .landing-card-cta {
    align-self: end;
  }
}

/* Below 1024px a third of the row left the title 111px beside the icon
   ("Ministerul / Educației / Naționale", "ISJ Caraș- / Severin"): the icon
   goes above the title, which gets the card's full width, and the card takes
   the phone padding, so "ISJ Caraș-Severin" (172px) fits on one line at
   768px instead of breaking at its hyphen. The description row takes the
   spare height, so icons and titles start level. */
@media (min-width: 768px) and (max-width: 1023px) {
  .landing-grid-3 .landing-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    padding: 1.25rem;
  }

  .landing-grid-3 .landing-card-desc {
    align-self: start;
  }

  .landing-grid-3 .landing-card-icon {
    margin-bottom: 1rem;
  }
}

.landing-card-desc {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--on-surface-variant);
  margin: 0.75rem 0 1rem;
}

/* A tint pill, solid green while the card is hovered or focused. */
.landing-card-cta {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 9999px;
  background-color: var(--tint);
  color: var(--primary);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.landing-card:hover .landing-card-cta,
.landing-card:focus-visible .landing-card-cta {
  background-color: var(--primary);
  color: var(--on-primary);
}