/* ===================================================================
   DATIP-V3 — BUILDING BLOCKS (consolidated, reusable blocks)
   A curated subset of Porto + our own components. Compose pages from
   these blocks + modifiers instead of writing new CSS per block.
   Non-breaking: lives ALONGSIDE the existing .datip-* classes; the old
   classes are removed only once every page has been migrated.
   Typography comes from the tokens in custom.css (--fs-body/-lead/-card-title).
   Blocks: band · icon · tile · split · checklist · featurelist · cta
           (+ steps reused from custom.css).
   =================================================================== */

/* ---- 1. BAND — section band: vertical rhythm + background ---------- */
.datip-band {
    padding: 5rem 0;
}
.datip-band--grey  { background: var(--brand-grey); }
.datip-band--white { background: var(--brand-white); }
.datip-band--dark {
    background: linear-gradient(180deg, var(--header-dark-top) 0%, var(--header-dark-bottom) 100%);
    color: var(--brand-white);
}
.datip-band--roomy { padding: 5.5rem 0; }              /* a bit airier (e.g. "why") */
.datip-band--tight { padding: 3rem 0 1.5rem; }         /* short intro band */

@media (max-width: 767px) {
    .datip-band { padding: 3.5rem 0; }
    .datip-band--roomy { padding: 3.5rem 0; }
}

/* ---- 2. ICON — one icon holder; style/shape/size via modifiers -----
   Expects an inline Lucide <svg> child. Default: filled purple circle
   with a white glyph (48px). */
.datip-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-purple);
    color: var(--brand-white);
}
.datip-icon svg { width: 22px; height: 22px; }

