/**
 * Homepage (Localized) — EN / RU / AR one-pager.
 *
 * Composed from blocks reused off other templates (hero, tier grid, form
 * band). The shared chrome (hero, tier-card, form-band, section heading)
 * comes from the global + section stylesheets; this file owns the bits
 * that otherwise live in front-page.css (quick actions) plus the contact
 * ("Looking for help?") section that's unique to this template.
 */

/* Quick actions — circular icon links, evenly spread (mirrors the HE home). */
.quick-actions {
    display: flex;
    gap: 16px;
    text-align: center;
    justify-content: space-between;
    align-items: flex-start;
}

.quick-actions > * {
    flex: 1;
    min-width: 0;
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: var(--color-text-heading);
    text-decoration: none;
}

.quick-action__circle {
    width: 157px;
    height: 157px;
    border-radius: 50%;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.quick-action__icon {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.quick-action__label {
    font-family: 'Rubik', sans-serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 25px;
    color: var(--color-text-heading);
}

/* Contact section — same circles as quick actions, but each item is a
   wrapper so the "abroad" item can stack a note + tel link under the label. */
.contact-action {
    justify-content: flex-start;
}

/* Centred contact row with capped item width. Compound selectors so these
   hold over the generic ≤1024 quick-actions rules (and still yield to the
   ≤560 one-per-row rule below). */
.quick-actions.contact-actions {
    justify-content: center;
    gap: 40px;
}

.quick-actions.contact-actions > .quick-action {
    max-width: 250px;
}

.quick-action.contact-action .quick-action__circle {
    width: 120px;
    height: 120px;
}

.quick-action.contact-action .quick-action__icon {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.contact-action__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: var(--color-text-heading);
    text-decoration: none;
}

.contact-action__note {
    font-size: 14px;
    line-height: 18px;
    color: var(--color-text-heading);
}

.contact-action__phone {
    font-weight: 500;
    color: var(--color-text-heading);
    text-decoration: none;
    direction: ltr;
}

/* Self actions: 3 per row (2 rows of 3) from ≤1024px. An explicit flex-basis
   is required — `.quick-actions > * { flex: 1 }` sets basis 0, which keeps every
   item on a single row instead of wrapping. */
@media (max-width: 1024px) {
    .quick-actions {
        flex-wrap: wrap;
        gap: 24px 12px;
        justify-content: center;
    }

    .quick-actions > .quick-action {
        flex: 0 0 calc((100% - 24px) / 3);
        max-width: calc((100% - 24px) / 3);
    }

    .quick-action {
        gap: 12px;
    }

    .quick-action__circle {
        width: 80px;
        height: 80px;
    }

    .quick-action__label {
        font-size: 18px;
    }
}

/* Contact section: one item per row on small screens. */
@media (max-width: 560px) {
    .quick-actions.contact-actions > .quick-action {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Form band on LTR (EN/RU): mirror the banner image to the right edge and
   pad the content so it clears the image. AR stays RTL (form-band.css). */
html:not([dir="rtl"]) .form-band__bg {
    transform: scaleX(-1);
}

html:not([dir="rtl"]) .form-band__form input[type="tel"] {
    text-align: left;
}

@media (min-width: 1025px) {
    html:not([dir="rtl"]) .form-band__content {
        padding: 40px 320px 40px 48px;
    }
}