/* ─── Home page ─── */

/* Background color overrides — landing page only. */
:root body,
:root[data-theme="light"] body { background: #F6E9E3; }
:root[data-theme="dark"]  body { background: #08101E; }
:root[data-theme="cream"] body { background: #F4EDE2; }
:root[data-theme="brown"] body { background: #1C1310; }
:root[data-theme="crimson"] body { background: #f3eded; }

/* Remove container-fluid gutter on the home page so the hero spans edge-to-edge. */
.ipmp-main > .container-fluid {
    padding: 0;
}

.ipmp-main {
    position: relative;
    isolation: isolate;
}

/* ── Цялата лендинг страница се събира в един екран — без вертикален скрол ──
   Само за десктоп (>=992px); на мобилно sidebar-ът е off-canvas и секциите
   се подреждат вертикално, затова там оставяме нормален скрол. */
@media (min-width: 992px) {
    .ipmp-shell {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }

    /* Съдържанието скролва вътрешно само когато не се побира (топбар/футър
       остават фиксирани). Ползваме overflow-y:auto вместо hidden, за да не се
       стига до clipping/припокриване при нисък прозорец. */
    .ipmp-main {
        min-height: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    /* Hero расте, за да запълни свободното място (центрирано вертикално), но
       НЕ се свива под съдържанието си (flex-shrink:0 + min-height:min-content),
       така че елементите никога не се припокриват — при недостиг се скролва. */
    .ipmp-main > .container-fluid {
        flex: 1 0 auto;
        min-height: min-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Keep sidebar above the full-bleed home sections — desktop grid only.
   На мобилно (<992px) sidebar-ът е off-canvas с z-index:60 от site.css и трябва
   да остане над backdrop-а (z-index:55); затова не пипаме z-index-а там, иначе
   backdrop-ът застава върху менюто и прехваща тапа върху nav линковете. */
@media (min-width: 992px) {
    .ipmp-sidebar { z-index: 10; }
}

/* ── Hero ── */
.home-hero {
    position: relative;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    align-items: center;
}

.home-hero-left {
    padding: clamp(1rem, 3.5vh, 2.75rem) 2.25rem;
    display: flex;
    flex-direction: column;
    gap: clamp(.6rem, 2vh, 1.25rem);
    background: transparent;
}

.home-logo-wrap { line-height: 1; }

.home-logo {
    width: 100%;
    max-width: 720px;
    height: auto;
    display: block;
}

.home-logo--dark { display: none; }
:root[data-theme="dark"] .home-logo--light { display: none; }
:root[data-theme="dark"] .home-logo--dark  { display: block; }
:root[data-theme="brown"] .home-logo--light { display: none; }
:root[data-theme="brown"] .home-logo--dark  { display: block; filter: brightness(0) invert(90%) sepia(20%) saturate(120%); }

.home-body {
    font-size: 1rem;
    color: var(--ipmp-muted);
    line-height: 1.65;
}

.home-body p           { margin: 0 0 .4rem; }
.home-body p:last-child { margin-bottom: 0; }

.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ── Right column — hero illustration ── */
/* Източникът е предварително изрязан до областта със съдържанието
   (background_hero*.png), затова просто го мащабираме до ширината на
   клетката. При тесен екран гридът става една колона и изображението пада
   под текста. */
.home-hero-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    overflow: hidden;
}

.home-hero-image {
    display: none;
    width: 100%;
    height: auto;
    max-height: min(100%, 52vh);
    object-fit: contain;
}

.home-hero-image--light { display: block; }
:root[data-theme="dark"]  .home-hero-image--light { display: none; }
:root[data-theme="dark"]  .home-hero-image--dark  { display: block; filter: brightness(2) contrast(1.4); }
:root[data-theme="cream"] .home-hero-image--light { display: none; }
:root[data-theme="cream"] .home-hero-image--cream { display: block; }
:root[data-theme="brown"] .home-hero-image--light { display: none; }
:root[data-theme="brown"] .home-hero-image--brown { display: block; }
:root[data-theme="crimson"] .home-hero-image--light   { display: none; }
:root[data-theme="crimson"] .home-hero-image--crimson { display: block; }

.home-how {
    padding: 0 0 .25rem;
    background: transparent;
}

.home-section-title {
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ipmp-muted);
    margin-bottom: .3rem;
}

.home-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: .1rem 1.25rem;
}

.home-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    width: 90px;
    text-align: center;
}

.home-step-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #7a1e2d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(122, 30, 45, .28);
}

.home-step-circle svg,
.home-step-circle i {
    width: 28px;
    height: 28px;
    display: flex;
}

:root[data-theme="dark"] .home-step-circle {
    background: #ffffff;
    color: var(--ipmp-surface);
    box-shadow: 0 2px 10px rgba(255, 255, 255, .18);
}

:root[data-theme="dark"] .home-step-connector svg line,
:root[data-theme="dark"] .home-step-connector svg polyline {
    stroke: #ffffff;
}

:root[data-theme="brown"] .home-step-connector svg line,
:root[data-theme="brown"] .home-step-connector svg polyline {
    stroke: var(--ipmp-text);
}

:root[data-theme="cream"] .home-step-connector svg line,
:root[data-theme="cream"] .home-step-connector svg polyline {
    stroke: var(--ipmp-accent);
}

:root[data-theme="brown"] .home-step-circle {
    background: var(--ipmp-text);
    color: var(--ipmp-surface);
    box-shadow: 0 2px 10px rgba(243, 231, 210, .18);
}

:root[data-theme="cream"] .home-step-circle {
    background: var(--ipmp-accent);
    box-shadow: 0 2px 10px rgba(107, 31, 42, .28);
}

:root[data-theme="crimson"] .home-step-circle {
    background: #9b002a;
    box-shadow: 0 2px 12px rgba(155, 0, 42, .28);
}

.home-step-label {
    font-size: .8rem;
    color: var(--ipmp-text);
    line-height: 1.35;
}

.home-step-connector {
    flex-shrink: 0;
    padding-top: 22px;
    display: flex;
    align-items: center;
}

.home-funding {
    padding: .15rem 2rem .3rem;
    text-align: center;
}

.home-funding-accent {
    color: var(--ipmp-accent);
    font-weight: 600;
    letter-spacing: .03em;
}

.home-funding-text {
    margin: 0 auto;
    max-width: 860px;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--ipmp-muted);
    padding: .55rem 1.1rem;
    border-top: 1px solid var(--ipmp-border);
    border-bottom: 1px solid var(--ipmp-border);
}

.home-partners {
    padding: 0 0;
    background: transparent;
}

.home-partners-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    flex-wrap: wrap;
}

.home-partner-link {
    display: block;
    opacity: .85;
    transition: opacity .18s ease;
}

.home-partner-link:hover {
    opacity: 1;
}

.home-partner-img {
    height: clamp(60px, 9vh, 101px);
    width: auto;
    max-width: 312px;
    object-fit: contain;
    display: block;
}

.home-partner-img--dark { display: none; }
:root[data-theme="dark"] .home-partner-img--light,
:root[data-theme="brown"] .home-partner-img--light { display: none; }
:root[data-theme="dark"] .home-partner-img--dark,
:root[data-theme="brown"] .home-partner-img--dark { display: block; }


/* ── Responsive ── */
@media (max-width: 991.98px) {
    .home-hero-grid { grid-template-columns: 58fr 42fr; }
    .home-logo      { max-width: 300px; }
}

@media (max-width: 767.98px) {
    .home-hero-grid       { grid-template-columns: 1fr; }
    .home-hero-right      { border-top: 1px solid var(--ipmp-border); }
    .home-logo            { max-width: 240px; }
    .home-step            { width: 76px; }
    .home-step-circle     { width: 46px; height: 46px; }
    .home-step-connector svg { width: 28px; }
}

@media (max-width: 599.98px) {
    .home-partners-row { flex-direction: column; gap: 1.5rem; }
}