/* ==========================================================================
   Velento — About page (redesign). Builds on home.css (.vl-* tokens, buttons,
   headings), which loads site-wide.
   ========================================================================== */

.vl-about .vl-section { padding: 52px 0; }
.vl-about .vl-section > .vl-wrap > .vl-heading { display: flex; width: fit-content; margin: 0 auto 44px; }

/* ---------- Intro ---------- */
.vl-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vl-main .vl-about-h {
    margin: 0 0 22px !important;
    font-size: clamp(26px, 3vw, 34px) !important; line-height: 1.6 !important; font-weight: 800 !important;
    color: var(--vl-text);
}
.vl-about-h em { font-style: normal; color: var(--vl-gold); }
.vl-main .vl-about-text, .vl-about-text p { font-size: 15.5px !important; line-height: 2.3 !important; text-align: justify; color: var(--vl-text); opacity: .86; margin: 0 0 1em; }
.vl-about-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.vl-about-media { position: relative; aspect-ratio: 520 / 408; border-radius: 44px; overflow: hidden; background: #111; box-shadow: var(--vl-shadow); }
.vl-about-media > img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }

/* ---------- Contact ---------- */
.vl-contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; align-items: stretch; }
.vl-contact-info, .vl-contact-form-card {
    padding: 26px; border: 1px solid var(--vl-line); border-radius: 32px;
    background: var(--vl-surface); box-shadow: var(--vl-shadow);
}
.vl-contact-info ul { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.vl-contact-info li {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
    padding: 14px 16px; border: 1px solid var(--vl-line); border-radius: 18px; background: var(--vl-surface);
}
.vl-ci-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; background: var(--vl-cream); color: var(--vl-gold);
}
.vl-ci-label { font-size: 15px; font-weight: 700; }
.vl-ci-value { font-size: 17px; font-weight: 700; font-style: normal; color: var(--vl-text) !important; text-align: left; }
a.vl-ci-value:hover { color: var(--vl-gold) !important; }
.vl-contact-info li.vl-ci-address { grid-template-columns: auto 1fr; }
.vl-ci-address .vl-ci-value { grid-column: 1 / -1; font-size: 14.5px; font-weight: 500; line-height: 2; text-align: start; color: var(--vl-muted) !important; }

