/*
 * Fossas.pt — Catálogo Técnico
 * Grelha de produto com estrutura previsível, inspirada no comportamento de uma loja profissional.
 */

/* A grelha estica todos os cartões de cada linha para a mesma altura. */
.fct-products .fct-grid,
section.fct-products .fct-grid,
.fct-grid {
  align-items: stretch !important;
}

/* Cartão: coluna vertical e altura total disponível. */
.fct-grid > .fct-card,
.fct-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0;
}

/* Área visual consistente, como numa grelha e-commerce. */
.fct-card > .fct-card-media,
.fct-card-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 250px !important;
  height: 250px !important;
  min-height: 250px !important;
  overflow: hidden;
}

.fct-card-media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/*
 * Corpo do cartão dividido em zonas previsíveis:
 * marca / título / 3 características / CTA.
 */
.fct-card > .fct-card-body,
.fct-card-body {
  display: grid !important;
  grid-template-rows:
    18px
    68px
    108px
    48px !important;
  row-gap: 12px !important;
  flex: 1 1 auto !important;
  min-height: 278px;
  padding: 18px 18px 18px !important;
  align-content: stretch;
}

/* Marca: espaço reservado mesmo quando não existe texto. */
.fct-card-brand {
  display: block;
  min-height: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  overflow: hidden;
  line-height: 18px !important;
}

/* Título: bloco fixo suficiente para até 3 linhas sem mexer no CTA. */
.fct-card-body > h3,
.fct-card-body h3 {
  align-self: start;
  min-height: 68px !important;
  max-height: 68px !important;
  margin: 0 !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Características: três linhas reservadas, existam ou não dados. */
.fct-card-facts {
  display: grid !important;
  grid-template-rows: repeat(3, 28px) !important;
  gap: 8px !important;
  align-content: start !important;
  min-height: 108px !important;
  height: 108px !important;
  margin: 0 !important;
  overflow: hidden;
}

.fct-card-facts > * {
  min-height: 28px;
  margin: 0 !important;
  display: flex;
  align-items: flex-start;
}

/* CTA: posição final fixa. */
.fct-card-body > a:last-child,
.fct-card-body > .fct-card-cta,
.fct-card .fct-card-cta {
  align-self: stretch !important;
  justify-self: stretch !important;
  margin: 0 !important;
  min-height: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/*
 * IMPORTANT: explicit grid placement.
 * A brand span is not rendered for products without a brand.
 * Without fixed grid rows, CSS Grid auto-placement shifts title/facts/CTA upwards.
 * These row assignments preserve the empty brand slot and keep every CTA aligned.
 */
.fct-card-body > .fct-card-brand {
  grid-row: 1 !important;
}

.fct-card-body > h3 {
  grid-row: 2 !important;
}

.fct-card-body > .fct-card-facts {
  grid-row: 3 !important;
}

.fct-card-body > a:last-child,
.fct-card-body > .fct-card-cta {
  grid-row: 4 !important;
}

/* Desktop intermédio: mantém a estrutura sem comprimir os factos. */
@media (max-width: 1180px) {
  .fct-card > .fct-card-media,
  .fct-card-media {
    flex-basis: 225px !important;
    height: 225px !important;
    min-height: 225px !important;
  }

  .fct-card > .fct-card-body,
  .fct-card-body {
    grid-template-rows: 18px 72px 112px 48px !important;
    min-height: 286px;
  }

  .fct-card-body > h3,
  .fct-card-body h3 {
    min-height: 72px !important;
    max-height: 72px !important;
  }

  .fct-card-facts {
    min-height: 112px !important;
    height: 112px !important;
  }
}

/* Mobile: preserva hierarquia, mas deixa os cartões respirar. */
@media (max-width: 767px) {
  .fct-card > .fct-card-media,
  .fct-card-media {
    flex-basis: 210px !important;
    height: 210px !important;
    min-height: 210px !important;
  }

  .fct-card > .fct-card-body,
  .fct-card-body {
    grid-template-rows: 18px 66px 104px 48px !important;
    row-gap: 10px !important;
    min-height: 266px;
    padding: 16px !important;
  }

  .fct-card-body > h3,
  .fct-card-body h3 {
    min-height: 66px !important;
    max-height: 66px !important;
  }

  .fct-card-facts {
    min-height: 104px !important;
    height: 104px !important;
    grid-template-rows: repeat(3, 27px) !important;
    gap: 7px !important;
  }
}