/* ==========================================================
   AVAILABILITY.CSS
   Fradesign Global
   ========================================================== */

/* ==========================================================
   AVAILABILITY SECTION
   ========================================================== */

.avail {
    position: relative;

    overflow: hidden;

    padding: var(--space-4xl);

    color: var(--color-white);

    background: var(--color-text);

    border-radius: var(--radius-xl);
}

/* ==========================================================
   DECORATIVE BACKGROUND
   ========================================================== */

.avail::before {
    content: "";

    position: absolute;

    top: -140px;
    right: -140px;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    background: rgba(31, 111, 92, .22);

    pointer-events: none;
}

.avail::after {
    content: "";

    position: absolute;

    bottom: -180px;
    left: -180px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .04);

    pointer-events: none;
}

/* ==========================================================
   CONTENT
   ========================================================== */

.avail > * {
    position: relative;

    z-index: 1;
}

.avail .eyebrow {
    color: var(--color-primary);
}

.avail h2 {
    max-width: 720px;

    margin-bottom: var(--space-lg);

    color: var(--color-white);
}

.avail .sub {
    max-width: 720px;

    margin-bottom: var(--space-2xl);

    color: rgba(255, 255, 255, .72);

    font-size: var(--font-size-lg);
}

/* ==========================================================
   AVAILABILITY GRID
   ========================================================== */

.avail-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--space-lg);
}

/* ==========================================================
   AVAILABILITY CARD
   ========================================================== */

.avail-card {
    padding: var(--space-xl);

    text-align: center;

    background: rgba(255, 255, 255, .05);

    border: 1px solid rgba(255, 255, 255, .14);

    border-radius: var(--radius-lg);

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.avail-card:hover {
    transform: translateY(-4px);

    background: rgba(255, 255, 255, .08);

    border-color: rgba(255, 255, 255, .28);
}

.avail-card strong {
    display: block;

    margin-bottom: var(--space-xs);

    color: var(--color-white);

    font-size: var(--font-size-3xl);
    line-height: var(--line-height-tight);
}

.avail-card span {
    display: block;

    color: rgba(255, 255, 255, .66);

    font-size: var(--font-size-sm);
}

/* ==========================================================
   NOTE
   ========================================================== */

.avail-note {
    margin-top: var(--space-xl);

    color: rgba(255, 255, 255, .62);

    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* ==========================================================
   AVAILABILITY CTA
   ========================================================== */

.avail-actions {
    display: flex;

    align-items: center;

    gap: var(--space-md);

    margin-top: var(--space-2xl);

    flex-wrap: wrap;
}

.avail .btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.avail .btn-primary:hover {
    background: var(--color-primary-hover);
}

.avail .btn-outline {
    color: var(--color-white);

    border-color: rgba(255, 255, 255, .28);
}

.avail .btn-outline:hover {
    color: var(--color-text);

    background: var(--color-white);

    border-color: var(--color-white);
}

/* ==========================================================
   STATUS BADGE
   ========================================================== */

.avail-status {
    display: inline-flex;

    align-items: center;

    gap: var(--space-xs);

    margin-bottom: var(--space-lg);

    padding: 8px 14px;

    color: rgba(255, 255, 255, .86);

    background: rgba(255, 255, 255, .06);

    border: 1px solid rgba(255, 255, 255, .12);

    border-radius: var(--radius-pill);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.avail-status::before {
    content: "";

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--color-success);

    box-shadow: 0 0 0 4px rgba(30, 142, 90, .16);
}

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

@media (max-width: 900px) {

    .avail {
        padding: var(--space-3xl);
    }

    .avail-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .avail {
        padding: var(--space-2xl) var(--space-lg);

        border-radius: var(--radius-lg);
    }

    .avail h2 {
        font-size: var(--font-size-2xl);
    }

    .avail .sub {
        font-size: var(--font-size-md);
    }

    .avail-actions {
        flex-direction: column;

        align-items: stretch;
    }

}