/*
 * Content blocks on category pages (top: above the filters, bottom: below the products), like the live shop:
 * same element styles as the brand pages (css/brand-page.css): text, FAQ accordion, news cards, buttons, video.
 * The blocks are CMS blocks "category-top-<category id>" / "category-bottom-<category id>"
 * (see templates/category/gp-category-content.phtml). Plain CSS, no Tailwind rebuild.
 */


/* ---------- Headline area + imported content blocks ---------- */
.gp-brand-top {
    margin-bottom: 1rem;
}
.gp-brand-content {
    color: #333;
    font-size: 14px;
    line-height: 20px;
}
.gp-brand-content::after {
    content: "";
    display: block;
    clear: both;
}
.gp-brand-content p {
    margin: 0 0 10px;
}
.gp-brand-content ul,
.gp-brand-content ol {
    margin: 0 0 25px;
    padding-left: 40px;
}
.gp-brand-content ul {
    list-style: disc;
}
.gp-brand-content ol {
    list-style: decimal;
}
.gp-brand-content li {
    margin: 0 0 10px;
}
.gp-brand-content a {
    color: #ff6101;
    text-decoration: none;
}
.gp-brand-content a:hover {
    text-decoration: underline;
}
.gp-brand-content img {
    max-width: 100%;
    height: auto;
}
.gp-brand-content hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #ddd;
}
.gp-brand-content h1,
.gp-brand-content h2 {
    margin: 10px 0 20px;
    color: #212121;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
}
.gp-brand-content h3 {
    margin: 10px 0 20px;
    color: #212121;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.15;
    text-transform: none;
}
.gp-brand-content h4:empty,
.gp-brand-content h2:empty {
    display: none;
}

/* generated headline (brands without imported headline content) */
.gp-brand-head__title {
    font-size: 32px;
}
.gp-brand-head__logo {
    float: right;
    width: auto;
    max-width: 300px;
    max-height: 93px;
    margin: 0 0 0 20px;
}
.gp-brand-head__sub {
    font-size: 24px;
}

/* paragraphs of the imported blocks */
.gp-brand-content .gp-cms-paragraph {
    margin: 0 0 10px;
}
.gp-brand-content .gp-teaser {
    margin: 0 0 20px;
}

/* FAQ accordion (details / summary) */
.gp-brand-content .gp-accordion {
    margin: 0 0 20px;
}
.gp-brand-content .gp-accordion details {
    border: 1px solid #dcdcdc;
    background: #fff;
}
.gp-brand-content .gp-accordion details + details {
    margin-top: -1px;
}
.gp-brand-content .gp-accordion summary {
    position: relative;
    padding: 12px 40px 12px 15px;
    color: #212121;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.gp-brand-content .gp-accordion summary::-webkit-details-marker {
    display: none;
}
.gp-brand-content .gp-accordion summary::after {
    content: "+";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff6101;
    font-size: 22px;
    font-weight: 400;
}
.gp-brand-content .gp-accordion details[open] > summary::after {
    content: "\2212";
}
.gp-brand-content .gp-accordion details > div {
    padding: 0 15px 12px;
}

/* news cards (blog articles of the brand) */
.gp-brand-content .gp-brand-news {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin: 0 0 20px;
}
.gp-brand-content .gp-brand-news__item {
    display: block;
    color: #212121;
}
.gp-brand-content .gp-brand-news__item img {
    display: block;
    width: 100%;
    margin: 0 0 8px;
}
.gp-brand-content .gp-brand-news__item span {
    font-weight: 700;
}

/* buttons */
.gp-brand-content .gp-brand-button {
    display: inline-block;
    margin: 0 10px 10px 0;
    padding: 10px 20px;
    background: #ff6101;
    color: #fff;
    font-weight: 700;
}
.gp-brand-content .gp-brand-button:hover {
    background: #e55600;
    color: #fff;
    text-decoration: none;
}


