/* Home: four quick actions between the header and the hero (partials/quick-actions).
   Same colour scheme as the site's gold buttons (.button in site.css). */

.quick-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding-block: 44px
}

.quick-action {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 100px;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 22px;
    background: linear-gradient(135deg, var(--gold-3), var(--gold));
    box-shadow: 0 18px 38px -16px rgba(138, 95, 28, .8);
    color: #fdfbf6;
    text-decoration: none;
    transition: transform .3s var(--ease), box-shadow .3s ease, filter .3s ease
}

/* Soft sheen that sweeps across on hover */
.quick-action::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
    background-size: 220% 100%;
    background-position: 120% 0;
    pointer-events: none;
    transition: background-position .8s var(--ease)
}

a.quick-action:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 46px -16px rgba(138, 95, 28, .85);
    filter: brightness(1.05);
    color: #fff
}

a.quick-action:hover::after {
    background-position: -20% 0
}

a.quick-action:focus-visible {
    outline: 3px solid var(--maroon);
    outline-offset: 3px
}

.quick-action-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 16px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .3s var(--ease), background .3s ease
}

a.quick-action:hover .quick-action-icon {
    transform: scale(1.07) rotate(-3deg);
    background: rgba(255, 255, 255, .26)
}

.quick-action-text {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0
}

.quick-action-text strong {
    color: #fff;
    font: 700 23px/1.2 var(--serif);
    letter-spacing: .005em;
    text-shadow: 0 1px 2px rgba(91, 50, 10, .3)
}

/* Third card until its delivery-partner link is set in Website settings */
.quick-action.is-pending {
    cursor: default
}

@media (max-width: 1240px) {
    .quick-action-icon {
        width: 50px;
        height: 50px;
        border-radius: 14px
    }

    .quick-action-text strong {
        font-size: 21px
    }
}

@media (max-width: 1100px) {
    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px
    }

    .quick-action {
        gap: 14px;
        padding: 18px
    }

    .quick-action-text strong {
        font-size: 21px
    }
}

@media (max-width: 900px) {
    .quick-actions {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-block: 24px 28px
    }

    .quick-action {
        min-height: 0;
        padding: 15px 18px;
        border-radius: 18px
    }

    .quick-action-icon {
        width: 50px;
        height: 50px;
        border-radius: 14px
    }

    .quick-action-text strong {
        font-size: 22px
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-action,
    .quick-action-icon,
    .quick-action::after {
        transition: none
    }

    a.quick-action:hover,
    a.quick-action:hover .quick-action-icon {
        transform: none
    }
}