/*
 * Interactive Power Calculator - "Which power station suits you?" banner on category pages
 * (CLAUDE.md §11.99): a 1:1 build of the "Desktop" and "Mobile" blocks of the user's design,
 * Instructions/Powerstation Banner (standalone).html. Registered only on a category page
 * that actually shows the banner (hookActionFrontControllerSetMedia()).
 *
 * Every value below is the design's own: #fdeee9 box with a 1px #f7ded5 border and 3px
 * radius, 54px white icon disc with the 26x30 icon, Open Sans 700 19px/1.3 #e73e24 title,
 * 400 14px/1.45 #555b60 text, #e73e24 button 700 15px with 14px 22px padding and an 18x21
 * white icon; hover #c8321b, active #b02c17 at scale .985. The mobile block (design frame
 * 390px) stacks: no disc, 17px/13px type, full-width 48px-tall centred button.
 */

.ge-ipc-cat-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    box-sizing: border-box;
    /* 10px below (user's request 2026-09-22) - the same rhythm as the theme's .block-category
       card above it; the brand-logo block after it has no top margin of its own. */
    margin: 0 0 10px;
    padding: 16px 18px;
    background: #fdeee9;
    border: 1px solid #f7ded5;
    border-radius: 3px;
    font-family: "Open Sans", sans-serif;
}

.ge-ipc-cat-banner__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #ffffff;
    color: #e73e24;
}

.ge-ipc-cat-banner__icon > svg,
.ge-ipc-cat-banner__icon > .ge-ipc-icon--url {
    display: block;
    width: 26px;
    height: 30px;
    stroke-width: 1.6;
}

/* Icon given as a file URL in "Manage module" (§11.99 addendum): CSS mask + currentColor, so
   it takes each placement's colour (red disc, white button) like the inline icon; browsers
   without mask support get the file as a plain background. Duplicated in header-button.css
   because either stylesheet may be the only one on a page. */
.ge-ipc-icon--url {
    background: var(--ge-ipc-icon) no-repeat center / contain;
}

@supports ((mask-image: url("x.svg")) or (-webkit-mask-image: url("x.svg"))) {
    .ge-ipc-icon--url {
        background: currentColor;
        -webkit-mask: var(--ge-ipc-icon) no-repeat center / contain;
        mask: var(--ge-ipc-icon) no-repeat center / contain;
    }
}

.ge-ipc-cat-banner__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ge-ipc-cat-banner__title {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: #e73e24;
    text-transform: none;
}

.ge-ipc-cat-banner__text {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    color: #555b60;
}

.ge-ipc-cat-banner__btn,
.ge-ipc-cat-banner__btn:visited {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    padding: 14px 22px;
    border: none;
    border-radius: 5px;
    background: #e73e24;
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 140ms ease-out, transform 100ms ease-out;
}

.ge-ipc-cat-banner__btn:hover,
.ge-ipc-cat-banner__btn:focus {
    background: #c8321b;
    color: #fff;
    text-decoration: none;
}

.ge-ipc-cat-banner__btn:active {
    transform: scale(0.985);
    background: #b02c17;
    color: #fff;
}

.ge-ipc-cat-banner__btn:focus-visible {
    outline: 2px solid #222222;
    outline-offset: 2px;
}

.ge-ipc-cat-banner__btn-icon {
    flex: 0 0 auto;
    display: inline-flex;
    line-height: 0;
    color: #fff;
}

.ge-ipc-cat-banner__btn-icon > svg,
.ge-ipc-cat-banner__btn-icon > .ge-ipc-icon--url {
    display: block;
    width: 18px;
    height: 21px;
    stroke-width: 1.8;
}

/* Design "Mobile" block (390px frame): stacked, no icon disc, smaller type, full-width
   48px button with a 10px icon gap. Applied below the theme's tablet breakpoint. */
@media (max-width: 767px) {
    .ge-ipc-cat-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }

    .ge-ipc-cat-banner__icon {
        display: none;
    }

    /* Type sizes reduced from the mock-up's 17/13/15px on the user's request (2026-09-22). */
    .ge-ipc-cat-banner__title {
        font-size: 14px;
    }

    .ge-ipc-cat-banner__text {
        font-size: 12px;
    }

    /* Lower than the mock-up's 48px button (user's request 2026-09-22): min-height 40px and
       10px vertical padding give a 41px button (the 21px icon sets the inner height). */
    .ge-ipc-cat-banner__btn,
    .ge-ipc-cat-banner__btn:visited {
        width: 100%;
        min-height: 40px;
        justify-content: center;
        gap: 10px;
        padding: 10px 16px;
        font-size: 13px;
        white-space: normal;
        text-align: center;
    }
}