/* =========================
   ABOUT SECTION
========================= */

.about {
    background: var(--color-alt);
    padding: 100px 0;
}

/* =========================
   LAYOUT (FIX REAL)
========================= */

.about-container {
    display: block;
    position: relative;
}

/* DECORATIVE CARD IMAGE — lives inside .about-content only, framed like the main photo,
   floated bottom-right within the text column, cleared before the checklist below */
.about-decor-wrap {
    float: right;
    width: 150px;
    margin: 0 0 20px 24px;
}

.about-decor-wrap img {
    width: 100%;
    height: auto;
    display: block;

    background: var(--color-alt);
    padding: 16px;
    border-radius: 18px;
    object-fit: contain;

    box-shadow: var(--shadow-md);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.about-decor-wrap img:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: var(--shadow-lg);
}

/* IMAGINE FLOAT */
.about-image {
    float: left;
    width: 420px;
    max-width: 45%;
    margin-right: 80px;
    margin-bottom: 20px;

    display: block;
}

/* IMAGE STYLE (PĂSTRAT DESIGNUL TĂU) */
.about-image img {
    width: 100%;
    height: auto;

    border-radius: 18px;
    object-fit: cover;

    box-shadow: var(--shadow-md);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.about-image img:hover {
    transform: translateY(-5px) scale(1.01);

    box-shadow: var(--shadow-lg);
}

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

.about-content {
    display: block;
}

.about-text {
    font-size: 1.05rem;
    line-height: 1.8;

    color: var(--color-text);

    text-align: justify;

    margin-bottom: 18px;
}

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

/* =========================
   HIGHLIGHTS
========================= */

.about-highlights {
    list-style: none;

    clear: both;

    margin: 24px 0 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about-highlights li {
    position: relative;

    padding-left: 28px;

    font-size: 1rem;
    font-weight: 500;

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

.about-highlights li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    color: var(--color-primary);
    font-weight: 700;
}

/* =========================
   CLEAR FIX (CRITICAL)
========================= */

.about-container::after {
    content: "";
    display: block;
    clear: both;
}

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

@media (max-width: 992px) {

    .about-image {
        float: none;
        width: 100%;
        max-width: 380px;
        margin: 0 auto 40px;
    }

    .about-image img {
        max-width: 100%;
    }

    .about-decor-wrap {
        width: 110px;
        margin: 0 0 14px 16px;
    }
}

@media (max-width: 576px) {

    .about-image img {
        max-width: 100%;
    }

    /* Below this width, floating a 110px image squeezes text into an
       awkward narrow column — switch to a centered block image instead */
    .about-decor-wrap {
        float: none;
        display: block;
        width: 150px;
        margin: 24px auto;
    }
}