/* style */
.datip-icon--subtle   { background: var(--primary-subtle); color: var(--brand-purple); }
.datip-icon--bordered { background: var(--brand-white); border: 1px solid #e3e4e8; color: var(--brand-purple); }
.datip-icon--neutral  { background: var(--brand-grey); color: var(--brand-navy); }   /* problem / pain point */
.datip-icon--on-dark  { background: transparent; color: var(--accent-on-dark); }     /* on a dark band */

/* shape */
.datip-icon--square { border-radius: 12px; }

/* size */
.datip-icon--sm { width: 44px; height: 44px; }
.datip-icon--sm svg { width: 22px; height: 22px; }
.datip-icon--md { width: 52px; height: 52px; }
.datip-icon--md svg { width: 26px; height: 26px; }
.datip-icon--lg { width: 64px; height: 64px; }
.datip-icon--lg svg { width: 30px; height: 30px; }
.datip-icon--on-dark svg { width: 2.5rem; height: 2.5rem; }  /* bigger glyph, no holder shape (trust bar) */

/* ---- 3. TILE — card: bordered (default) or centered --------------- */
.datip-tile {
    height: 100%;
    background: var(--brand-white);
    border: 1px solid #e3e4e8;
    border-radius: 8px;
    padding: 2rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Unified hover on EVERY tile: subtle lift + soft EVEN purple glow. Two layers:
   a gentle drop shadow for the lift + an all-around ambient glow (no negative spread,
   so it surrounds the card evenly instead of showing only as a bottom edge). Variants
   (--centered/--elevated) differ only in their RESTING shadow; the hover is shared. */
.datip-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(109, 40, 217, 0.18), 0 0 16px rgba(109, 40, 217, 0.10);
}

.datip-tile__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.datip-tile__title {
    font-family: 'Lexend Exa', 'Poppins', sans-serif;
    color: var(--brand-navy);
    font-weight: 700;
    font-size: var(--fs-card-title);
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-transform: none;
    margin: 0;
}

.datip-tile__text {
    color: var(--datip-ai-text-secondary);
    line-height: 1.7;
    margin: 0;
}

.datip-tile__link {
    display: inline-block;
    margin-top: 1.25rem;
    color: var(--brand-purple);
    font-weight: 600;
}
.datip-tile__link:hover { color: var(--primary-hover); }

/* centered variant (icon on top, centered). Resting shadow only; hover is the
   shared .datip-tile:hover glow. */
.datip-tile--centered {
    text-align: center;
    padding: 2.5rem 1.75rem;
    box-shadow: 0 2px 8px rgba(16, 24, 39, 0.04);
}
.datip-tile--centered .datip-icon { margin-bottom: 1.25rem; }
.datip-tile--centered .datip-tile__title { margin-bottom: 0.75rem; }

/* problem variant: neutral (navy on grey) icon inside the tile */
.datip-tile--problem .datip-icon {
    background: var(--brand-grey);
    color: var(--brand-navy);
}

/* elevated variant: stronger RESTING shadow, left-aligned (unlike --centered).
   Absorbs the old .datip-capbox card. Hover is the shared .datip-tile:hover glow. */
.datip-tile--elevated {
    box-shadow: 0 12px 30px -14px rgba(16, 24, 39, 0.18);
}

/* a checklist right after a tile title gets a small gap (old capbox spacing) */
.datip-tile__title + .datip-checklist {
    margin-top: 1.25rem;
}

/* ---- 4. SPLIT — two-column text + media -----------------------------
   Put a .datip-split inside a .container. Default: text left, media right.
   --media-left swaps them (media first on desktop, text still first on mobile). */
.datip-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.datip-split__media { width: 100%; max-width: 440px; margin: 0 auto; }
.datip-split__media img { display: block; width: 100%; height: auto; }

.datip-split--media-left .datip-split__text  { order: 2; }
.datip-split--media-left .datip-split__media { order: 1; }

@media (max-width: 991px) {
    .datip-split { grid-template-columns: 1fr; gap: 2rem; }
    /* on mobile: always text first, media below */
    .datip-split--media-left .datip-split__text  { order: 0; }
    .datip-split--media-left .datip-split__media { order: 0; }
}

/* ---- 5a. CHECKLIST — compact list with leading check icons ----------
   <ul class="datip-checklist"><li><svg .../><span>…</span></li></ul> */
.datip-checklist { list-style: none; margin: 0; padding: 0; }
.datip-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    color: var(--datip-ai-text-secondary);
    line-height: 1.55;
}
.datip-checklist li:last-child { margin-bottom: 0; }
.datip-checklist li svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--brand-purple);
}

/* ---- 5b. FEATURELIST — icon + title + text rows, divided ------------
   Each item pairs a .datip-icon (use --sm) with a title + text. */
