/* === REKLAMA PORTFOLIO — FULL REDESIGN ===
   Colors used throughout are drawn EXCLUSIVELY from the site's own Customize > Global
   Color Palette (Astra "global-color-palette", 9 swatches): #490307, #FFA500, #333333,
   #FFD580, #F9F9F9, #E0E0E0, #8B0000 — plus white/black only as neutral UI utilities
   (text-on-dark, shadows), never as a brand color choice. */

/* ── HIDE ASTRA HEADER COMPLETELY ── */
#masthead, .site-header, .ast-primary-header-area,
.ast-desktop-header, .ast-mobile-header-wrap,
.main-header-bar-wrap, .ast-header-bar-wrap,
.ast-above-header-wrap, .ast-below-header-wrap,
#ast-fixed-header, .ast-sticky-active,
.elementor-location-header,
#ast-scroll-top, .ast-scroll-top-icon,
#reklama-header { display: none !important; }
body.admin-bar { padding-top: 0 !important; }
body { padding-top: 0 !important; margin-top: 0 !important; background: #F9F9F9 !important; }
.is-header-footer-builder-active .site-header { display: none !important; }

/* ── REMOVE LEFTOVER ASTRA CONTAINER WIDTH CAP (was leaving a ~40px dead band on the right on every page load) ── */
.ast-container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── HIDE ALL FOOTER ELEMENTS ── */
.elementor-element-472, .elementor-element-475, .elementor-element-478,
.elementor-element-47d, .elementor-element-47e, .elementor-element-47b,
.elementor-element-47c, .elementor-element-46b,
.site-footer, .site-below-footer-wrap,
.elementor-location-footer { display: none !important; }

/* ── PAGE BODY ── */
.entry-content, .ast-container, .site-content { padding: 0 !important; margin: 0 !important; }
.elementor-page .site-content { padding-top: 0 !important; }

/* ══════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════ */
.rek-hero {
    display: block !important;
    background: #490307 !important;
    padding: 100px 5vw 80px !important;
    text-align: center !important;
    width: 100% !important;
}
.rek-hero .elementor-heading-title {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: clamp(42px, 6vw, 80px) !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 20px !important;
}
.rek-hero .elementor-widget-text-editor p {
    color: rgba(255,255,255,0.7) !important;
    font-size: 18px !important;
    max-width: 580px !important;
    margin: 0 auto 36px !important;
    line-height: 1.7 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
}
.rek-hero .elementor-button {
    background: #FFA500 !important;
    color: #490307 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-radius: 9999px !important;
    padding: 16px 40px !important;
    border: none !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    letter-spacing: 0.01em !important;
}
.rek-hero .elementor-button:hover {
    background: #8B0000 !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════
   SLOGAN SECTION
══════════════════════════════════════════ */
.rek-slogan {
    display: block !important;
    background: #F9F9F9 !important;
    padding: 60px 5vw !important;
    text-align: center !important;
    border-bottom: 1px solid #E0E0E0 !important;
}
.rek-slogan .elementor-heading-title {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: clamp(32px, 5vw, 60px) !important;
    font-weight: 800 !important;
    color: #FFA500 !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
}
.rek-slogan .elementor-widget-text-editor p {
    color: #490307 !important;
    font-size: 17px !important;
    margin: 12px 0 0 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
}

/* ══════════════════════════════════════════
   BRAND LOGO BAR
══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   FILTER SECTION
══════════════════════════════════════════ */
.rek-filters {
    background: #F9F9F9 !important;
    padding: 48px 5vw 40px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.rek-filters .elementor-widget-button { display: inline-flex !important; }
.rek-filters .elementor-button {
    border: 2px solid #490307 !important;
    border-radius: 9999px !important;
    background: transparent !important;
    color: #490307 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 10px 26px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}
.rek-filters .filter-active .elementor-button,
.rek-filters .elementor-widget-button:first-child .elementor-button {
    background: #FFA500 !important;
    color: #490307 !important;
    border-color: #FFA500 !important;
}
.rek-filters .elementor-button:hover {
    background: #FFD580 !important;
    color: #490307 !important;
    border-color: #FFA500 !important;
}

/* ══════════════════════════════════════════
   PORTFOLIO GRID
══════════════════════════════════════════ */
.rek-grid {
    background: #F9F9F9 !important;
    padding: 8px 48px 72px !important;
    max-width: none !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
}

/* ── CARD (logo + preview + one CTA button — no text content) ── */
.portfolio-card {
    min-width: 0 !important;
    height: 433px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 16px rgba(51,51,51,0.08) !important;
    border: 1px solid #E0E0E0 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    cursor: pointer !important;
}
.portfolio-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 40px rgba(51,51,51,0.16) !important;
}

/* ── LOGO BAND (brand oxblood strip — real logo files here are white/light
   variants meant for a dark ground, and text wordmarks read as an intentional brand strip) ── */
.rek-card-logo {
    background: #490307 !important;
    padding: 16px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.rek-card-logo .elementor-heading-title {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.rek-card-logo-img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.rek-card-logo-img img {
    height: 36px !important;
    width: auto !important;
    max-width: 170px !important;
    object-fit: contain !important;
}
.rek-card-logo-icon img {
    height: 36px !important;
    width: 36px !important;
    border-radius: 8px !important;
    object-fit: contain !important;
}
/* Logos supplied as dark-on-light (designed for a white/gray background) need inverting
   to read on our dark logo band, since no light-variant file exists for these clients. */
.rek-card-logo-invert img {
    filter: brightness(0) invert(1) !important;
}

/* ── PREVIEW IMAGE (auto-scroll on hover) ── */
.portfolio-preview-wrap {
    height: 220px !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    flex-shrink: 0 !important;
    margin-top: 14px !important;
    background: linear-gradient(135deg, #490307 0%, #8B0000 55%, #FFA500 100%) !important;
}
.portfolio-preview-wrap img {
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    display: block !important;
    transform: translateY(0) !important;
    transition: transform .6s ease-out !important;
    will-change: transform !important;
}
.portfolio-card:hover .portfolio-preview-wrap img,
.portfolio-card:focus-within .portfolio-preview-wrap img,
.portfolio-card.rk-touch-active .portfolio-preview-wrap img {
    transform: translateY(calc(-100% + 220px)) !important;
}
/* Constant apparent scroll speed instead of one fixed duration for every capture
   height — tiers computed from each project's real capture height. */
.rk-scroll-xs:hover .portfolio-preview-wrap img, .rk-scroll-xs:focus-within .portfolio-preview-wrap img, .rk-scroll-xs.rk-touch-active .portfolio-preview-wrap img { transition: transform 1.1s linear !important; }
.rk-scroll-sm:hover .portfolio-preview-wrap img, .rk-scroll-sm:focus-within .portfolio-preview-wrap img, .rk-scroll-sm.rk-touch-active .portfolio-preview-wrap img { transition: transform 1.5s linear !important; }
.rk-scroll-md:hover .portfolio-preview-wrap img, .rk-scroll-md:focus-within .portfolio-preview-wrap img, .rk-scroll-md.rk-touch-active .portfolio-preview-wrap img { transition: transform 2s linear !important; }
.rk-scroll-lg:hover .portfolio-preview-wrap img, .rk-scroll-lg:focus-within .portfolio-preview-wrap img, .rk-scroll-lg.rk-touch-active .portfolio-preview-wrap img { transition: transform 2.7s linear !important; }

.portfolio-no-screenshot .portfolio-preview-wrap img {
    display: none !important;
}

/* ── CTA (the only content-area element now) ── */
.portfolio-cta {
    height: 69px !important;
    box-sizing: border-box !important;
    padding: 16px 18px 20px !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: auto !important;
}
.portfolio-cta .elementor-button {
    background: #FFA500 !important;
    color: #490307 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 10px 24px !important;
    border-radius: 9999px !important;
    border: none !important;
    text-decoration: none !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    letter-spacing: 0.02em !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}
.portfolio-cta .elementor-button:hover { background: #8B0000 !important; color: #fff !important; transform: translateY(-1px) !important; }

/* ══════════════════════════════════════════
   BACK TO SITE CTA
══════════════════════════════════════════ */
.rek-back-cta {
    display: block !important;
    background: #F9F9F9 !important;
    padding: 32px 5vw 48px !important;
    text-align: center !important;
}
.rek-back-cta .elementor-heading-title {
    font-size: 14px !important;
    color: #490307 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}
.rek-back-cta .elementor-button {
    background: transparent !important;
    color: #490307 !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 9999px !important;
    padding: 10px 28px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    transition: all 0.2s ease !important;
}
.rek-back-cta .elementor-button:hover {
    background: #FFA500 !important;
    color: #490307 !important;
    border-color: #FFA500 !important;
}

/* ══════════════════════════════════════════
   FILTER HIDE (JS-controlled)
══════════════════════════════════════════ */
.portfolio-card.filter-hidden {
    display: none !important;
}

/* ══════════════════════════════════════════
   PROJECT DETAIL PAGES
══════════════════════════════════════════ */
.rek-project-hero {
    display: block !important;
    background: #490307 !important;
    padding: 48px 5vw 64px !important;
    text-align: center !important;
    width: 100% !important;
}
.rek-project-back .elementor-button {
    background: transparent !important;
    color: rgba(255,255,255,0.6) !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    border: none !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 28px !important;
}
.rek-project-back .elementor-button:hover { color: #FFA500 !important; }
.rek-project-badge .elementor-heading-title {
    display: inline-block !important;
    color: #fff !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 9999px !important;
    padding: 6px 16px !important;
    margin-bottom: 20px !important;
}
.portfolio-cat-wordpress .rek-project-badge .elementor-heading-title { background: #FFA500 !important; color: #490307 !important; }
.portfolio-cat-development .rek-project-badge .elementor-heading-title { background: #490307 !important; }
.rek-project-title .elementor-heading-title {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: clamp(34px, 5vw, 56px) !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 14px !important;
}
.rek-project-tagline .elementor-widget-text-editor p {
    color: rgba(255,255,255,0.7) !important;
    font-size: 17px !important;
    max-width: 620px !important;
    margin: 0 auto 16px !important;
    line-height: 1.65 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
}
.rek-project-tech .elementor-widget-text-editor p {
    color: #FFA500 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    margin: 0 !important;
}

.rek-project-visual {
    background: #F9F9F9 !important;
    padding: 40px 5vw 8px !important;
    display: flex !important;
    justify-content: center !important;
}
.rek-project-visual-img {
    max-width: 1000px !important;
    width: 100% !important;
}
.rek-project-visual-img img {
    width: 100% !important;
    display: block !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 48px rgba(51,51,51,0.14) !important;
    border: 1px solid #E0E0E0 !important;
}
.rek-project-visual-placeholder {
    max-width: 1000px !important;
    width: 100% !important;
    height: 420px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #490307 0%, #8B0000 55%, #FFA500 100%) !important;
    box-shadow: 0 16px 48px rgba(51,51,51,0.14) !important;
}

.rek-project-meta {
    background: #F9F9F9 !important;
    padding: 48px 5vw !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}
.rek-project-meta-item {
    text-align: center !important;
    padding: 20px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #E0E0E0 !important;
}
.rek-project-meta-label .elementor-heading-title {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #FFA500 !important;
    margin-bottom: 6px !important;
}
.rek-project-meta-value .elementor-heading-title {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #490307 !important;
    line-height: 1.3 !important;
}

.rek-project-body {
    background: #ffffff !important;
    padding: 24px 5vw 64px !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}
.rek-project-body .rek-project-section-title .elementor-heading-title {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #490307 !important;
    margin: 40px 0 12px !important;
}
.rek-project-body .rek-project-section-title:first-child .elementor-heading-title { margin-top: 0 !important; }
.rek-project-body .elementor-widget-text-editor p {
    color: #490307 !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    margin: 0 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
}
.rek-project-body .elementor-widget-text-editor ul {
    margin: 0 !important;
    padding-inline-start: 20px !important;
    color: #490307 !important;
    font-size: 16px !important;
    line-height: 1.9 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
}
.rek-project-body .elementor-widget-text-editor li { margin-bottom: 4px !important; }

@media (max-width: 768px) {
    .rek-project-hero { padding: 36px 20px 48px !important; }
    .rek-project-meta { grid-template-columns: 1fr !important; padding: 32px 20px !important; }
    .rek-project-body { padding: 16px 20px 48px !important; }
    .rek-project-visual { padding: 24px 16px 8px !important; }
    .rek-project-visual-placeholder { height: 260px !important; }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1599px) {
    .rek-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 1199px) {
    .rek-grid { grid-template-columns: repeat(3, 1fr) !important; padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 991px) {
    .rek-grid { grid-template-columns: repeat(2, 1fr) !important; padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 640px) {
    .rek-hero { padding: 72px 5vw 60px !important; }
    .rek-slogan { padding: 48px 5vw !important; }
    .rek-filters { padding: 32px 5vw !important; }
}


/* ══════════════════════════════════════════
   MOBILE FIXES
══════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Single column on mobile */
    .rek-grid {
        grid-template-columns: 1fr !important;
        padding: 8px 16px 48px !important;
        gap: 16px !important;
        max-width: 100% !important;
    }
    .portfolio-card {
        min-width: unset !important;
    }

    /* Mobile preview: same translateY logic as desktop, triggered by tap via .rk-touch-active (portfolio-filter.js) */
    .portfolio-preview-wrap img {
        transition: transform .6s ease-out !important;
    }
    .portfolio-card.rk-touch-active .portfolio-preview-wrap img {
        transform: translateY(calc(-100% + 220px)) !important;
    }

    /* No-screenshot cards keep gradient */
    .portfolio-no-screenshot .portfolio-preview-wrap img {
        display: none !important;
    }

    /* Filters: even 2x2 grid instead of mismatched-width wrapped pills
       ("TOUS" vs "DÉVELOPPEMENT" made the two rows look lopsided) */
    .rek-filters {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        padding: 32px 16px 28px !important;
        gap: 10px !important;
    }
    .rek-filters .elementor-widget-button {
        width: 100% !important;
    }
    .rek-filters .elementor-button {
        width: 100% !important;
        /* Smaller on mobile specifically — the 44px tap-target floor made these
           look oversized here; desktop/tablet keep the larger 44px sizing. */
        min-height: 0 !important;
        padding: 8px 14px !important;
        font-size: 11px !important;
    }

    /* Hero tighter on mobile */
    .rek-hero {
        padding: 60px 20px 50px !important;
    }
    .rek-hero .elementor-heading-title {
        font-size: clamp(36px, 10vw, 56px) !important;
    }

    /* Slogan */
    .rek-slogan {
        padding: 40px 20px !important;
    }
    .rek-slogan .elementor-heading-title {
        font-size: clamp(28px, 9vw, 48px) !important;
    }
}