/**
 * Reusable Koala components approved for Phase 1.
 *
 * Component classes use the `koala-` prefix and BEM-style modifiers. Only
 * approved default visual states are defined; browser focus and interaction
 * feedback remain intact.
 */

.koala-container {
    margin-inline: auto;
    max-width: var(--koala-grid-desktop-viewport);
    padding-inline: var(--koala-grid-mobile-margin);
    width: 100%;
}

.koala-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--koala-radius-medium);
    box-shadow: var(--koala-elevation-none);
    display: inline-flex;
    font-family: var(--koala-typography-body-default-font-family);
    font-size: var(--koala-typography-body-default-font-size);
    font-weight: var(--koala-typography-body-default-font-weight);
    justify-content: center;
    letter-spacing: var(--koala-typography-body-default-letter-spacing);
    line-height: var(--koala-typography-body-default-line-height);
    padding: var(--koala-space-3) var(--koala-space-4);
    text-align: center;
    text-decoration: none;
}

button.koala-button {
    cursor: pointer;
}

.koala-button:hover {
    text-decoration: none;
}

.koala-button--primary {
    background-color: var(--koala-color-brand-primary);
    color: var(--koala-color-text-inverse);
}

.koala-button--primary:hover,
.koala-button--primary:active,
.koala-button--primary:visited {
    color: var(--koala-color-text-inverse);
}

.koala-button--secondary {
    background-color: var(--koala-color-surface-primary);
    border-color: var(--koala-color-border-strong);
    color: var(--koala-color-text-primary);
}

.koala-button--secondary:hover,
.koala-button--secondary:active,
.koala-button--secondary:visited {
    color: var(--koala-color-text-primary);
}

.koala-category-card,
.koala-product-card {
    background-color: var(--koala-color-surface-primary);
    border: 1px solid var(--koala-color-border-default);
    border-radius: var(--koala-radius-large);
    box-shadow: var(--koala-elevation-raised);
    color: var(--koala-color-text-primary);
    display: flex;
    flex-direction: column;
    gap: var(--koala-space-3);
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

a.koala-category-card,
a.koala-product-card {
    text-decoration: none;
}

a.koala-category-card:hover,
a.koala-category-card:active,
a.koala-category-card:visited,
a.koala-product-card:hover,
a.koala-product-card:active,
a.koala-product-card:visited {
    color: var(--koala-color-text-primary);
    text-decoration: none;
}

.koala-category-card__media,
.koala-product-card__media {
    aspect-ratio: var(--koala-media-aspect-ratio);
    background-color: var(--koala-color-surface-tertiary);
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.koala-category-card__media {
    --koala-media-aspect-ratio: 4 / 3;
}

.koala-product-card__media {
    --koala-media-aspect-ratio: 1 / 1;
}

.koala-category-card__media img,
.koala-product-card__media img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    width: 100%;
}

.koala-category-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--koala-space-2);
    padding: var(--koala-space-4);
}

.koala-category-card__name,
.koala-product-card__title {
    color: var(--koala-color-text-primary);
    font-family: var(--koala-typography-h4-font-family);
    font-size: var(--koala-typography-h4-font-size);
    font-weight: var(--koala-typography-h4-font-weight);
    letter-spacing: var(--koala-typography-h4-letter-spacing);
    line-height: var(--koala-typography-h4-line-height);
    margin: 0;
    overflow-wrap: anywhere;
}

.koala-category-card__supporting-text,
.koala-product-card__subtitle,
.koala-product-card__price,
.koala-product-card__metadata {
    margin: 0;
    overflow-wrap: anywhere;
}

.koala-category-card__supporting-text,
.koala-product-card__subtitle {
    color: var(--koala-color-text-secondary);
    font-family: var(--koala-typography-body-default-font-family);
    font-size: var(--koala-typography-body-default-font-size);
    font-weight: var(--koala-typography-body-default-font-weight);
    letter-spacing: var(--koala-typography-body-default-letter-spacing);
    line-height: var(--koala-typography-body-default-line-height);
}

.koala-product-card {
    height: 100%;
}

.koala-product-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--koala-space-2);
    min-width: 0;
    padding: var(--koala-space-4);
}

.koala-product-card__information,
.koala-product-card__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--koala-space-2);
}

.koala-product-card__subtitle-row,
.koala-product-card__price-row {
    min-height: var(--koala-typography-body-default-line-height);
}

.koala-product-card__price {
    color: var(--koala-color-text-primary);
    font-family: var(--koala-typography-body-default-font-family);
    font-size: var(--koala-typography-body-default-font-size);
    font-weight: var(--koala-typography-body-default-font-weight);
    letter-spacing: var(--koala-typography-body-default-letter-spacing);
    line-height: var(--koala-typography-body-default-line-height);
}

.koala-product-card__spacer {
    flex: 1 1 auto;
    min-height: 0;
}

.koala-product-card__metadata-row {
    min-height: var(--koala-typography-caption-line-height);
}

.koala-product-card__metadata {
    color: var(--koala-color-text-secondary);
    font-family: var(--koala-typography-caption-font-family);
    font-size: var(--koala-typography-caption-font-size);
    font-weight: var(--koala-typography-caption-font-weight);
    letter-spacing: var(--koala-typography-caption-letter-spacing);
    line-height: var(--koala-typography-caption-line-height);
}

.koala-product-card__action-reservation {
    min-height: var(--koala-space-12);
}

@media (min-width: 48rem) {
    .koala-container {
        padding-inline: var(--koala-grid-tablet-margin);
    }
}

@media (min-width: 90rem) {
    .koala-container {
        padding-inline: var(--koala-grid-desktop-margin);
    }
}