.datip-featurelist { list-style: none; margin: 0; padding: 0; }
.datip-featurelist__item {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #dcdde1;
}
.datip-featurelist__item:first-child { padding-top: 0; }
.datip-featurelist__item:last-child { padding-bottom: 0; border-bottom: none; }
.datip-featurelist__title {
    font-family: 'Lexend Exa', 'Poppins', sans-serif;
    color: var(--brand-navy);
    font-weight: 700;
    font-size: var(--fs-card-title);
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-transform: none;
    margin: 0 0 0.35rem;
}
.datip-featurelist__text {
    font-size: var(--fs-body) !important;   /* body 15px; defeats stray .text-4 (see section-intro) */
    color: var(--datip-ai-text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* ---- 6. CTA — dark navy→purple panel; place inside a .datip-band ----
   <section class="datip-band datip-band--grey"><div class="container">
     <div class="datip-cta"> … </div></div></section> */
.datip-cta {
    /* Full content width, matching every other section (the .container is 1280px
       site-wide). No max-width cap here on purpose - the inner __text is already
       capped at 720px and centered, so the panel spans the full band. */
    text-align: center;
    background: linear-gradient(135deg, var(--header-dark-top) 0%, var(--header-dark-bottom) 100%);
    border-radius: 16px;
    padding: 3.5rem 2rem;
    box-shadow: 0 30px 60px -22px rgba(109, 40, 217, 0.45);
}
.datip-cta__title {
    font-family: 'Lexend Exa', 'Poppins', sans-serif;
    color: var(--brand-white);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-wrap: balance;
    margin: 0 0 1rem;
}
.datip-cta__text {
    font-size: var(--fs-body) !important;   /* body 15px; defeats stray .text-4 (see section-intro) */
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    max-width: 720px;
    text-wrap: pretty;
    margin: 0 auto 2rem;
}
.datip-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
/* buttons on the panel: primary = white fill, secondary = white outline */
.datip-cta .btn-light {
    background: var(--brand-white) !important;
    border: 2px solid var(--brand-white) !important;
    color: var(--brand-navy) !important;
    font-weight: 600;
}
.datip-cta .btn-light:hover {
    background: var(--brand-grey) !important;
    border-color: var(--brand-grey) !important;
    color: var(--brand-navy) !important;
}
.datip-cta .btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    color: var(--brand-white) !important;
}
.datip-cta .btn-outline-light:hover {
    background: var(--brand-white) !important;
    border-color: var(--brand-white) !important;
    color: var(--brand-navy) !important;
}
@media (max-width: 575px) {
    .datip-cta { padding: 2.5rem 1.25rem; }
}

/* ---- 7. STEPS — numbered vertical timeline (moved here from custom.css
   2026-07-20 so the whole reusable component library lives in one file).
   The connecting line is a translucent navy, so it stays visible on ANY band
   (white OR grey) — no "steps must be on a white band" constraint. */
.datip-steps {
    max-width: 1080px;
    margin: 0 auto;
}

.datip-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding-bottom: 2.75rem;
}

.datip-step:last-child {
    padding-bottom: 0;
}

/* connecting line between the icon circles (num 48 + gap 20 + icon-half 28 = 96) */
.datip-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 56px;
    bottom: 0;
    left: 96px;
    width: 2px;
    background: rgba(16, 24, 39, 0.15);   /* translucent navy: visible on white AND grey bands */
    transform: translateX(-1px);
}

.datip-step__num {
    flex: 0 0 48px;
    width: 48px;
    text-align: center;
    font-family: 'Lexend Exa', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 56px;
    color: var(--brand-purple);
}

.datip-step__icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand-white);
    border: 1.5px solid var(--brand-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-purple);
    position: relative;
    z-index: 1;
}

.datip-step__icon svg {
    width: 26px;
    height: 26px;
}

/* content = title column + description column side by side (comp layout) */
.datip-step__content {
    flex: 1 1 auto;
    display: flex;
    gap: 1.5rem;
    padding-top: 0.3rem;
}

.datip-step__label {
    flex: 0 0 38%;
}

.datip-step__title {
    font-family: 'Lexend Exa', 'Poppins', sans-serif;
    color: var(--brand-navy);
    font-weight: 700;
    font-size: var(--fs-card-title);
    letter-spacing: -0.01em;
    text-transform: none;
    margin: 0 0 0.2rem;
}

.datip-step__subtitle {
    color: var(--brand-purple);
    font-weight: 500;
    margin: 0;
}

.datip-step__text {
    flex: 1 1 auto;
    color: var(--datip-ai-text-secondary);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 767px) {
    .datip-step__content {
        flex-direction: column;
        gap: 0.4rem;
    }

    .datip-step__label {
        flex: 1 1 auto;
    }

    .datip-step__num {
        font-size: 2rem;
    }
}

/* ---- 8. SECTION HEAD — shared centered section heading (moved from custom.css
   2026-07-20). Used at the top of most content sections. */
.datip-section-head {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 3rem;
}

.datip-section-title {
    font-family: 'Lexend Exa', 'Poppins', sans-serif;
    color: var(--brand-navy);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    line-height: 1.2;
    text-wrap: balance;
    margin-bottom: 1rem;
}

