/*
 * Homepage sections with no Zelio equivalent: [courses], [about-me], [tools].
 * Built on the theme's own tokens (--tc-neutral-*, --primary-color) so they
 * follow the accent colour and light/dark switch automatically.
 * Loaded only on pages that use one of these shortcodes.
 */

.section-courses,
.section-about-me,
.section-tools {
    --hs-line: rgba(255, 255, 255, 0.09);
    --hs-line-strong: rgba(255, 255, 255, 0.16);
    --hs-surface: rgba(255, 255, 255, 0.026);
}

[data-bs-theme='light'] .section-courses,
[data-bs-theme='light'] .section-about-me,
[data-bs-theme='light'] .section-tools {
    --hs-line: rgba(31, 31, 36, 0.13);
    --hs-line-strong: rgba(31, 31, 36, 0.22);
    --hs-surface: rgba(31, 31, 36, 0.025);
}

/* ============================================================ courses */
.hs-courses { display: grid; gap: clamp(20px, 2.4vw, 32px); }
@media (min-width: 768px) { .hs-courses { grid-template-columns: repeat(2, 1fr); } }

.hs-course {
    display: flex; flex-direction: column;
    border: 1px solid var(--hs-line); border-radius: 16px; overflow: hidden;
    background: var(--hs-surface);
    transition: border-color .35s ease, transform .35s ease;
}
.hs-course:hover { border-color: var(--hs-line-strong); transform: translateY(-4px); }

.hs-course__cover {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background:
        linear-gradient(140deg, rgba(110, 78, 242, 0.22), transparent 62%),
        var(--hs-surface);
    border-bottom: 1px solid var(--hs-line);
}
.hs-course__img { width: 100%; height: 100%; object-fit: cover; }
.hs-course__fallback { display: grid; place-items: center; }
.hs-course__fallback i { font-size: clamp(38px, 4vw, 54px); color: var(--tc-neutral-0); opacity: 0.28; }
.hs-course__badge {
    position: absolute; inset-block-start: 14px; inset-inline-start: 14px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: #fff; background: var(--primary-color);
    border-radius: 99px; padding: 7px 14px;
}

.hs-course__body { padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.hs-course__title {
    font-size: clamp(20px, 2.1vw, 27px); line-height: 1.2; letter-spacing: -0.02em;
    font-weight: 600; color: var(--tc-neutral-0); margin: 0;
}
.hs-course__text { font-size: 15px; line-height: 1.65; color: var(--tc-neutral-200); margin: 0; }
.hs-course__cta {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--primary-color); text-decoration: none;
    border-bottom: 1px solid currentColor; padding-bottom: 4px;
    transition: gap .3s ease;
}
.hs-course__cta:hover { gap: 13px; color: var(--primary-color); }

/* =========================================================== about me */
.section-about-me { position: relative; overflow: hidden; }

.hs-about { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 992px) { .hs-about { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.hs-about__visual { position: relative; }
.hs-about__img { width: 100%; height: auto; border-radius: 18px; display: block; }
.hs-about__placeholder {
    aspect-ratio: 4 / 5; border-radius: 18px;
    border: 1px dashed var(--hs-line-strong);
    background:
        var(--hs-surface)
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 10px, transparent 10px 20px);
    display: grid; place-content: center; gap: 12px; justify-items: center; text-align: center;
    padding: 24px; color: var(--tc-neutral-300);
}
.hs-about__placeholder i { font-size: 30px; opacity: 0.5; }
.hs-about__placeholder span { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; }

.hs-about__label {
    font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--tc-neutral-300); margin: 0 0 20px;
    display: inline-flex; align-items: center; gap: 14px;
}
.hs-about__label::before {
    content: ''; width: 34px; height: 1px;
    background: linear-gradient(90deg, var(--primary-color), transparent);
}
.hs-about__headline {
    font-size: clamp(28px, 3.8vw, 52px); line-height: 1.1; letter-spacing: -0.03em;
    font-weight: 600; color: var(--tc-neutral-0); margin: 0 0 24px;
}
.hs-about__text p {
    font-size: clamp(16px, 1.15vw, 18px); line-height: 1.75;
    color: var(--tc-neutral-200); margin: 0 0 18px; max-width: 58ch;
}
.hs-about__text p:last-child { margin-bottom: 0; }

