/*
 * UUTISLÖÖPPI 0.9.29-alpha — kristallinkirkas tavoite.
 * Tämä tiedosto ladataan vanhan loopit.css:n JÄLKEEN.
 * Kaikki säännöt rajattu uutispohjaan, jotta muut pohjat eivät muutu.
 * Rakenne: yläosa 12 %, valokuva 68 %, alaosa 20 %.
 */

/* 1. Julkaisulajin valinta editorissa */
.loopit-mode-switch {
    display: flex;
    gap: 8px;
    margin: 22px 0 12px;
}
.loopit-mode-switch button {
    flex: 1;
    border: 1px solid #cad5df;
    border-radius: 8px;
    padding: 12px 8px;
    font: 800 15px/1.2 system-ui, sans-serif;
    background: #fff;
    color: #173d69;
}
.loopit-mode-switch .is-active {
    background: #173d69;
    color: #fff;
}
.loopit-mode-switch button:disabled { opacity: .55; }

/* 2. Julisteen perusmitat */
.poster-style-uutinen.loopit-poster {
    aspect-ratio: 10 / 11;
    padding: 0;
    border: 0;
    background: #1d1d1d;
    box-shadow: none;
}
.poster-style-uutinen .poster-paper-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background: #1d1d1d;
    overflow: hidden;
}
.poster-style-uutinen.loopit-poster::before,
.poster-style-uutinen.loopit-poster::after,
.poster-style-uutinen .poster-paper-inner::before,
.poster-style-uutinen .poster-paper-inner::after {
    display: none;
    content: none;
}

/* 3. Yläpalkki */
.poster-style-uutinen .poster-brand {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 11.82%;
    margin: 0;
    padding: 2.6% 4%;
    display: flex;
    align-items: center;
    background: #1d1d1d;
    border: 0;
    color: #fff;
    font: 900 40px/1 Impact, "Arial Narrow", sans-serif;
    letter-spacing: -.02em;
    text-transform: none;
    transform: none;
    z-index: 30;
}
.poster-style-uutinen .poster-brand::after { display: none; }
.poster-style-uutinen .poster-news-issue {
    position: absolute;
    top: 3.3%;
    right: 4%;
    width: 43%;
    z-index: 31;
    color: #ffe4a7;
    font: 800 14px/1.15 Arial, sans-serif;
    white-space: pre-line;
    text-align: right;
}
.poster-style-uutinen .poster-kicker { display: none; }

/* 4. Valokuva: ei vaalentavaa gradienttia */
.poster-style-uutinen .poster-stage {
    position: absolute;
    inset: auto;
    top: 11.82%;
    left: 0;
    width: 100%;
    height: 68.48%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #22282d;
    isolation: isolate;
}
.poster-style-uutinen .poster-stage::before,
.poster-style-uutinen .poster-stage::after { display: none; content: none; }
.poster-style-uutinen .poster-images {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    background: transparent;
}
.poster-style-uutinen .poster-images::after { display: none; }
.poster-style-uutinen .poster-photo,
.poster-style-uutinen.images-1 .poster-photo-1 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    clip-path: none;
    transform: none;
    z-index: 1;
}
.poster-style-uutinen .poster-images:empty::before {
    content: "LISÄÄ UUTISKUVA";
    background: #263038;
    color: #b9c5cc;
}

/* 5. Punainen UUTINEN-lappu */
.poster-style-uutinen .poster-sticker {
    display: block;
    position: absolute;
    top: 5%;
    left: 4%;
    right: auto;
    width: auto;
    max-width: 48%;
    padding: 9px 14px;
    border: 0;
    background: #e43136;
    color: #fff;
    font: 900 23px/1 Impact, sans-serif;
    text-transform: uppercase;
    transform: rotate(-1.5deg);
    clip-path: none;
    z-index: 24;
}
.poster-style-uutinen .poster-sticker::after { display: none; }

