/**
 * MAPPE: /assets/css/components/
 * FIL: cards.css
 *
 * BRUGES AF:
 * - butik.php (produkt-kort)
 * - søgning.php (butik-kort, produkt-kort)
 * - mine_butikker.php (butik-kort)
 *
 * AFHÆNGIGHEDER:
 * - /assets/css/base/variables.css
 */

/* ============================================
   BUTIK-KORT
   ============================================ */

.butik-kort {
    background: var(--surface);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    color: var(--tekst);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.butik-kort:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Billede - både direkte img og i .butik-logo wrapper */
.butik-kort img,
.butik-kort .butik-logo img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
}

.butik-kort .butik-logo {
    margin-bottom: var(--spacing-sm);
}

.butik-kort h3 {
    color: var(--tekst);
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

/* Beskrivelse */
.butik-kort p,
.butik-kort .butik-beskrivelse {
    color: var(--mørk-grå);
    margin-bottom: var(--spacing-sm);
    flex-grow: 1;
    font-size: 0.8125rem;
}

.butik-status {
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--lys-grå);
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.status-detalje {
    font-size: 0.6875rem;
    color: var(--mørk-grå);
    font-style: italic;
}

/* ============================================
   PRODUKT-KORT
   ============================================ */

.produkt-card {
    background: var(--surface);
    border: 1px solid var(--lys-grå);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    text-decoration: none;
    color: var(--tekst);
    display: flex;
    flex-direction: column;
}

.produkt-card:hover {
    border-color: var(--tekst);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.produkt-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.produkt-card-info {
    padding: var(--spacing-sm);
}

.produkt-card h4 {
    color: var(--tekst);
    margin-bottom: 0.1875rem;
    font-size: 0.875rem;
}

.produkt-card-butik {
    font-size: 0.75rem;
    color: var(--mørk-grå);
    margin-bottom: var(--spacing-xs);
}

.produkt-card-pris {
    font-weight: 600;
    font-size: 0.9375rem;
    margin: 0;
}

.gammel-pris {
    text-decoration: line-through;
    color: var(--mørk-grå);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    margin-right: var(--spacing-xs);
    /* Holder den absolut placerede skærmlæsertekst inde i prisen, også i scrollrækker. */
    position: relative;
}

/* "Før"-tekst til skærmlæsere (gennemstregning læses ikke op) */
.gammel-pris-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tilbud-pris {
    color: var(--fejl);
}

/* ============================================
   PRODUKT-KORT (ALTERNATIV STYLING)
   ============================================ */

.produkt-kort {
    position: relative;
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    color: var(--tekst);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.produkt-kort:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.produkt-billede {
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: var(--border-radius);
    background: var(--surface);
    margin-bottom: var(--spacing-sm);
}

.produkt-billede img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.produkt-info {
    padding: var(--spacing-sm);
}

/* Ingen billede placeholder */
.produkt-kort:not(:has(.produkt-billede)) .produkt-info {
    padding-top: var(--spacing-sm);
}

/* ============================================
   TOM TILSTAND KORT
   ============================================ */

.ingen-butikker,
.tom-liste {
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--surface);
    border-radius: var(--border-radius);
}

.ingen-butikker p,
.tom-liste p {
    margin-bottom: var(--spacing-sm);
    color: var(--mørk-grå);
}

.ingen-butikker a {
    color: var(--sekundær);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .butik-kort img,
    .butik-kort .butik-logo img {
        height: 150px;
    }

    .produkt-card img,
    .produkt-billede {
        height: 150px;
    }
}