/*
 * GT Center — Produktkort
 * Component: product-card
 * Root font size: 62.5% (1rem = 10px)
 */

/* ── Grid ─────────────────────────────────────────────────── */
.gtc-card-grid {
  display:               grid;
  grid-template-columns: repeat(var(--gtc-columns, 4), 1fr);
  gap:                   2px;
  align-items:           stretch;
}

/* fx-child wrapper måste sträcka sig så kortet fyller raden */
.gtc-card-grid > .fx-child {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1100px) {
  .gtc-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .gtc-card-grid { grid-template-columns: 1fr; }
}

/* ── Kort ─────────────────────────────────────────────────── */
.gtc-card {
  display:        flex;
  flex-direction: column;
  height:         100%;
}

/* Bricks loop-wrappers måste sträcka sig för lika höga kort */
.brxe-block:has(.gtc-card),
.brxe-code:has(.gtc-card) {
  display:        flex;
  flex-direction: column;
  height:         100%;
}

/* Shortcode-variant */
.gtc-card-grid > .fx-child {
  display:        flex;
  flex-direction: column;
}

/* ── Bild ─────────────────────────────────────────────────── */
.gtc-card__image-wrap {
  display:      block;
  position:     relative;
  aspect-ratio: 16 / 10;
  overflow:     hidden;
}

/* ── Begagnat-badge ───────────────────────────────────────── */
.gtc-badge-begagnat {
  display:        inline-block;
  font-family:    'Barlow Semi Condensed', sans-serif;
  font-weight:    700;
  font-size:      1.1rem;
  text-transform: uppercase;
  background:     #F5C400;
  color:          #1B1910;
  padding:        0.5rem 1rem;
  border-radius:  2px;
  line-height:    1;
}

.gtc-card__badge {
  position: absolute;
  top:      1.2rem;
  left:     1.2rem;
  z-index:  2;
}

/* ── El-badge (grön) ──────────────────────────────────────── */
.gtc-badge-el {
  display:        inline-block;
  font-weight:    700;
  font-size:      1.1rem;
  text-transform: uppercase;
  background:     #2e7d32;
  color:          #fff;
  padding:        0.4rem 0.9rem;
  border-radius:  2px;
  line-height:    1;
}

.gtc-card__cat-row {
  display:     flex;
  align-items: center;
  gap:         0.8rem;
  margin-bottom: 0.6rem;
}
.gtc-card__cat-row .gtc-card__cat { margin-bottom: 0; }

/* ── Pris (begagnat) ──────────────────────────────────────── */
.gtc-card__pris {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size:   2.2rem;
  line-height: 1;
  margin:      -1rem 0 1.4rem;
}

.gtc-card__image-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.5s ease;
}

.gtc-card:hover .gtc-card__image-wrap img {
  transform: scale(1.04);
}

.gtc-card__image-placeholder {
  width:      100%;
  height:     100%;
  background: rgba(255,255,255,0.04);
}

/* ── Body ─────────────────────────────────────────────────── */
.gtc-card__body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        2rem 1.8rem 1.8rem;
}

/* Kategori */
.gtc-card__cat {
  font-size:      1.1rem;
  font-weight:    600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity:        0.4;
  margin-bottom:  0.6rem;
  display:        block;
}

/* Titel */
.gtc-card__title {
  font-size:   var(--text-l);
  font-weight: 700;
  line-height: 1.1;
  margin:      0 0 2rem;
}

.gtc-card__title a {
  text-decoration: none;
  color:           inherit;
}

/* ── Specs ────────────────────────────────────────────────── */
.gtc-card__specs {
  flex:    1;
  margin:  0;
  padding: 0;
}

.gtc-card__specs--empty {
  min-height: 7rem;
}

.gtc-card__spec {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             1rem;
  padding:         1rem 0;
  border-bottom:   1px solid rgba(128,128,128,0.15);
}

.gtc-card__spec:first-child {
  border-top: 1px solid rgba(128,128,128,0.15);
}

.gtc-card__spec dt {
  font-size:   1.3rem;
  opacity:     0.45;
  flex-shrink: 0;
}

.gtc-card__spec dd {
  font-size:   1.3rem;
  font-weight: 700;
  margin:      0;
  text-align:  right;
}

/* ── Footer ───────────────────────────────────────────────── */
.gtc-card__footer {
  display:     flex;
  align-items: center;
  gap:         1.2rem;
  margin-top:  2.4rem;
}

.gtc-card__arrow {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           4rem;
  height:          4rem;
  background:      rgba(128,128,128,0.12);
  border-radius:   3px;
  color:           inherit;
  text-decoration: none;
  flex-shrink:     0;
  transition:      background 0.15s;
}

.gtc-card__arrow svg {
  width:  1.6rem;
  height: 1.6rem;
}

.gtc-card__arrow:hover {
  background: rgba(128,128,128,0.22);
}

.gtc-card__compare {
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           3.2rem;
  height:          3.2rem;
  border-radius:   3px;
  color:           inherit;
  text-decoration: none;
  opacity:         0.3;
  transition:      opacity 0.15s, background 0.15s;
  flex-shrink:     0;
}
.gtc-card__compare:hover { opacity: 1; }

/* ── Tooltip ──────────────────────────────────────────────── */
.gtc-card__compare::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.8rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.4rem);
  background: #1B1910;
  color: #EAE5D4;
  font-family: 'Barlow', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.6rem 0.9rem;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 50;
}

.gtc-card__compare::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.4rem);
  border: 5px solid transparent;
  border-top-color: #1B1910;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 50;
}

.gtc-card__compare:hover::after,
.gtc-card__compare:hover::before,
.gtc-card__compare:focus-visible::after,
.gtc-card__compare:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.gtc-card__brand {
  font-size:      1.1rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity:        0.35;
  margin-left:    auto;
}

.gtc-card__brand-img {
  height:      auto;
  width:       auto;
  max-width:   10rem;
  max-height:  3rem;
  object-fit:  contain;
  display:     block;
  margin-left: auto;
}