/*
 * Commitment cards - Figma 1:2932 (desktop) / 1:1617 (mobile).
 *
 * Three White 100 cards in a row at desktop, stacked at mobile. Inside a card
 * the frame puts 90 between the ornament and the text, which is what gives the
 * cards their height - so it is a real gap rather than space-between, and a
 * fourth card would sit the same.
 */

.commitment-cards {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 40 between the heading and the row. */
    gap: 40px;
    padding: var(--spacing-large) var(--spacing-small);
}

.commitment-cards-heading {
    /* 442 in the frame. */
    max-width: 442px;
}

/*
 * A row divided by however many cards there are - Hotel Management's frame has
 * three at 442 and Home and Villas' has four at 326, and both are just the
 * container split evenly. Flex does that without the count having to reach CSS.
 */
.commitment-cards-grid {
    display: flex;
    gap: 24px;
    width: 100%;
}

.commitment-cards-grid > .commitment-card {
    flex: 1 1 0;
    min-width: 0;
}

.commitment-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /*
     * The frame's 90 between ornament and text sets the card height, and it
     * keeps that 90 when the cards stack - its mobile cards are 243 tall, which
     * only works at the full gap. So this is not reduced at mobile.
     */
    gap: 90px;
    padding: 24px;
    background: var(--color-white-100);
}

.commitment-card-icon {
    display: block;
    height: 40px;
    width: 40px;
}

.commitment-card-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.commitment-card-title {
    font-family: var(--font-primary);
    /* Lyon Bold 28 - the family has a real 700, so this is not a faked weight. */
    font-size: clamp(22px, 1.945vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-shark);
    margin: 0;
}

.commitment-card-line {
    font-family: var(--font-secondary);
    font-size: 16px;
    /*
     * Geologica Light. The variable face covers 100-900, so the 200 that stood
     * here rendered as a real ExtraLight - and the frame's lightest Geologica
     * anywhere is Light (Body Lg and Body md are both 300).
     */
    font-weight: 300;
    line-height: 1.3;
    color: var(--color-shark);
    margin: 0;
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .commitment-cards-grid {
        flex-direction: column;
    }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {
    .commitment-cards {
        /* 72 / 16 in the mobile frame. */
        padding: 72px 16px;
    }

    .commitment-cards-heading {
        max-width: none;
    }
}