/* =========================================================================
   Home page overrides — loaded last on home/index so these rules win over
   style.css / fa.css / rtl.css.

   1. Hero CTAs ("تماس بگیرید" / "خرید API") always sit side by side, from
      27" monitors down to 375px phones.
   2. Mobile type scale for every home section. The theme sizes are tuned for
      Latin display fonts; with Yekan Bakh they read far too large on phones
      (48–80px headings, some with a line-height smaller than the font size).
   3. Mobile vertical rhythm. The theme's desktop spacing (100vh blocks, a
      280px gap reserved for the hero big text, a pinned CTA zoom, stacked
      margins + paddings) left screen-tall empty gaps between sections on
      phones. Sections now sit on a consistent ~48–60px rhythm.
   4. Clients section. The Persian heading needs a real line-height (the
      theme's 0.9 makes Yekan Bakh lines collide), and the logo capsules
      shrink down to 85×30px while images / names kept fixed desktop sizes
      and spilled out of them.
   ========================================================================= */

/* ------------------------------ 1. Hero CTAs ---------------------------- */
.home-hero-area.hero-area-5 .section-content .btn-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
}

.home-hero-area.hero-area-5 .section-content .btn-wrapper .rr-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
}

/* With a hero video the text column is only 425–715px wide, too narrow for
   text + both CTAs on one row: stack text above buttons (as on tablets). */
@media only screen and (min-width: 1200px) {
    .home-hero-area.hero-area-5 .section-content-wrapper:not(.no-media) .text-btn-wrapper {
        grid-template-columns: 1fr;
    }

    .home-hero-area.hero-area-5 .section-content-wrapper:not(.no-media) .btn-wrapper {
        border-right: 0;
        margin: 0;
        padding: 0 0 38px;
    }
}

/* Single-column layout: the theme's LTR side border/indent only wastes width. */
@media only screen and (max-width: 1199px) {
    .home-hero-area.hero-area-5 .section-content .btn-wrapper {
        border-right: 0;
        margin-right: 0;
        padding-right: 0;
    }
}

@media only screen and (max-width: 575px) {
    .home-hero-area.hero-area-5 .section-content .btn-wrapper {
        gap: 10px;
    }

    .home-hero-area.hero-area-5 .section-content .btn-wrapper .rr-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 15px 16px;
        font-size: 15px;
    }
}

/* --------------------------- 2. Mobile typography ----------------------- */
@media only screen and (max-width: 991px) {
    body.body-digital-agency .home-hero-area.hero-area .section-title {
        font-size: 40px;
        line-height: 1.45;
        max-width: 100%;
    }

    body.body-digital-agency .about-area .section-title {
        font-size: 56px;
        line-height: 1.3;
    }

    body.body-digital-agency .service-area .section-title,
    body.body-digital-agency .client-area .section-title,
    body.body-digital-agency .cta-area .section-title,
    body.body-digital-agency .productivity-area .section-title {
        font-size: 38px;
        line-height: 1.45;
    }
}

@media only screen and (max-width: 767px) {
    /* Section headings */
    body.body-digital-agency .home-hero-area.hero-area .section-title {
        font-size: 32px;
    }

    body.body-digital-agency .about-area .section-title {
        font-size: 44px;
    }

    body.body-digital-agency .service-area .section-title,
    body.body-digital-agency .client-area .section-title,
    body.body-digital-agency .cta-area .section-title,
    body.body-digital-agency .productivity-area .section-title {
        font-size: 28px;
    }

    body.body-digital-agency .funfact-area h2 {
        font-size: 24px;
        line-height: 1.5;
    }

    /* Card / item titles */
    body.body-digital-agency .service-area .title,
    body.body-digital-agency .services-wrapper-1 .service-box .content .title {
        font-size: 20px;
        line-height: 1.5;
    }

    body.body-digital-agency .work-area h3.title {
        font-size: 18px;
        line-height: 1.5;
    }

    /* Body copy */
    body.body-digital-agency main .text,
    body.body-digital-agency .home-hero-area.hero-area-5 .section-content .text,
    body.body-digital-agency .about-area .section-content .text,
    body.body-digital-agency .work-area .section-header .text-wrapper .text {
        font-size: 16px;
        line-height: 1.8;
    }

    body.body-digital-agency .services-wrapper-1 .service-box .text {
        font-size: 15px;
        line-height: 1.8;
    }
}