.gp-brand-bottom {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* phones: headline a bit smaller, logo above the text */
@media (max-width: 767px) {
    .gp-brand-content h1 span,
    .gp-brand-head__title {
        font-size: 20px !important;
    }
    .gp-brand-head__logo {
        float: none;
        display: block;
        margin: 0 0 10px;
        max-width: 200px;
    }
    .gp-brand-head__sub {
        font-size: 18px;
    }
}


/* banner image block (wrapper with a background colour and one image) */
.gp-brand-content .gp-brand-raw .dgm-container img {
    display: block;
    width: 100%;
    height: auto;
}

/* banner images (teaser without link) */
.gp-brand-content .gp-brand-banner {
    margin: 0 0 20px;
}
.gp-brand-content .gp-brand-banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Phones / small tablets: the imported guide layouts (padding 70px, fixed image heights, long headings) ---------- */
@media (max-width: 767px) {
    .gp-brand-top,
    .gp-brand-bottom,
    .gp-category-top,
    .gp-category-bottom {
        padding-left: 16px;
        padding-right: 16px;
    }
    .gp-brand-content {
        overflow-wrap: break-word;
    }
    .gp-brand-content h1,
    .gp-brand-content h2,
    .gp-brand-content h3 {
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.2;
    }
    .gp-brand-content h1,
    .gp-brand-content h2 {
        font-size: 20px;
    }
    .gp-brand-content h3 {
        font-size: 18px;
    }
    /* the headline spans carry inline pt sizes made for desktop */
    .gp-brand-content h1 span,
    .gp-brand-content h2 span,
    .gp-brand-content h3 span {
        font-size: inherit !important;
    }
    .gp-brand-content p,
    .gp-brand-content li,
    .gp-brand-content [style*="text-align: justify"] {
        text-align: left !important;
    }
    .gp-brand-content img[style*="float"],
    .gp-brand-content img[align] {
        float: none !important;
        display: block;
        margin: 10px auto !important;
    }
    .gp-brand-content img {
        max-width: 100% !important;
        height: auto !important;
    }
    /* layout blocks of the guides: columns can shrink, less inner padding, images fit the width */
    .gp-brand-content .gp-brand-raw div {
        min-width: 0;
    }
    .gp-brand-content .dgm-flex > div,
    .gp-brand-content .dgm-flex-3 > div,
    .gp-brand-content .dgm-flex-4 > div,
    .gp-brand-content .dgm-flex2 > div {
        min-width: 0;
        max-width: 100%;
    }
    .gp-brand-content .dgm-flex > div.inner-padding,
    .gp-brand-content .inner-padding,
    .gp-brand-content .grey-1 {
        padding: 24px 16px !important;
    }
    .gp-brand-content .inner-padding .neg-margin {
        margin: -24px -16px 24px !important;
    }
    .gp-brand-content .text-padding {
        padding: 24px 16px !important;
    }
    .gp-brand-content .text-padding > * {
        max-width: 100%;
    }
    .gp-brand-content .first-container,
    .gp-brand-content .head-padding,
    .gp-brand-content .head-padding2 {
        padding-left: 0;
        padding-right: 0;
    }
    .gp-brand-content .dgm-flex.dgm-inline-width > div.dgm-flex-order-2 img,
    .gp-brand-content .dgm-inline-width-phone .img-responsive {
        max-width: 100% !important;
        height: auto !important;
        margin: 15px auto !important;
    }
    .gp-brand-content .triangle-left::after,
    .gp-brand-content .triangle-right::after {
        display: none;
    }
    .gp-brand-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
    .gp-brand-content .gp-accordion summary {
        font-size: 15px;
    }
    /* headlines inside the layout blocks come with big sizes from the desktop CSS */
    .gp-brand-content .gp-brand-raw h1,
    .gp-brand-content .gp-brand-raw h2,
    .gp-brand-content .gp-brand-raw h3,
    .gp-brand-content .gp-brand-raw h4 {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }
}


/* tablets: long single words in the big layout headlines must not run out of their column */
@media (max-width: 1134px) {
    .gp-brand-content .gp-brand-raw h1,
    .gp-brand-content .gp-brand-raw h2,
    .gp-brand-content .gp-brand-raw h3 {
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* the layout blocks of the guide texts (dark / grey image + text rows) run over the full window width, like on live */
.gp-brand-bottom .gp-brand-raw,
.gp-category-bottom .gp-brand-raw {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
body.mpbrand-index-view,
body.catalog-category-view {
    overflow-x: clip;
}

/* tablets and phones: the image rows with captions use full width, no side margins */
@media (max-width: 1024px) {
    .gp-brand-content .dgm-flex.img-descriptive > div {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* hidden on phones / on desktop (live: display controller of the content blocks) */
@media (max-width: 767px) {
    .gp-brand-content .gp-hide-mobile {
        display: none;
    }
}
@media (min-width: 768px) {
    .gp-brand-content .gp-hide-desktop {
        display: none;
    }
}

/* image + text rows of the guide texts (live: image teaser "teaser and text") */
.gp-brand-content .gp-teaser-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: center;
    margin: 0 0 20px;
}
.gp-brand-content .gp-teaser-row__img img {
    display: block;
    width: 100%;
    height: auto;
}
.gp-brand-content .gp-teaser-row__text p {
    margin: 0;
}
@media (max-width: 767px) {
    .gp-brand-content .gp-teaser-row {
        gap: 10px;
    }
}

/* news cards (live: image teaser with N items per row): N columns on tablet and desktop, fixed columns on phones */
@media (min-width: 768px) {
    .gp-brand-content .gp-brand-news--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gp-brand-content .gp-brand-news--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gp-brand-content .gp-brand-news--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .gp-brand-content .gp-brand-news--m1 { grid-template-columns: minmax(0, 1fr); }
    .gp-brand-content .gp-brand-news--m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}