/* =========================================================================
   KREATO — responsive.css
   Mobile-first cascade. Breakpoints (matching Setup\InlineStyle):
     mobile: ≤ 767px
     tablet: 768–991px
     ipad:   1024–1400px
   ========================================================================= */

/* Tablet & smaller — hide hamburger above tablet, show below. */
@media (max-width: 991px) {
    :root { --section-pad: 64px 0; --header-h: 64px; }

    /* Fix header grid: collapse from 3-col to 2-col so actions land at far right.
       Without this, the hidden center div vacates column-2 and the auto-placement
       algorithm drops .kreato-header__actions into the 1fr middle column. */
    .kreato-header__inner {
        grid-template-columns: auto auto;
        justify-content: space-between;
    }
    .kreato-header__center { display: none; }
    .kreato-hamburger { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; }

    .kreato-hero--split .kreato-hero__inner--grid { grid-template-columns: 1fr; gap: 2rem; padding: 4rem 0; }
    .kreato-hero__right { aspect-ratio: 4/3; }

    .kreato-about__inner   { grid-template-columns: 1fr; gap: 2.5rem; }
    .kreato-resume__grid   { grid-template-columns: 1fr; gap: 2rem; }
    .kreato-skills__grid   { grid-template-columns: 1fr; gap: 2rem; }
    .kreato-services__grid { grid-template-columns: repeat(2, 1fr); }
    .kreato-pricing__grid  { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
    .kreato-pricing__trust { grid-template-columns: repeat(2, 1fr); }
    .kreato-pricing__header { grid-template-columns: 1fr; gap: 1.5rem; }
    .kreato-pricing__header-divider { display: none; }
    .kreato-plan--featured { margin-top: 0; }
    .kreato-plan.is-featured { transform: none; }
    .kreato-contact__grid  { grid-template-columns: 1fr; gap: 2.5rem; }
    .kreato-contact__form-wrap { padding: 1.75rem; }
    .kreato-contact__banner { padding: 70px 0 60px; }
    .kreato-contact__banner-inner { grid-template-columns: 1fr; gap: 3rem; }
    .kreato-contact__banner-aside { justify-content: flex-start; }
    .kreato-contact__status-card { max-width: 100%; }
    .kreato-contact__body { padding: 50px 0 70px; }
    .kreato-stats__grid              { grid-template-columns: repeat(2, 1fr); }
    .kreato-stats__marquee-item      { font-size: clamp(22px, 3vw, 38px); padding: 0 0.9rem; }

    .kreato-portfolio__grid.columns-3,
    .kreato-portfolio__grid.columns-4 { --cols: 2; }

    .kreato-post-grid.columns-3,
    .kreato-post-grid.columns-4 { --cols: 2; }

    .kreato-footer__grid { grid-template-columns: repeat(2, 1fr); }

    .single-layout.sidebar-right,
    .single-layout.sidebar-left { grid-template-columns: 1fr; }

    /* Related posts: max 2 columns at tablet */
    .kreato-related__grid { grid-template-columns: repeat(2, 1fr); }

    .kreato-section__title { font-size: clamp(28px, 5vw, 40px); }
}

/* Mobile only */
@media (max-width: 767px) {
    :root { --section-pad: 64px 0; --container-pad: 16px; }

    .kreato-hero__title { font-size: clamp(40px, 9vw, 64px); }
    .kreato-hero--minimal .kreato-hero__title--display { font-size: clamp(48px, 12vw, 88px); }

    .kreato-services__grid,
    .kreato-stats__grid,
    .kreato-post-grid.columns-2,
    .kreato-post-grid.columns-3,
    .kreato-post-grid.columns-4,
    .kreato-portfolio__grid { grid-template-columns: 1fr; }

    .kreato-about__facts { grid-template-columns: 1fr 1fr; }

    .kreato-footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .kreato-footer__copyright-inner { flex-direction: column; text-align: center; }

    /* Hero CTA buttons — centred pills, max 320px, NOT edge-to-edge */
    .kreato-hero__actions {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 0 1.5rem;
    }
    .kreato-hero__actions .kreato-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
    .error-actions { flex-direction: column; align-items: center; }
    .error-actions .kreato-btn { width: 100%; max-width: 320px; justify-content: center; }

    .kreato-contact__row { grid-template-columns: 1fr; }

    .kreato-post-navigation .nav-links { flex-direction: column; }

    .author-card { flex-direction: column; text-align: center; }

    .kreato-pagination .page-numbers { min-width: 38px; height: 38px; }
}

/* iPad / wide tablet */
@media (min-width: 992px) and (max-width: 1199px) {
    .kreato-hero--split .kreato-hero__inner--grid { gap: 3rem; }
    .kreato-services__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ========================================================================
   Mobile-quality polish (real-client tuning).
   ======================================================================== */

/* Tablet & smaller — additional layout tightening. */
@media (max-width: 991px) {
    /* Hero text scale: original `clamp(40px, 9vw, 64px)` was too aggressive
     * on tablets (Alex Morgan would crack onto 2 lines). */
    .kreato-hero__title { font-size: clamp(40px, 8vw, 72px); }
    .kreato-hero__roles { font-size: clamp(18px, 3vw, 28px); }
    .kreato-hero__lede  { font-size: 16px; }

    /* Hero badge + trust line — keep readable on narrower viewports. */
    .kreato-hero__badge { font-size: 12px; padding: 0.35em 0.85em; }
    .kreato-hero__trust { font-size: 12px; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }

    /* Card padding tighter so things don't feel claustrophobic. */
    .kreato-service-card { padding: 1.5rem; }
    .kreato-plan         { padding: 2rem; }
    .kreato-testimonial  { padding: 2rem; }

    /* Portfolio card-view label sits over text on tablet. Hide on hover-less. */
    .kreato-portfolio-card .card-view { display: none; }

    /* Filter row should wrap, not overflow horizontally. */
    .kreato-portfolio__filter { flex-wrap: wrap; }

    /* Featured pricing halo tones down on smaller screens. */
    .kreato-plan.is-featured::before { filter: blur(20px); }
}

/* Phones — final tightening. */
@media (max-width: 767px) {
    /* Hero — drop title bottom-end aggressively so even 320px screens fit. */
    .kreato-hero__title { font-size: clamp(34px, 11vw, 56px); line-height: 1.05; }
    .kreato-hero__roles { font-size: clamp(18px, 5vw, 28px); }
    .kreato-hero--fullscreen .kreato-hero__inner { padding: 4.5rem 0 3rem; }

    /* Hero decorative ring + orbs scale down further than the 991px rule. */
    .kreato-hero__ring { width: 220px; height: 220px; }
    .kreato-hero__orb--big   { width: 260px; height: 260px; top: -60px;  right: -60px; }
    .kreato-hero__orb--small { width: 200px; height: 200px; bottom: -40px; left: -40px; }
    .kreato-hero__dot { display: none; }

    /* About badge sized down. */
    .kreato-about__badge { width: 84px; height: 84px; bottom: 1rem; left: 0.5rem; }
    .kreato-about__badge-num { font-size: 1.25rem; }
    .kreato-about__badge-label { font-size: 0.55rem; max-width: 70px; }

    /* About facts — stack on smallest screens for readability. */
    .kreato-about__facts { grid-template-columns: 1fr; gap: 0.75rem; }

    /* Marquee scale-down so it doesn't cost two lines vertically. */
    .kreato-marquee__item { font-size: clamp(22px, 7vw, 36px); }
    .kreato-marquee { padding: 1rem 0; }

    /* Section header titles + eyebrows tighter. */
    .kreato-section__header  { margin-bottom: 2rem; }
    .kreato-section__title   { font-size: clamp(24px, 6vw, 36px); line-height: 1.1; }
    .kreato-eyebrow          { font-size: 11px; }

    /* Stats — 2-column grid on mobile, tighter marquee font. */
    .kreato-stats__grid         { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .kreato-stats__marquee-item { font-size: clamp(18px, 5vw, 28px); padding: 0 0.75rem; }
    .kreato-stat-card           { padding: 1.75rem 1.25rem 1.5rem; }
    .kreato-stat-card__count    { font-size: clamp(2.25rem, 9vw, 3rem); }
    .kreato-stat-card__suffix   { font-size: clamp(1.5rem, 6vw, 2rem); }

    /* Pricing — disable lift transform on mobile (tap target). */
    .kreato-plan { transform: none !important; }
    .kreato-pricing__grid { max-width: 100%; }
    .kreato-pricing__trust { grid-template-columns: 1fr; }

    /* Header floating — collapse to compact.
     *
     * On phones the header was getting crowded by KREATO logo + dark
     * toggle + LET'S TALK pill + hamburger all competing for the
     * same row. Hide the inline LET'S TALK button (the offcanvas
     * drawer already exposes it via mobile-nav.php), and tighten the
     * remaining items so logo + toggle + hamburger fit comfortably
     * down to a 320px viewport.
     */
    .kreato-header__bar { padding: 0 1rem; }
    .kreato-logo__text  { font-size: 1.1rem; }
    .kreato-header__actions .cta-button { display: none; }
    .kreato-header__actions { gap: 0.5rem; }
    .kreato-mode-toggle { width: 36px; height: 36px; }
    .kreato-hamburger   { width: 36px; height: 36px; }

    /* Comment form — single column on phones (2-up Name/Email becomes stack). */
    .comment-form { grid-template-columns: 1fr; }

    /* Testimonial swiper buttons — small + repositioned. */
    .kreato-testimonials__swiper .swiper-button-prev,
    .kreato-testimonials__swiper .swiper-button-next { display: none; }

    /* Disable side text vertical chrome (already hidden in main.css ≤991, kept here for safety). */
    .kreato-side-text { display: none; }
}

/* Very small phones — minor tightening. */
@media (max-width: 380px) {
    :root { --container-pad: 12px; }
    .kreato-hero__title { font-size: clamp(30px, 12vw, 44px); }
    .kreato-section__title { font-size: clamp(24px, 8vw, 32px); }
    .kreato-plan, .kreato-service-card, .kreato-testimonial { padding: 1.25rem; }
}

/* Wide desktops — let containers breathe. */
@media (min-width: 1600px) {
    :root { --container: 1320px; --section-pad: 100px 0; }
}

/* ========================================================================
   HERO — SPLIT LAYOUT: responsive breakpoints for the big/bold redesign.
   ======================================================================== */

/* iPad / wide tablet (992–1199px): tighten the left column padding a touch */
@media (min-width: 992px) and (max-width: 1199px) {
    .kreato-hero--split .kreato-hero__content {
        padding-left: max(2rem, calc((100vw - var(--container)) / 2 + 2rem));
        padding-right: 2.5rem;
    }
    .kreato-hero--split .kreato-hero__title {
        font-size: clamp(40px, 4.5vw, 60px) !important;
    }
    .kreato-hero__stat-card {
        padding: 0.875rem 1.125rem;
    }
    .kreato-hero__stat-card .card-num { font-size: 18px; }
}

/* Tablet (≤991px): stack columns, portrait below content */
@media (max-width: 991px) {
    .kreato-hero--split .kreato-hero__inner {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .kreato-hero--split .kreato-hero__content {
        padding: calc(var(--header-h) + 3rem) 2rem 2.5rem !important;
        align-items: flex-start;
        text-align: left;
    }

    /* On tablet the visual column becomes a fixed-height portrait band */
    .kreato-hero__visual {
        min-height: 55vw !important;
        max-height: 480px;
    }

    /* Portrait: centered, full-width at tablet */
    .kreato-hero__portrait > img:not(.kreato-hero__badge-img) {
        height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        object-fit: cover;
        object-position: top center;
    }

    /* Move badge to a sensible position on smaller viewports */
    .kreato-hero__portrait .kreato-hero__badge-img {
        bottom: 24px !important;
        left: 50% !important;
        transform: translateX(-50%);
        width: 90px !important;
        height: 90px !important;
    }

    /* Stat cards: hide on tablet to avoid clutter */
    .kreato-hero__depth { display: none; }
}

/* Mobile (≤767px): compact single-column hero */
@media (max-width: 767px) {
    .kreato-hero--split .kreato-hero__content {
        padding: calc(var(--header-h) + 2.5rem) 1.25rem 2rem !important;
        gap: 1.25rem;
    }

    .kreato-hero--split .kreato-hero__title {
        font-size: clamp(36px, 10vw, 52px) !important;
        letter-spacing: -0.02em;
    }

    .kreato-hero--split .kreato-hero__roles {
        font-size: clamp(18px, 5.5vw, 26px) !important;
    }

    /* Visual column: portrait thumbnail band on mobile */
    .kreato-hero__visual {
        min-height: 60vw !important;
        max-height: 360px;
    }
}

/* ========================================================================
   Task-2 — Custom cursor: hide completely on touch/coarse-pointer devices.
   ======================================================================== */
@media (hover: none) and (pointer: coarse) {
    .kreato-cursor,
    .kreato-cursor-dot { display: none !important; }
}

/* ========================================================================
   Task-3 — Mobile drawer: always use CSS custom property colours so it
   respects both dark and light data-theme without JS overrides.
   ======================================================================== */
.kreato-drawer__panel {
    background: var(--color-bg);
    color: var(--color-text);
}
.kreato-drawer__panel a:not(.kreato-btn) {
    color: var(--color-text);
}
.kreato-drawer__panel a:not(.kreato-btn):hover {
    color: var(--color-accent);
}
/* Drawer CTA button — force primary style regardless of mode */
.kreato-drawer__panel .kreato-btn {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.kreato-nav-drawer {
    background: var(--color-bg);
    color: var(--color-text);
}
.kreato-nav-drawer a { color: var(--color-text); }
.kreato-nav-drawer a:hover { color: var(--color-accent); }

/* ========================================================================
   Task-4 — About image: cap height on mobile, move below text.
   ======================================================================== */
@media (max-width: 767px) {
    .kreato-about__inner {
        display: flex;
        flex-direction: column-reverse;
    }
    .kreato-about__image-wrap {
        max-height: 300px;
        overflow: hidden;
        border-radius: var(--radius-lg);
    }
    .kreato-about__image-wrap img,
    .kreato-about__image-wrap svg {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
}

/* ========================================================================
   Task-5 — Service cards: tighter padding on mobile.
   ======================================================================== */
@media (max-width: 767px) {
    .kreato-service-card {
        padding: 1.25rem;
    }
    .kreato-service-card__icon {
        width: 44px;
        height: 44px;
        margin-bottom: 0.75rem;
    }
}

/* ========================================================================
   Task-6 — Marquee: prevent overflow clipping.
   ======================================================================== */
.kreato-marquee {
    overflow: hidden;
    width: 100%;
    padding: 0;
}
.kreato-marquee__track {
    display: flex;
    white-space: nowrap;
    width: max-content;
}

/* Light-mode contact field overrides are now in main.css
   (.kreato-contact__field input/select/textarea). */

/* ========================================================================
   Task-14 — Service single: banner minimum height.
   ======================================================================== */
.single-kreato_service .kreato-banner {
    min-height: 240px;
}

/* ========================================================================
   Task-15 — General mobile polish.
   ======================================================================== */
@media (max-width: 767px) {
    /* Section padding tighter on mobile */
    section { padding: 60px 0; }

    /* Container padding on mobile */
    .kreato-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Portfolio filter pills — scrollable horizontal on mobile */
    .kreato-portfolio__filters,
    .kreato-portfolio__filter {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .kreato-portfolio__filters::-webkit-scrollbar,
    .kreato-portfolio__filter::-webkit-scrollbar { display: none; }
    .kreato-portfolio__filters button,
    .kreato-portfolio__filter button { white-space: nowrap; flex-shrink: 0; }

    /* Pricing cards — full width stack */
    .kreato-pricing__grid { grid-template-columns: 1fr; }
    .kreato-plan--featured { transform: none; }

    /* Testimonials — single card */
    .kreato-testimonials__grid { grid-template-columns: 1fr; }

    /* Resume timeline — full width */
    .kreato-resume__grid { grid-template-columns: 1fr; }

    /* Skills layout — stack */
    .kreato-skills__inner,
    .kreato-skills__grid { grid-template-columns: 1fr; }

    /* Footer — center everything */
    .kreato-footer__inner {
        text-align: center;
        flex-direction: column;
        gap: 1rem;
    }

    /* Back to top — clear of thumb reach zone */
    .kreato-back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
    }

    /* Hide hero social sidebar on mobile */
    .kreato-hero__social-sidebar { display: none; }

    /* ---- Single post page ---- */

    /* Reduce container top/bottom padding — use longhand to preserve
       the horizontal side padding already set by .kreato-container. */
    .single-post-container { padding-top: 2rem; padding-bottom: 3rem; }

    /* sidebar-none: remove centered max-width so it fills full width */
    .single-layout.sidebar-none {
        grid-template-columns: 1fr;
        justify-content: unset;
    }

    /* Banner title: tighter for long post titles on small screens */
    .kreato-banner__title { font-size: clamp(22px, 6.5vw, 32px); line-height: 1.15; }
    .kreato-banner__meta  { flex-wrap: wrap; gap: 0.35em; font-size: var(--text-sm); }

    /* Featured image / post-format media */
    .single-post .wp-post-image,
    .post-format img,
    .single-post .entry-content img { max-width: 100%; height: auto; }

    /* Entry content body copy: slightly smaller on mobile */
    .single-post .entry-content { font-size: 1rem; }

    /* Entry footer: stack tags above share icons */
    .entry-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin: 2rem 0 1.5rem;
        padding-top: 1.5rem;
    }

    /* Author box: stack avatar above bio */
    .kreato-author-box {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
        gap: 1rem;
    }
    .kreato-author-box__avatar {
        margin: 0 auto;
    }
    .kreato-author-box__avatar img { width: 72px; height: 72px; }

    /* Related posts: single column on phone, 2-up on tablet */
    .kreato-related__grid { grid-template-columns: 1fr; }
    .kreato-related { margin: 2.5rem 0 1.5rem; padding-top: 2rem; }

    /* Post prev/next navigation */
    .kreato-post-navigation { margin: 2rem 0; padding: 1.5rem 0; }
    .kreato-post-navigation .nav-links { flex-direction: column; gap: 1.25rem; }
    .kreato-post-navigation .nav-previous,
    .kreato-post-navigation .nav-next { max-width: 100%; }

    /* Comments form */
    .comment-respond { padding: 1.5rem; }
    .comment-form-author,
    .comment-form-email { width: 100%; }
}