@media only screen and (max-width: 575px) {
    body.body-digital-agency .home-hero-area.hero-area .section-title {
        font-size: 28px;
    }

    body.body-digital-agency .about-area .section-title {
        font-size: 36px;
    }

    body.body-digital-agency .service-area .section-title,
    body.body-digital-agency .client-area .section-title,
    body.body-digital-agency .cta-area .section-title,
    body.body-digital-agency .productivity-area .section-title {
        font-size: 24px;
    }

    body.body-digital-agency .funfact-area h2 {
        font-size: 22px;
    }

    body.body-digital-agency main .text,
    body.body-digital-agency .home-hero-area.hero-area-5 .section-content .text,
    body.body-digital-agency .about-area .section-content .text,
    body.body-digital-agency .work-area .section-header .text-wrapper .text {
        font-size: 15px;
    }
}

/* ------------------------- 3. Mobile vertical rhythm -------------------- */
@media only screen and (max-width: 767px) {
    /* Hero: the 280px bottom gap only exists to make room for the big text. */
    .home-hero-area.hero-area-5 .section-content-wrapper {
        margin-bottom: 40px;
    }

    .home-hero-area.hero-area-5 .no-big-text .section-content-wrapper {
        margin-bottom: 0;
    }

    /* About: content-height block instead of a full 100vh screen; the corner
       brackets keep framing the content. */
    body.body-digital-agency .about-area-inner {
        height: auto;
    }

    body.body-digital-agency .about-area .section-content {
        height: auto;
        padding: 44px 0;
    }

    body.body-digital-agency .about-area .section-content .btn-wrapper {
        margin-top: 32px;
    }

    /* Services → fun facts */
    body.body-digital-agency .service-area-inner {
        padding-bottom: 48px;
    }

    body.body-digital-agency .service-area .services-wrapper-box {
        margin-top: 28px;
        margin-bottom: 0;
    }

    body.body-digital-agency .funfact-area .section-header {
        margin-top: 0;
        padding-top: 48px;
    }

    body.body-digital-agency .funfact-area .section-title-wrapper {
        margin-top: 0;
    }

    body.body-digital-agency .funfact-area .funfact-wrapper-box {
        padding-bottom: 48px;
    }

    body.body-digital-agency .funfact-area .funfact-wrapper {
        margin-top: 24px;
        margin-bottom: 0;
    }

    body.body-digital-agency .funfact-area .funfact-item:not(:first-child) {
        margin-top: 32px;
    }

    /* Clients: no negative pull over the intro text, shorter logo pit. */
    body.body-digital-agency .client-area-inner {
        padding-top: 48px;
    }

    body.body-digital-agency .client-area .section-content {
        margin-top: 0;
    }

    body.body-digital-agency .client-area .client-capsule-wrapper {
        margin-top: 16px;
        height: 320px;
    }

    /* CTA: static (main.js skips the pinned zoom below 768px) — a compact
       block with the circle fully inside it. */
    body.body-digital-agency .cta-area {
        height: auto;
    }

    body.body-digital-agency .cta-area-inner {
        min-height: 300px;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    body.body-digital-agency .cta-area-inner .area-bg {
        width: 250px;
        height: 250px;
    }

    /* Productivity: only the section padding, no extra margins. */
    body.body-digital-agency .productivity-area .section-content {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* ---------------------------- 4. Clients section ------------------------ */
body.body-digital-agency .client-area .section-title {
    line-height: 1.45;
    overflow-wrap: break-word;
}

body.body-digital-agency .client-area .section-content .text-wrapper {
    max-width: min(505px, 100%);
}

body.body-digital-agency .client-area .client-capsule-wrapper {
    width: 100%;
    max-width: 100%;
}

body.body-digital-agency .client-area .client-box {
    overflow: hidden;
}

/* Logos always fit inside their capsule, whatever the capsule size. */
body.body-digital-agency .client-area .client-box img {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: min(130px, 100%);
    max-height: min(56px, 100%);
    object-fit: contain;
}

/* Name-only capsules: shrink with the capsule and never overflow it. */
body.body-digital-agency .client-area .client-box .client-name {
    display: block;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

@media only screen and (max-width: 1399px) {
    body.body-digital-agency .client-area .client-box {
        padding: 6px 14px;
    }

    body.body-digital-agency .client-area .client-box .client-name {
        font-size: 15px !important;
    }
}

@media only screen and (max-width: 991px) {
    body.body-digital-agency .client-area .client-box {
        padding: 5px 10px;
    }

    body.body-digital-agency .client-area .client-box .client-name {
        font-size: 12px !important;
    }
}

@media only screen and (max-width: 767px) {
    body.body-digital-agency .client-area .client-box {
        padding: 4px 8px;
    }

    body.body-digital-agency .client-area .client-box .client-name {
        font-size: 10px !important;
    }
}