/*
  Certifications — minositeseink.html only. A centered intro (no photo
  gallery: unlike the product subpages, there's no natural "certificate
  photo" set to bento alongside the text) plus a stat-pill row reusing
  .product-intro__row/__features from products.css, then this page's own
  cert-card grid and closing CTA. Content sourced verbatim from the real,
  current certificate PDFs the client supplied (not the old, partly stale
  brunnbauer.hu/minositeseink/ page).
*/

.cert-intro {
  background: var(--color-white);
  padding-block: var(--space-9);
}

.cert-intro__text {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.cert-intro__eyebrow {
  color: var(--color-slate-600);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cert-intro__title {
  margin-top: var(--space-3);
}

.cert-intro__divider {
  width: 56px;
  height: 3px;
  margin-top: var(--space-5);
  margin-inline: auto;
  background: var(--color-red-600);
  border-radius: 2px;
}

.cert-intro__lead {
  margin-top: var(--space-5);
  text-align: left;
}

/* Paired with .product-intro__features (products.css) directly — unlike
   szerviz.html, this page has no .product-intro__cert badge sitting
   beside the pill row inside a .product-intro__row flex wrapper, so the
   grid is used on its own and just needs the same top spacing restored. */
.cert-intro__row {
  margin-top: var(--space-7);
}

/* ---- Certificate grid ---- */
.certifications {
  background: var(--color-surface);
  padding-block: var(--space-9);
}

.certifications__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.cert-card {
  display: flex;
  flex-direction: column;
  /* 33.333% minus (2/3 of the row gap) so 3 cards + 2 gaps fill the row
     exactly; wraps to 2-per-row then 1-per-row at the breakpoints below.
     This, plus justify-content: center on the grid, is what centers the
     last (2-card) row under the full row of 3 instead of leaving it
     left-aligned with an empty gap. */
  flex: 0 1 calc(33.333% - var(--space-6) * 2 / 3);
  min-width: 300px;
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: 24px 0 24px 0;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-base) var(--ease-out);
}

.cert-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.cert-card__icon {
  width: 48px;
  height: 48px;
}

.cert-card__issuer {
  margin-top: var(--space-5);
  color: var(--color-slate-600);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cert-card__title {
  margin-top: var(--space-2);
  color: var(--color-navy-900);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: 1.3;
}

/* Issuer hidden (HIDDEN-ON-PURPOSE in the HTML): the title takes over the
   issuer's gap below the icon. Inert once `hidden` is removed. */
.cert-card__issuer[hidden] + .cert-card__title {
  margin-top: var(--space-5);
}
.cert-card__desc {
  margin-top: var(--space-3);
  color: var(--color-slate-600);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.cert-card__meta {
  /* The auto margin soaks up the height difference between cards in the
     same row, so the spare space sits above the meta line rather than
     between it and the buttons. The meta + actions block then always reads
     as one unit, and the buttons still share a baseline across the row.
     padding-top keeps the minimum gap to the title/desc above. */
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--color-slate-400);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.cert-card__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  /* Fixed gap below the meta line; the bottom alignment across a row now
     comes from .cert-card__meta's margin-top: auto. */
  padding-top: var(--space-5);
}

.cert-card__view {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-navy-900);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring);
}

.cert-card__view:hover,
.cert-card__view:focus-visible {
  background: var(--color-navy-700);
}

.cert-card__view:active {
  transform: scale(0.97);
}

.cert-card__download {
  color: var(--color-red-600);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  transition: color var(--duration-fast) var(--ease-out);
}

.cert-card__download:hover,
.cert-card__download:focus-visible {
  color: var(--color-red-700);
  text-decoration: underline;
}

/* ---- Small desktop / large tablet (<= 1024px): 2-per-row ---- */
@media (max-width: 1024px) {
  .cert-card {
    flex: 0 1 calc(50% - var(--space-6) / 2);
  }
}

/* ---- Tablet / mobile (<= 768px) ---- */
@media (max-width: 768px) {
  .cert-intro,
  .certifications {
    padding-block: var(--space-8);
  }
}

/* ---- Mobile (<= 560px): 1-per-row ---- */
@media (max-width: 560px) {
  .cert-card {
    flex: 1 1 100%;
    min-width: 0;
  }
}