.hs-about__words {
    margin: clamp(40px, 5vw, 80px) 0 0; text-align: center;
    font-size: clamp(20px, 4.4vw, 62px); line-height: 1; letter-spacing: 0.04em;
    font-weight: 700; text-transform: uppercase;
    color: transparent; -webkit-text-stroke: 1px var(--hs-line-strong);
    user-select: none; white-space: nowrap; overflow: hidden; text-overflow: clip;
}

/* ============================================================== tools */
.hs-tools { display: grid; gap: 1px; background: var(--hs-line); border-block: 1px solid var(--hs-line); }
@media (min-width: 768px) { .hs-tools { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .hs-tools { grid-template-columns: repeat(4, 1fr); } }

.hs-tools__group { background: var(--tc-neutral-1000); padding: clamp(24px, 2.8vw, 36px); }
.hs-tools__category {
    font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--primary-color); margin: 0 0 22px;
}
.hs-tools__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.hs-tool { display: flex; align-items: center; gap: 12px; }
.hs-tool__logo {
    width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px;
    filter: grayscale(1); opacity: 0.75; transition: filter .3s ease, opacity .3s ease;
}
.hs-tool:hover .hs-tool__logo { filter: none; opacity: 1; }
.hs-tool__name {
    font-size: clamp(15px, 1.3vw, 17px); line-height: 1.4;
    color: var(--tc-neutral-100); transition: color .3s ease;
}
.hs-tool:hover .hs-tool__name { color: var(--tc-neutral-0); }

@media (prefers-reduced-motion: reduce) {
    .hs-course, .hs-course__cta, .hs-tool__logo, .hs-tool__name { transition: none; }
    .hs-course:hover { transform: none; }
}

/* one ungrouped list (e.g. the companies strip) reads as a single full-width row */
.hs-tools--single { grid-template-columns: 1fr !important; }
.hs-tools--single .hs-tools__list {
    display: flex; flex-wrap: wrap;
    gap: clamp(18px, 3vw, 52px) clamp(24px, 4vw, 72px);
    align-items: center;
}
.hs-tools--single .hs-tool__name {
    font-size: clamp(17px, 1.7vw, 23px); font-weight: 500;
    color: var(--tc-neutral-100); letter-spacing: -0.01em;
}
.hs-tools--single .hs-tools__group { padding-block: clamp(28px, 3.4vw, 44px); }

/* ============================================================
   Homepage vertical rhythm.

   Zelio's demo spacing stacks padding-bottom:120px on one section against
   padding-top:120px on the next — roughly 240px of dead space between every
   pair, which made the page read as disconnected blocks. Halved here so the
   sections flow as one story while staying generous.

   This file is only enqueued by [courses], [about-me] and [tools], so the
   overrides land on the homepage and not on the case study pages.
============================================================= */
.section-hero-1 { padding-top: 170px; padding-bottom: 64px; }

.section-tools,
.section-courses,
.section-about-me,
.section-case-studies,
.section-service-1 { padding-top: 52px; padding-bottom: 52px; }

.section-resume-1 { padding-top: 52px; }

/* the demo marquee is gone, so remove its empty spacer entirely */
.section-resume-1 > .scroll-move-right:not(:has(h3)) { display: none; }

.section-static-1 { padding-block: 32px; }

.section-testimonials-1 {
    padding-top: 52px;
    padding-bottom: 52px;
    margin-bottom: 0 !important;
}

/* .pb-lg-250 is a media-query utility, so match its weight */
.section-contact-1 { padding-top: 52px !important; padding-bottom: 96px !important; }

@media (max-width: 767.98px) {
    .section-hero-1 { padding-top: 0; padding-bottom: 40px; }
    .section-tools,
    .section-courses,
    .section-about-me,
    .section-case-studies,
    .section-service-1,
    .section-resume-1,
    .section-testimonials-1,
    .section-static-1,
    .section-contact-1 { padding-top: 52px; padding-bottom: 52px; }
    .section-contact-1 { padding-bottom: 80px; }
}

