/**
 * AlloDentiste Dual Photo Feature Widget – Stylesheet
 */

/* ============================================================
   Outer wrapper
   ============================================================ */
.allo-dual-photo-feature-widget {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px var(--allo-gutter);
    box-sizing: border-box;
}

/* ============================================================
   Three-column inner layout — staircase / cascade alignment:
   left photo sits high, content centres, right photo sits low
   ============================================================ */
.dpf-inner {
    display: flex;
    align-items: flex-start; /* all columns start at the top, offsets do the staircase */
    gap: 40px;
}

/* ============================================================
   Photo columns
   ============================================================ */
.dpf-photo-col {
    flex-shrink: 0;
    width: 22%; /* overridden by Elementor control */
}

/* Left photo: no offset — sits HIGH (at the top) */
.dpf-photo-left {
    margin-top: 0;
}

/* Right photo: pushed down — sits LOW */
.dpf-photo-right {
    margin-top: 120px;
}

.dpf-photo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 16px; /* overridden by Elementor control */
    object-fit: cover;
}

/* ============================================================
   Content column — centre, takes remaining space
   Pushed down halfway between left and right to create staircase
   ============================================================ */
.dpf-content-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 60px; /* sits at the MIDDLE level of the staircase */
    gap: 0;
}

/* ============================================================
   Label
   ============================================================ */
.dpf-label {
    display: block;
    font-size: 0.9375rem;
    font-style: italic;
    font-weight: 400;
    color: #666666;
    letter-spacing: 0.02em;
    margin: 0 0 14px;
    line-height: 1.4;
}

/* ============================================================
   Heading
   ============================================================ */
.dpf-heading {
    margin: 0 0 20px;
    font-size: 52px; /* overridden by Elementor control */
    font-weight: 700;
    color: #1A1A1A;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* ============================================================
   Teal divider
   ============================================================ */
.dpf-divider {
    display: block;
    width: 60px;
    height: 3px;
    background-color: #00A1AD;
    border: none;
    margin: 0 0 24px;
    padding: 0;
    flex-shrink: 0;
}

/* ============================================================
   Body text
   ============================================================ */
.dpf-body {
    margin: 0;
}

.dpf-body p {
    margin: 0 0 0.75em;
    font-size: 0.9375rem;
    color: #444444;
    line-height: 1.7;
}

.dpf-body p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Responsive — tablet
   ============================================================ */
@media (max-width: 1024px) {
    .dpf-inner {
        gap: 28px;
    }

    .dpf-photo-col {
        width: 20%;
    }

    .dpf-heading {
        font-size: 40px;
    }
}

/* ============================================================
   Responsive — mobile
   ============================================================ */
@media (max-width: 768px) {
    .allo-dual-photo-feature-widget {
        padding: 40px var(--allo-gutter);
    }

    .dpf-inner {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }

    /* Reset staircase offsets */
    .dpf-content-col,
    .dpf-photo-right {
        margin-top: 0 !important;
    }

    /* Both photos sit side by side in their own row */
    .dpf-photo-left,
    .dpf-photo-right {
        display: block;
        width: calc(50% - 8px);
        order: 1;
        flex-shrink: 0;
    }

    /* Content forced onto its own row below the photos */
    .dpf-content-col {
        flex-basis: 100%; /* breaks onto a new line */
        width: 100%;
        order: 2;
    }

    /* !important needed to override Elementor's inline font-size style */
    .dpf-heading {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    }
}

@media (max-width: 480px) {
    .dpf-heading {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }
}