/* ============================================================
   ABOUT.CSS — За Нас page
   Source: Figma node 369:50 · 1440px frame
   Shares tokens.css + base.css (loaded via base.html)
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   PAGE HERO HEADER  (node 529:403)
   Red gradient bar + "ЗА НАС" uppercase title
   Figma: bar 283×83px at left, text 56px SemiBold UPPERCASE
   ════════════════════════════════════════════════════════════ */
.about-hero {
    background: #f8f8f8;
    padding-top: 124px; /* clear the sticky nav */
    padding-bottom: 60px;
}

/* Flex row: [red bar 283×83] [title text] — matches Figma node 529:403 */
.about-hero__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding-top: 60px;
}

/* Red gradient block — static, not absolute */
.about-hero__bar {
    flex-shrink: 0;
    width: 283px;
    height: 83px;
    background: var(--g-primary);
}

/* Title — Montserrat SemiBold 56px uppercase, dark text on bg */
.about-hero__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 56px;
    line-height: 1;
    color: var(--c-text-dark);
    text-transform: uppercase;
    white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════
   ABOUT SECTION BASE  (shared by "Кои сме ние" + "Как работим")
   ════════════════════════════════════════════════════════════ */
.about-section {
    background: #f8f8f8;
    padding-top: 60px;
    padding-bottom: 80px;
}

.about-section--light {
    background: #fff;
}

/* ══════════════════════════════════════════════════════════
   WHO WE ARE — Two-column grid
   LEFT:  accent-bar · h2 · subtitle
   RIGHT: [about-values] stacked above [about-section__body]
   ══════════════════════════════════════════════════════════ */
.about-section__layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ── LEFT COLUMN ── left-aligned */
.about-section__left {
    align-self: flex-start;
    max-width: 480px;
}

.about-section__left .section-title {
    font-size: clamp(32px, 3.5vw, 56px);
    line-height: 1.1;
    margin-bottom: 16px;
}

.about-section__sub {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.5;
    color: var(--c-text-body);
    margin-top: 8px;
}

/* ── RIGHT COLUMN ── pushed to the right side */
.about-section__right {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-self: flex-end;
    max-width: 700px;
    width: 100%;
}

/* CONTAINER 1 — Icons row */
.about-values {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
}

.about-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.about-value__icon {
    width: clamp(180px, 4vw, 56px);
    height: clamp(80px, 4vw, 56px);
    object-fit: contain;
    display: block;
}

.about-value__label {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: clamp(14px, 1.4vw, 18px);
    color: var(--c-text-body);
    text-align: center;
}

/* CONTAINER 2 — Text paragraphs */
.about-section__body {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
    align-self: flex-start;
    width: 100%;
}

.about-section__body p {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(16px, 1.8vw, 24px);
    line-height: 1.55;
    color: var(--c-text-body);
    margin-bottom: 28px;
}

.about-section__body p:last-child {
    margin-bottom: 0;
}


/* ════════════════════════════════════════════════════════════
   STATS BAND  (nodes 369:201–369:203)
   White bg · 3 giant gradient numbers
   Numbers: Montserrat Regular 140px gradient fill
   Labels:  Montserrat SemiBold 24px gradient fill
   ════════════════════════════════════════════════════════════ */
.about-stats {
    background: #fff;
    padding-top: 60px;
    padding-bottom: 60px;
}

.about-stats__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: end;
}

/* Each stat: [big number] [icon stacked above label] as a flex row */
.about-stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

/* Giant gradient number — left side */
.about-stat__number {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 120px;
    line-height: 1;
    background: var(--g-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Right side: icon on top, label below — stacked column */
.about-stat__detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* Icon — SVG, gradient tinted via filter or use as-is */
.about-stat__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.about-stat__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Gradient label — below icon */
.about-stat__label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    background: var(--g-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.3;
    white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════
   CTA SECTION  (node 529:315)
   Photo bg + dark overlay + centered text + contact row
   ════════════════════════════════════════════════════════════ */
.about-cta {
    position: relative;
    min-height: 963px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden; /* no justify-content: contact-info anchors to bottom */
}

/* Building photo background */
.about-cta__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.about-cta__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

/* Dark gradient overlay — EXACT Figma node 458:143 values
   transparent → rgba(28,27,23,0.2) at 39.423% → solid #1C1B17 at 72.35%
   Covers full section. No separate tint layer (not in Figma). */
.about-cta__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
    transparent 0%,
    rgba(28, 27, 23, 0.2) 39.423%,
    #1C1B17 72.35%);
    z-index: 1;
    pointer-events: none;
}

/* Content — accent bar + title + CTA
   flex: 1 pushes .contact-info to the bottom of the section */
.about-cta__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 200px var(--container-pad) 60px;
    width: 100%;
    max-width: var(--container-max);
    flex: 1;
}

.about-cta__content .accent-bar {
    margin-bottom: 19px;
}

/* "Готов ли си да се настаниш в своето място?" — 65px SemiBold white */
.about-cta__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 65px;
    line-height: 65px;
    color: var(--c-text-white);
    max-width: 1062px;
    margin-bottom: 40px;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* ── 1280px ── slight tighten */
@media (max-width: 1280px) {
    .about-section__layout {
        gap: 32px;
    }
}

/* ── 1024px ── */
@media (max-width: 1024px) {
    .about-section__layout {
        gap: 32px;
    }

    .about-stat__number {
        font-size: 90px;
    }

    .about-stat__label {
        font-size: 18px;
    }

    .about-stat__icon img {
        width: 26px;
        height: 26px;
    }

    .about-cta__title {
        font-size: 48px;
        line-height: 52px;
    }

    .about-hero__bar {
        width: 200px;
    }
}

/* ── 768px — stack all columns ── */
@media (max-width: 768px) {
    .about-hero {
        padding-top: 90px;
    }

    .about-hero__bar {
        width: 40%;
        height: 30px;
    }

    .about-hero__title {
        font-size: 36px;
    }

    .about-hero__inner {
        gap: 16px;
    }

    .about-section__layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about-section__right {
        gap: 32px;
    }

    .about-values {
        flex-wrap: wrap;
        gap: 24px;
        justify-content: flex-start;
    }

    .about-section__closing {
        font-size: 22px !important;
    }

    .about-stats__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about-stat__number {
        font-size: 80px;
    }

    .about-stat {
        gap: 16px;
    }

    .about-stat__label {
        font-size: 8px;
    }

    .about-cta__title {
        font-size: 32px;
        line-height: 38px;
    }

    .about-cta__content {
        padding-top: 120px;
    }
}

/* ── 480px ── */
@media (max-width: 480px) {
    .about-hero__title {
        font-size: 28px;
    }

    .about-stat__number {
        font-size: 64px;
    }

    .about-values {
        gap: 16px;
    }

    .about-value__icon {
        width: 40px;
        height: 40px;
    }
}

.about-section__closing {
    font-weight: bolder !important;
}