/* ---------- portraits ----------
   Show the whole photograph. Any fixed box with object-fit:cover crops a real
   portrait, so the frame follows the image's own aspect ratio instead. */
.section-hero-1 { min-height: 660px; }
.section-hero-1 .shape-1 { max-width: 48%; }
.section-hero-1 .shape-1 img {
    width: auto;
    height: auto;
    max-height: 560px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 18px;
}

.hs-about__img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 18px;
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .section-hero-1 .shape-1 img { max-height: 430px; }
}

/* phones: full-bleed, full photograph, nothing cut off */
@media (max-width: 767.98px) {
    .section-hero-1 { min-height: 0; }
    .section-hero-1 .shape-1 { max-width: 100%; margin: 0 0 24px !important; }
    .section-hero-1 .shape-1 img {
        width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: auto;
        border-radius: 16px;
    }
    .hs-about__placeholder { aspect-ratio: 4 / 3; }
}

/* ---------- counter accuracy ----------
   Zelio hard-codes a "+" before every counter. "7+ years" and "2M+ EGP" are
   correct, but "4 regional markets" and "7 companies" are exact figures. */
.section-static-1 .row > div:nth-child(2) .plus-icon-counter,
.section-static-1 .row > div:nth-child(3) .plus-icon-counter { display: none; }

/* ---------- testimonials ----------
   Swiper sizes the track to the tallest slide. With one long quote and three
   short ones that left ~900px of void under the short cards on a phone.
   autoHeight is enabled in theme.js; these rules keep the transition smooth
   and stop a short card floating inside a tall slide. */
.section-testimonials-1 .swiper { transition: height .35s ease; }
.section-testimonials-1 .swiper-wrapper { align-items: flex-start; }
.section-testimonials-1 .swiper-slide { height: auto; }
.section-testimonials-1 .swiper-pagination { position: static; margin-top: 28px; }

/* course card without a cover image: an inline platform tag instead of an empty frame */
.hs-course__tag {
    align-self: flex-start;
    font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: #fff; background: var(--primary-color);
    border-radius: 99px; padding: 6px 13px;
}

/* the decorative words behind About were being clipped mid-word on phones */
.hs-about__words { white-space: normal; text-wrap: balance; }
@media (max-width: 767.98px) {
    .hs-about__words { font-size: clamp(16px, 5.4vw, 26px); line-height: 1.35; letter-spacing: 0.02em; }
}

/* ============================================================
   Measured on a 390px viewport: whitespace between one section's last line of
   content and the next section's first line ran 112–203px. Target is ~72–88px.
============================================================= */
@media (max-width: 767.98px) {
    .section-hero-1 { padding-bottom: 36px !important; }

    .section-tools,
    .section-courses,
    .section-about-me,
    .section-case-studies,
    .section-resume-1,
    .section-service-1,
    .section-testimonials-1,
    .section-static-1 { padding-top: 36px !important; padding-bottom: 36px !important; }

    .section-contact-1 { padding-top: 36px !important; padding-bottom: 64px !important; }

    /* the resume card kept a 48px bottom margin on top of the section padding */
    .section-resume-1 .resume-card { margin-bottom: 0 !important; }

    /* section headings carry mt-3/mb-3 utilities that stack on the padding */
    .section-tools .ds-3,
    .section-courses .ds-3,
    .section-case-studies .ds-3,
    .section-resume-1 .ds-3,
    .section-service-1 .ds-3,
    .section-testimonials-1 .ds-3,
    .section-contact-1 .ds-3 { margin-top: 0 !important; margin-bottom: 10px !important; }

    .hs-tools__group { padding-block: 22px !important; }
    .hs-about__words { margin-top: 28px; }
}