/* 6. Otsikko: valkoinen, kallistettu, ei pakotettuja kapiteeleja */
.poster-style-uutinen .poster-headline,
.poster-style-uutinen.images-0 .poster-headline,
.poster-style-uutinen.images-1 .poster-headline {
    position: absolute;
    top: 27%;
    bottom: auto;
    left: 4.5%;
    width: 92.5%;
    max-width: none;
    max-height: 44%;
    padding: 0;
    margin: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    border: 0;
    clip-path: none;
    color: #fff;
    font-family: "Barlow Condensed", Impact, sans-serif;
    font-weight: 900;
    font-style: normal;
    line-height: .84;
    letter-spacing: -.025em;
    text-transform: none;
    -webkit-text-stroke: 0;
    paint-order: normal;
    text-shadow: 1px 3px 8px #0008;
    transform: skewY(-3.8deg);
    transform-origin: left center;
    z-index: 22;
}
.poster-style-uutinen .headline-line,
.poster-style-uutinen .headline-line-1,
.poster-style-uutinen .headline-line-2,
.poster-style-uutinen .headline-line-3 {
    display: block;
    position: relative;
    width: max-content;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #fff;
    font: inherit;
    font-style: normal;
    line-height: .84;
    letter-spacing: inherit;
    white-space: nowrap;
    text-transform: none;
    -webkit-text-stroke: 0;
    paint-order: normal;
    text-shadow: inherit;
    transform: none;
}
.poster-style-uutinen .headline-highlight { color: inherit; }
.poster-style-uutinen .poster-headline { visibility: hidden; }
.poster-style-uutinen.loopit-uutinen-fitted .poster-headline { visibility: visible; }

/* 7. Ingressi otsikon alla. Sijainti lasketaan JavaScriptissä. */
.poster-style-uutinen .poster-ingress,
.poster-style-uutinen.images-0 .poster-ingress,
.poster-style-uutinen.images-1 .poster-ingress {
    position: absolute;
    top: auto;
    bottom: auto;
    left: 4.5%;
    width: 90%;
    max-height: 18%;
    padding: 0;
    margin: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    color: #fff;
    font: 800 24px/1.12 "Barlow Condensed", Impact, sans-serif;
    letter-spacing: -.01em;
    text-shadow: 1px 2px 6px #000b;
    transform: none;
    z-index: 23;
}
.poster-style-uutinen .poster-callout {
    display: block;
    position: absolute;
    top: auto;
    bottom: 4%;
    left: auto;
    right: 3%;
    width: auto;
    max-width: 43%;
    padding: 11px 14px;
    border: 0;
    background: #ffdf59;
    color: #17222b;
    font: 900 22px/1 Impact, sans-serif;
    letter-spacing: 0;
    text-transform: uppercase;
    transform: rotate(-4deg);
    clip-path: none;
    z-index: 26;
}
.poster-style-uutinen .poster-callout.is-empty { display: block; }

/* 8. Alapalkki: täsmälleen 19,7 % julisteesta */
.poster-style-uutinen .poster-footer { display: none; }
.poster-style-uutinen .poster-news-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 19.7%;
    box-sizing: border-box;
    padding: 3% 4.5% 2.5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #1d1d1d;
    color: #fff;
    z-index: 28;
}
.poster-style-uutinen .poster-news-bottom-title {
    color: #ffdf59;
    font: 900 29px/1 "Barlow Condensed", Impact, sans-serif;
    text-transform: uppercase;
}
.poster-style-uutinen .poster-news-bottom-copy {
    color: #fff;
    font: 700 18px/1.25 Arial, sans-serif;
}
.poster-style-uutinen .poster-news-bottom-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #e4e7e8;
    font: 800 12.5px/1.2 Arial, sans-serif;
}

/* 9. Lööppiseinä: sama 10:11-suhde kuin editorissa */
.loopit-wall-poster-frame[data-ratio="10/11"] {
    aspect-ratio: 10 / 11;
}
.loopit-wall-poster-frame[data-ratio="10/11"] .loopit-wall-poster-canvas,
.loopit-wall-poster-frame[data-ratio="10/11"] .loopit-poster {
    height: 770px;
}

/* v0.9.31: otsikko ja ingressi samassa virtaavassa tekstiryhmässä. */
.poster-style-uutinen .poster-news-text {
    position: absolute;
    top: 27%;
    left: 4.5%;
    width: 92.5%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    z-index: 23;
    transform: none;

}
.poster-style-uutinen .poster-news-text .poster-headline,
.poster-style-uutinen.images-0 .poster-news-text .poster-headline,
.poster-style-uutinen.images-1 .poster-news-text .poster-headline {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-height: none;
    transform: skewY(-3.8deg);
    transform-origin: left center;
    flex: 0 0 auto;
}
.poster-style-uutinen .poster-news-text .poster-ingress,
.poster-style-uutinen.images-0 .poster-news-text .poster-ingress,
.poster-style-uutinen.images-1 .poster-news-text .poster-ingress {
    position: relative;
    top: auto !important;
    bottom: auto !important;
    left: auto;
    width: 96%;
    max-height: none;
    margin: 0;
    transform: none;
    color: #fff;
    font-weight: 800;
    flex: 0 0 auto;
}