/* =================================================================
   HM2 SHOWROOM — DOBRA SEGMENTOS VITRINE
   ================================================================= */

/* --- Seção fundo ------------------------------------------------ */
body:not(.path-admin) .h2-secao--segmentos-vitrine {
  background: linear-gradient(160deg, #f0f4ff 0%, #e8eeff 100%);
  padding-block: 4rem;
}

/* --- Grid spacing ----------------------------------------------- */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .row {
  --bs-gutter-y: 1.5rem;
}

/* --- Card base -------------------------------------------------- */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .card {
  border: none;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 2px 20px rgba(80, 90, 200, 0.07);
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1),
              box-shadow 0.3s ease;
}
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(80, 90, 200, 0.18);
}

/* Barra accent topo (só sem imagem) */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .card:not(:has(.views-field-field-segmento-imagem img))::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--hm2-color-primary, #5b6cf4),
    var(--hm2-color-primary-hover, #7c8df7));
}

/* --- Layout flex: card-body e card-text ------------------------- */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  padding: 2rem 1.75rem 1.75rem;
}
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* ================================================================
   MODO IMAGEM: CSS Grid — altura fixa, nome+botão ghost sobre
   o gradient, descrição centralizada na área branca.
   Grid: col-1(1fr) × col-2(auto) | row-1(200px) × row-2(1fr)
   ================================================================ */

/* Card com altura fixa — imagem (155px) + descrição (3 linhas ≈ 105px) */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .card:has(.views-field-field-segmento-imagem img) {
  height: 260px;
}

/* card-body sem padding, stretch para preencher */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .card:has(.views-field-field-segmento-imagem img) .card-body {
  padding: 0;
  align-items: stretch;
}

/* card-text: container grid */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .card:has(.views-field-field-segmento-imagem img) .card-text {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 155px 1fr;
  flex: 1;
  width: 100%;
  align-items: start;
  text-align: left;
}

/* Imagem: row 1, todas as colunas */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .card:has(.views-field-field-segmento-imagem img) .views-field-field-segmento-imagem {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .card:has(.views-field-field-segmento-imagem img) .views-field-field-segmento-imagem .field-content {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

/* Gradient overlay no rodapé da imagem */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .card:has(.views-field-field-segmento-imagem img) .views-field-field-segmento-imagem .field-content::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 65%;
  background: linear-gradient(
    to top,
    rgba(15, 15, 35, 0.82) 0%,
    rgba(15, 15, 35, 0.4) 55%,
    transparent 100%
  );
  pointer-events: none;
}

/* Imagem 155px cobrindo a célula */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .views-field-field-segmento-imagem img {
  width: 100%;
  height: 155px;
  object-fit: cover;
  display: block;
}

/* Nome: row 1 col 1 — ancorado na base do gradient */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .card:has(.views-field-field-segmento-imagem img) .views-field-name {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  position: relative;
  z-index: 2;
  padding: 0 0.5rem 0.8rem 1.25rem;
}
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .card:has(.views-field-field-segmento-imagem img) .views-field-name .field-content {
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  margin-bottom: 0;
}

/* Botão ghost: row 1 col 2 — mesma linha do nome */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .card:has(.views-field-field-segmento-imagem img) .views-field-nothing {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  position: relative;
  z-index: 2;
  padding: 0 1rem 0.8rem 0.5rem;
  width: auto;
  margin-top: 0;
}
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .card:has(.views-field-field-segmento-imagem img) .views-field-nothing a {
  display: inline-block;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  color: #ffffff !important;
  padding: 0.3rem 0.9rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .card:has(.views-field-field-segmento-imagem img) .views-field-nothing a:hover {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--hm2-color-primary, #5b6cf4) !important;
  border-color: rgba(255, 255, 255, 0.92);
}

/* Descrição: row 2, todas as colunas — centralizada */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .card:has(.views-field-field-segmento-imagem img) .views-field-description__value {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 1.5rem;
  margin-bottom: 0;
}
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .card:has(.views-field-field-segmento-imagem img) .views-field-description__value .field-content p {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

/* Ocultar ícone emoji quando há imagem */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .card:has(.views-field-field-segmento-imagem img) .views-field-field-segmento-icone {
  display: none;
}

/* ================================================================
   MODO ÍCONE: emoji em bolha colorida (sem imagem)
   ================================================================ */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .views-field-field-segmento-icone {
  margin-bottom: 1.1rem;
}
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .views-field-field-segmento-icone .field-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hm2-color-primary, #5b6cf4) 12%, transparent),
    color-mix(in srgb, var(--hm2-color-primary, #5b6cf4) 6%, transparent));
  border-radius: 50%;
  font-size: 2.5rem;
  line-height: 1;
  margin: 0 auto;
  border: 2px solid color-mix(in srgb, var(--hm2-color-primary, #5b6cf4) 18%, transparent);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .card:hover
  .views-field-field-segmento-icone .field-content {
  transform: scale(1.12);
}

/* --- Nome -------------------------------------------------------- */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .views-field-name .field-content {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--hm2-color-heading, #1e1b4b);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

/* --- Descrição -------------------------------------------------- */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .views-field-description__value {
  flex: 1;
  margin-bottom: 1.25rem;
}
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine
  .views-field-description__value .field-content p {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

/* --- Botão CTA -------------------------------------------------- */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .views-field-nothing {
  width: 100%;
  margin-top: auto;
}
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .views-field-nothing a {
  display: block;
  border: 2px solid var(--hm2-color-primary, #5b6cf4);
  color: var(--hm2-color-primary, #5b6cf4) !important;
  background: transparent;
  padding: 0.6rem 1.5rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .views-field-nothing a:hover {
  background: var(--hm2-color-primary, #5b6cf4);
  color: #fff !important;
  text-decoration: none;
}

/* --- Animação de entrada via JS --------------------------------- */
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .col {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.22,1,.36,1);
}
body:not(.path-admin) .view-hm2-showroom-segmentos-vitrine .col.hm2-seg-visible {
  opacity: 1;
  transform: none;
}