/* ---------- mobile carousels ----------
   Courses and testimonials both become a horizontal snap carousel on phones,
   with identical card width, gap and snapping so the two sections behave the
   same way. Cards stretch to a common height, so a short quote never leaves a
   naked gap the way Swiper's tallest-slide sizing did.
============================================================= */
@media (max-width: 767.98px) {
    .hs-courses,
    .section-testimonials-1 .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .hs-courses::-webkit-scrollbar,
    .section-testimonials-1 .swiper-wrapper::-webkit-scrollbar { display: none; }

    .hs-course,
    .section-testimonials-1 .swiper-slide {
        flex: 0 0 87%;
        scroll-snap-align: center;
        margin: 0 !important;
        height: auto !important;
    }

    /* neutralise Swiper's transform and inline sizing so the native scroller wins */
    .section-testimonials-1 .swiper { overflow: visible; height: auto !important; }
    .section-testimonials-1 .swiper-wrapper { transform: none !important; height: auto !important; }
    .section-testimonials-1 .swiper-slide { width: 87% !important; display: flex; }
    .section-testimonials-1 .card-testimonial-1 { width: 100%; margin-inline: 0 !important; }
    .section-testimonials-1 .swiper-pagination { display: none !important; }
}

/* the theme leaves an empty <div class="text-center mt-8"> under the slider */
.section-testimonials-1 .swiper > .text-center.mt-8:empty { display: none; }

/* ---------- logo wall ----------
   The eight brand marks arrive in their own colours — three of them dark enough
   to vanish on this background. Normalising to white keeps the row even, and the
   real colours come back on hover. */
.hs-tool--logo { display: block; }
.hs-tool--logo .hs-tool__logo {
    /* a uniform slot so a wide wordmark and a square mark carry equal weight */
    width: clamp(112px, 12vw, 152px);
    height: clamp(34px, 3.6vw, 46px);
    object-fit: contain;
    object-position: center;
    filter: brightness(0) invert(1);
    opacity: 0.62;
    transition: filter .35s ease, opacity .35s ease;
}
.hs-tool--logo:hover .hs-tool__logo { filter: none; opacity: 1; }

[data-bs-theme='light'] .hs-tool--logo .hs-tool__logo { filter: brightness(0); }
[data-bs-theme='light'] .hs-tool--logo:hover .hs-tool__logo { filter: none; }

/* the companies strip is a logo row, so give it room to breathe */
.hs-tools--single .hs-tools__list { gap: clamp(22px, 3.4vw, 56px) clamp(28px, 4.6vw, 72px); }

@media (prefers-reduced-motion: reduce) {
    .hs-tool--logo .hs-tool__logo { transition: none; }
}

/* ============================================================
   Mobile typography — restored.
   ds-2 renders the hero H1 at 64px on a 390px screen (230px tall on its own)
   and ds-3 does the same to every section title.
============================================================= */
@media (max-width: 767.98px) {
    .section-hero-1 h1 {
        font-size: clamp(32px, 8.6vw, 42px) !important;
        line-height: 1.08;
        letter-spacing: -0.02em;
    }

    .section-tools .ds-3,
    .section-courses .ds-3,
    .section-case-studies .ds-3,
    .section-resume-1 .ds-3,
    .section-service-1 .ds-3,
    .section-testimonials-1 .ds-3,
    .section-contact-1 .ds-3 {
        font-size: clamp(30px, 7.6vw, 40px) !important;
        line-height: 1.12;
        letter-spacing: -0.02em;
    }

    .hs-about__headline { font-size: clamp(28px, 7.4vw, 38px); }
}

/* ---------- companies logo strip on phones ----------
   Same swipe-and-snap behaviour as the courses and testimonials carousels,
   but sized for logos: roughly three marks per view instead of one card, so
   the row stays readable and the overflow signals that it scrolls. */
@media (max-width: 767.98px) {
    .hs-tools--single .hs-tools__list {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 26px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-block: 6px 10px;
    }

    .hs-tools--single .hs-tools__list::-webkit-scrollbar { display: none; }

    .hs-tools--single .hs-tool {
        flex: 0 0 auto;
        scroll-snap-align: center;
    }

    .hs-tools--single .hs-tool--logo .hs-tool__logo {
        width: 108px;
        height: 38px;
    }

    .hs-tools--single .hs-tools__group { padding-block: 16px !important; }
}