.vl-map { height: 230px; border-radius: 20px; overflow: hidden; background: var(--vl-soft); }
.vl-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.vl-map-fallback {
    height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,194,31,.35) 0 38px, transparent 39px),
        repeating-linear-gradient(35deg, transparent 0 46px, rgba(0,0,0,.05) 46px 48px),
        repeating-linear-gradient(-55deg, transparent 0 58px, rgba(0,0,0,.05) 58px 60px),
        var(--vl-soft);
    color: var(--vl-text);
}
.vl-map-pin { color: var(--vl-yellow); filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.vl-map-cta { padding: 8px 20px; border-radius: 999px; background: var(--vl-surface); font-size: 14px; font-weight: 700; box-shadow: var(--vl-shadow-sm); }

.vl-main .vl-cf-title {
    margin: 0 !important; display: flex; align-items: center; gap: 10px;
    font-size: 17px !important; line-height: 1.6 !important; font-weight: 800 !important;
}
.vl-cf-title svg { color: var(--vl-gold); }
.vl-cf-sub { margin: 4px 0 22px !important; font-size: 14px !important; color: var(--vl-muted); }
.vl-form { display: flex; flex-direction: column; gap: 16px; }
.vl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vl-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
.vl-field input, .vl-field textarea {
    width: 100%; padding: 14px 16px; border: 1.5px solid var(--vl-line); border-radius: 16px;
    background: var(--vl-soft); color: var(--vl-text);
    font: inherit; font-size: 14px; font-weight: 400;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.vl-field textarea { resize: vertical; min-height: 150px; }
.vl-field input::placeholder, .vl-field textarea::placeholder { color: #A8A8A8; }
.vl-field input:focus, .vl-field textarea:focus {
    outline: none; border-color: var(--vl-yellow); background: var(--vl-surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--vl-yellow) 25%, transparent);
}
.vl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vl-form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vl-submit {
    display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 34px;
    border: 0; border-radius: 16px; background: var(--vl-gold); color: #fff;
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    transition: transform .25s ease, filter .25s ease, opacity .25s ease;
}
.vl-submit:hover { transform: translateY(-2px); filter: brightness(1.06); }
.vl-submit:disabled { opacity: .6; cursor: wait; transform: none; }
.vl-main .vl-form-status { margin: 0 !important; font-size: 14px !important; font-weight: 600; }
.vl-form-status.is-ok { color: #1F8A4C; }
.vl-form-status.is-err { color: #C62828; }

/* ---------- Social ---------- */
.vl-social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.vl-social-card {
    position: relative; display: flex; flex-direction: column; gap: 22px;
    padding: 22px 22px 22px; border: 1px solid var(--vl-line); border-radius: 30px;
    background: var(--vl-surface); box-shadow: 0 8px 26px rgba(20,20,20,.04);
    overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.vl-social-card::before { content: ""; position: absolute; top: 20px; left: 22px; right: 22px; height: 2px; background: var(--vl-line); border-radius: 2px; }
.vl-social-top { display: flex; align-items: center; gap: 14px; padding-top: 22px; }
.vl-social-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; color: #fff; flex: none; }
.is-whatsapp .vl-social-ico { background: #25D366; }
.is-instagram .vl-social-ico { background: linear-gradient(135deg, #FEDA75, #FA7E1E 35%, #D62976 65%, #962FBF); }
.is-telegram .vl-social-ico { background: #2A9BE0; }
.is-x .vl-social-ico { background: #000; color: #fff; }
.vl-main .vl-social-name { margin: 0 !important; font-size: 17px !important; line-height: 1.5 !important; font-weight: 800 !important; }
.vl-social-id { display: block; font-size: 13.5px; color: var(--vl-muted); text-align: right; }
.vl-social-join {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; border-radius: 14px; background: var(--vl-soft);
    font-size: 15px; font-weight: 700; transition: background .25s ease, color .25s ease;
}
.is-whatsapp .vl-social-join { color: #1DA851; }
.is-instagram .vl-social-join { color: #D62976; }
.is-telegram .vl-social-join { color: #2A9BE0; }
.is-x .vl-social-join { color: var(--vl-text); }
.vl-social-join.is-disabled { opacity: .55; }
.vl-social-card:hover, .vl-social-card:focus-within { transform: translateY(-4px); box-shadow: var(--vl-shadow); }
.is-instagram:hover, .is-instagram:focus-within { background: linear-gradient(160deg, #F7993A, #E0376E 70%, #C42A8A); border-color: transparent; color: #fff; }
.is-instagram:hover::before { background: rgba(255,255,255,.75); }
.is-instagram:hover .vl-social-id { color: rgba(255,255,255,.8); }
.is-instagram:hover .vl-social-ico { background: #fff; color: #D62976; }
.is-instagram:hover .vl-social-join { background: #fff; color: #E0376E; }
.is-whatsapp:hover .vl-social-join { background: #25D366; color: #fff; }
.is-telegram:hover .vl-social-join { background: #2A9BE0; color: #fff; }
.is-x:hover .vl-social-join { background: #000; color: #fff; }

/* ---------- Key values ---------- */
.vl-values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vl-values-media { aspect-ratio: 628 / 408; border-radius: 44px; overflow: hidden; background: #111; box-shadow: var(--vl-shadow); }
.vl-values-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .vl-about-grid, .vl-values-grid { grid-template-columns: 1fr; gap: 32px; }
    .vl-about-media { order: -1; }
    .vl-contact-grid { grid-template-columns: 1fr; }
    .vl-social-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .vl-form-row { grid-template-columns: 1fr; }
    .vl-contact-info, .vl-contact-form-card { padding: 18px; border-radius: 26px; }
    .vl-contact-info li { grid-template-columns: auto 1fr; }
    .vl-contact-info li .vl-ci-value { grid-column: 1 / -1; text-align: start; }
    .vl-social-grid { grid-template-columns: 1fr; }
}

/* breathing room before the footer (the footer no longer adds its own top margin) */
.vl-about .vl-values { padding-bottom: 110px; }