.datip-section-intro {
    /* Body size (15px). !important defeats Porto's `.text-4 {1.2em!important}` so a
       stray text-4 in content can't inflate section intros - the component owns its
       size. (Once text-4 is cleaned from all content, this !important can be dropped.) */
    font-size: var(--fs-body) !important;
    color: var(--datip-ai-text-secondary);
    line-height: 1.7;
    text-wrap: pretty;
    margin: 0;
}

/* a section-head as the sole content of a --tight band drops its bottom margin
   (the band's short bottom padding provides the spacing) - matches the old
   .datip-benefits--tight .datip-section-head behaviour. */
.datip-band--tight .datip-section-head {
    margin-bottom: 0;
}

/* ---- 9. PAGE HEADER — compact dark header for interior pages (moved from
   custom.css 2026-07-20). Same gradient as the hero, so every page opens with
   authority. NOTE: the lead font-size (.datip-hero__lead, .datip-page-header__lead)
   and the .datip-hero__accent span stay in custom.css - they are shared with the
   hero/typography layer. */
.datip-page-header {
    background: linear-gradient(180deg, var(--header-dark-top) 0%, var(--header-dark-bottom) 100%);
    padding: 4rem 0 3.5rem;
    text-align: center;
}

.datip-page-header h1 {
    font-family: 'Lexend Exa', 'Poppins', sans-serif;
    color: var(--brand-white);
    font-weight: 700;
    font-size: clamp(1.8rem, 2.6vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
    max-width: 800px;
    margin: 0 auto 1rem;
}

.datip-page-header__lead {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    max-width: 720px;
    text-wrap: pretty;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .datip-page-header {
        padding: 2.5rem 0 2rem;
    }
}

/* ---- 10. LOGOBAR — monochrome "built with" strip ----------------------------
   DEFAULT is a STATIC centered, wrapping row of muted navy marks (robust for a
   handful of logos). Add --scroll ONLY when there are enough logos to fill the
   width (the seamless -50% loop needs the item set duplicated in markup and one
   copy wider than the viewport); with few marks --scroll leaves visible gaps.
   Logos are <img> (navy baked in → opacity is the only lever); concept marks use
   a Lucide line-icon + label. */
.datip-logobar__track {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem 4rem;
}
.datip-logobar__item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--brand-navy);
    opacity: 0.5;
    font-family: 'Lexend Exa', 'Poppins', sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: color 0.2s ease, opacity 0.2s ease;
}
/* muted navy at rest, brand purple on hover — logos + line-icons recolour together */
.datip-logobar__item:hover { color: var(--brand-purple); opacity: 1; }
.datip-logobar__item svg { width: 44px; height: 44px; }

/* logos rendered as a CSS mask so `color` (currentColor) drives their colour;
   the SVG's own fill is irrelevant to a mask (only its shape/alpha is used). */
.datip-logobar__logo {
    display: inline-block;
    width: 56px;
    height: 56px;
    background-color: currentColor;
    -webkit-mask: var(--logo) center / contain no-repeat;
            mask: var(--logo) center / contain no-repeat;
}
.datip-logobar__logo--python      { --logo: url("/datip-v3/images/logos/python.svg"); }
.datip-logobar__logo--postgresql  { --logo: url("/datip-v3/images/logos/postgresql.svg"); }
/* .NET is a wide, short wordmark (viewBox cropped tight in the SVG) → give it a
   wider, shorter box so it reads clearly instead of sitting tiny in a square. */
.datip-logobar__logo--dotnet      { --logo: url("/datip-v3/images/logos/dotnet.svg"); width: 84px; height: 38px; }

/* --scroll: opt-in auto-scrolling marquee (needs a duplicated, viewport-filling set) */
.datip-logobar--scroll {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.datip-logobar--scroll .datip-logobar__track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    gap: 4rem;
    animation: datip-logobar-scroll 32s linear infinite;
}
.datip-logobar--scroll:hover .datip-logobar__track { animation-play-state: paused; }
@keyframes datip-logobar-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .datip-logobar--scroll .datip-logobar__track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
    }
}