/* =========================================================
   Cards — shared card components
   ========================================================= */

/* Base card */
.card {
    border:           1px solid var(--color-border);
    border-radius:    var(--radius);
    padding:          20px;
    background:       var(--color-bg);
    display:          flex;
    flex-direction:   column;
    transition:       border-color 0.15s ease;
}

.card:hover {
    border-color: var(--color-primary);
}

.card__tag {
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--color-muted);
    margin-bottom:  var(--size-sm);
}

.card__title {
    font-size:     1rem;
    font-weight:   600;
    color:         var(--color-primary);
    margin-bottom: var(--size-sm);
    line-height:   1.4;
}

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

.card__title a:hover {
    text-decoration: underline;
}

.card__desc {
    font-size:   0.9rem;
    color:       var(--color-muted);
    line-height: 1.5;
    flex:        1;
    margin-bottom: var(--size-md);
}

.card__link {
    font-size:   0.875rem;
    font-weight: 500;
    color:       var(--color-primary);
    margin-top:  auto;
}

.card__link:hover {
    text-decoration: underline;
}

/* Guide card (list rows on archive) */
.card-guide-row {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--size-md);
    padding:       var(--size-lg) 0;
    border-bottom: 1px solid var(--color-border);
}

.card-guide-row:first-child {
    border-top: 1px solid var(--color-border);
}

.card-guide-row__body {
    flex: 1;
}

.card-guide-row__title {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--color-primary);
    margin-bottom: var(--size-xs);
}

.card-guide-row__title a {
    color:           inherit;
    text-decoration: none;
}

.card-guide-row__title a:hover {
    text-decoration: underline;
}

.card-guide-row__excerpt {
    font-size: 0.9rem;
    color:     var(--color-muted);
}

.card-guide-row__arrow {
    color:     var(--color-muted);
    font-size: 1.2rem;
    padding-top: 2px;
}

/* Setup card — same styling as .card */
.card-setup {
    border:           1px solid var(--color-border);
    border-radius:    var(--radius);
    padding:          20px;
    background:       var(--color-bg);
    display:          flex;
    flex-direction:   column;
    transition:       border-color 0.15s ease;
}

.card-setup:hover {
    border-color: var(--color-primary);
}

/* Device card — slightly tighter */
.card-device {
    border:         1px solid var(--color-border);
    border-radius:  var(--radius);
    padding:        20px;
    background:     var(--color-surface);
    display:        flex;
    flex-direction: column;
    transition:     border-color 0.15s ease;
}

.card-device:hover {
    border-color: var(--color-primary);
}

.card-device__title {
    font-size:     1rem;
    font-weight:   600;
    color:         var(--color-primary);
    margin-bottom: var(--size-sm);
}

.card-device__title a {
    color:           inherit;
    text-decoration: none;
}

.card-device__title a:hover {
    text-decoration: underline;
}

.card-device__desc {
    font-size:     0.875rem;
    color:         var(--color-muted);
    flex:          1;
    margin-bottom: var(--size-md);
}

.card-device__link {
    font-size:  0.875rem;
    font-weight: 500;
    color:      var(--color-primary);
}

/* Product link row inside single-device */
.product-link-row {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    padding:       var(--size-md);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: var(--size-sm);
}

.product-link-row__name {
    font-size:   0.9rem;
    font-weight: 500;
    color:       var(--color-text);
}

.product-link-row__type {
    font-size: 0.75rem;
    color:     var(--color-muted);
}

.product-link-row__cta {
    font-size:     0.875rem;
    font-weight:   600;
    color:         white;
    background:    var(--color-primary);
    padding:       6px 14px;
    border-radius: var(--radius);
    white-space:   nowrap;
}

.product-link-row__cta:hover {
    opacity:         0.85;
    text-decoration: none;
}