/* GRIN Slider Magazine - widget specific styles only.
   ONE outer slider level: the collections. The outer slider is the project's
   tiny-slider on .slider-container (itemsperslide=1 -> one collection per
   slide), navigated by the .tabnav arrows. Inside each collection slide the
   previews reuse the GRINspiration "Simplified Preview Slider" structure
   (iframe with isslider=true + its own .previewslidernav): desktop shows the
   two previews side by side, mobile shows one at a time via the iframe-internal
   transform slider. service-articles.php is NOT modified. This stylesheet only
   handles block padding, the 30px rhythm and reserving iframe height so an
   as-yet-unloaded slide never collapses to an empty slide. */

.slider-magazine.box {
    box-sizing: border-box;
    background: #fff;
}

.slider-magazine .contentarea {
    padding: 30px 30px 0;
}
.slider-magazine .slider-magazine__headline {
    margin-bottom: 30px;
}
/* One collection = one slide */
.slider-magazine__slide {
    width: 100%;
    box-sizing: border-box;
}

/* 30px between the collection name and its previews */
.slider-magazine__collection-name {
    color: #3daa35;
}

.slider-magazine .collection {
    color: #000;
    font-weight: 400;
}

/* iframe container - full width; the columns live inside the iframe.
   Reserve a minimum height so a slide whose iframe has not reported its height
   yet does not collapse to 0 (which showed up as an "empty" slide when the
   outer tiny-slider advanced onto a not-yet-loaded iframe). */
.slider-magazine .previews-iframe-container {
    width: 100%;
    min-height: 420px;
}

.slider-magazine .previews-iframe {
    width: 100%;
    border: 0;
    display: block;
}

@media (max-width: 1023px) {
    .slider-magazine .previews-iframe-container {
        min-height: 520px;
    }
}

.slider-magazine .control {
    background: #fff;
}