/* ==========================================================================
   REFERENCES
   Testimonial cards showing 2-3 strongest references.
   Mobile: stacked vertically. Desktop: side by side.
   ========================================================================== */

/* Section: light pink background, centered headings */
.references {
    background-color: var(--color-pink-light);
    padding: var(--space-lg) var(--space-sm);
    text-align: center;
}

/* Title: space below */
.references__title {
    margin-bottom: var(--space-xs);
}

/* Subtitle: space below before cards */
.references__subtitle {
    margin-bottom: var(--space-lg);
}

/* Cards container: vertical stack on mobile, gap between cards */
.references__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Single card: pink background, left-aligned text */
.references__card {
    background-color: var(--color-pink-medium);
    padding: var(--space-sm);
    text-align: left;
    position: relative;
}


/* Card header: avatar and name/role side by side */
.references__header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

/* Decorative accent line between text and author info */
.references__info::before {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--color-pink-accent);
    margin-bottom: var(--space-xs);
}

/* Name and role stacked vertically, below the text */
.references__info {
    display: flex;
    flex-direction: column;
}

/* Name: bold */
.references__name {
    font-weight: 700;
    font-size: var(--text-body-small);
}

/* Role: smaller text */
.references__role {
    font-size: var(--text-caption);
}

/* Review text: smaller body font */
.references__text {
    font-size: var(--text-body-small);
    font-weight: 400;
    line-height: var(--lh-body);
}

/* Single card: pink background, left-aligned text */
/* Flex column so name/role can be pushed to the bottom */
.references__card {
    background-color: var(--color-pink-medium);
    padding: var(--space-sm);
    text-align: left;
    display: flex;
    flex-direction: column;
}

/* Decorative closing quote mark in bottom-right corner */
.references__card::after {
    content: "\201D";  /* typografická zatváracia úvodzovka " */
    position: absolute;
    bottom: -2.8rem;
    right: 1rem;
    font-family: var(--font-heading);
    font-size: 6rem;
    line-height: 1;
    color: var(--color-pink-accent);
    pointer-events: none;
}

/* Review text: smaller body font */
/* flex-grow pushes the info block to the bottom */
.references__text {
    font-size: var(--text-body-small);
    font-weight: 400;
    line-height: var(--lh-body);
    flex-grow: 1;
}

/* Bold highlight inside review text */
.references__text strong {
    font-weight: 700;
}


/* ==========================================================================
   DESKTOP (768px+): cards side by side
   ========================================================================== */

@media (min-width: 768px) {
    .references {
        padding: var(--space-2xl);
    }

    /* Cards: horizontal row */
    .references__cards {
        flex-direction: row;
        max-width: var(--max-width);
        margin: 0 auto;
    }

    /* Each card takes equal width */
    .references__card {
        flex: 1;
    }
}