/* RadioNordkapp Ads – felles frontend CSS
   Hentet fra fungerende new_desktop.php.
   Kun frontend-regler; editor/test-layout er ikke tatt med.
*/

/* Booking */
.rn-booking-head {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 16px;
    font-family: Arial, sans-serif;
    font-weight: 400;
}

.rn-booking-position {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    margin: 0 0 12px;
}

.rn-booking-item {
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.rn-booking-position.rn-booking-position-speakers,
.rn-booking-item.rn-booking-item-speakers {
    overflow: visible;
}

.rn-booking-item .rn-mini {
    max-width: 100%;
}

/* Felles slider */
.rn-booking-slider {
    position: relative;
    display: block;
    overflow: hidden;
    background: #fff;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
}

.rn-booking-slider .rn-mini-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.rn-booking-slider .rn-mini-viewport {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    z-index: 1;
    overflow: hidden;
}

.rn-booking-slider .rn-mini-layer {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    will-change: opacity, transform;
}

.rn-booking-slider .rn-mini-layer.is-current {
    opacity: 1;
}

/* Mini 140 */
.rn-mini {
    position: relative;
    display: block;
    width: 140px;
    height: 250px;
    overflow: hidden;
    background: #fff;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
}

.rn-mini-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.rn-mini-viewport {
    position: absolute;
    left: 0;
    top: 0;
    width: 140px;
    height: 250px;
    transform-origin: 0 0;
    z-index: 1;
    overflow: hidden;
}

.rn-mini-layer {
    position: absolute;
    inset: 0;
    width: 140px;
    height: 250px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transform: translate(0,0);
    will-change: opacity, transform;
}

.rn-mini-layer.is-current {
    opacity: 1;
}

.rn-mini-textbox {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    line-height: 1.08;
}

/* Kommune */
.rk-kommune { display:flex; width:100%; background:#fff; }
.rk-left { flex:1; min-width:0; padding:30px 20px; box-sizing:border-box; }
.rk-right { width:200px; flex:0 0 200px; background:linear-gradient(#fce100,#e40329); position:relative; min-height:220px; }
.rk-right img { position:absolute; left:0; bottom:0; width:100%; height:auto; }
.rk-head { text-transform:uppercase; color:#e40329; font:bold 26px "Times New Roman",serif; text-align:center; margin:0 0 16px; }
.rk-sub { font:bold 19px "Times New Roman",serif; text-align:center; margin:0 0 16px; }
.rk-body { font:17px/1.35 "Times New Roman",serif; }

/* Betalt innhold */
.rnpc-link { display:block; text-decoration:none!important; color:inherit!important; }
.rnpc { position:relative; display:flex; width:100%; height:260px; background:#eee; overflow:hidden; }
.rnpc-label { position:absolute; z-index:2; top:0; left:0; background:#26363c; color:#fff; font:700 10px Arial; padding:5px 8px; }
.rnpc-img,.rnpc-copy { width:50%; box-sizing:border-box; }
.rnpc-img { order:2; }
.rnpc-img img { width:100%; height:100%; object-fit:cover; object-position:right center; }
.rnpc-copy { order:1; padding:28px 20px 20px; display:flex; align-items:center; overflow:hidden; }
.rnpc-copy-inner { width:100%; max-height:100%; overflow:hidden; }
.rnpc h2 { margin:0 0 10px; line-height:1.12; }
.rnpc-body { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; }

/* Bildebanner */
.rnib { display:block; width:100%; }
.rnib img { display:block; width:100%; height:auto; }
.rnib-two { display:flex; }
.rnib-two > a,.rnib-two > img { flex:1 1 0; min-width:0; }

/* Kundepanel */
.rnkp-wrap { position:relative; width:100%; overflow:hidden; }
.rnkp { position:absolute; left:0; top:0; width:410px; overflow:hidden; box-sizing:border-box; transform-origin:top left; background:#fff; }
.rnkp-logo { position:absolute; z-index:4; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.rnkp-logo img { width:100%; max-width:100%; height:auto; object-fit:contain; }
.rnkp-scroll { position:absolute; left:0; right:0; overflow:hidden; cursor:grab; }
.rnkp-content { padding:10px; transform-origin:top left; }
.rnkp-content img { max-width:100%; height:auto; }
.rnkp-bottom { position:absolute; left:0; right:0; bottom:0; }

/* Speakers Corner */
.rnsc { width:880px; max-width:100%; display:grid; grid-template-columns:minmax(0,1fr) var(--rnsc-side); gap:var(--rnsc-gap); align-items:stretch; }
.rnsc-medium,.rnsc-side { height:var(--rnsc-h); min-width:0; box-sizing:border-box; }
.rnsc-medium { overflow:hidden; }
.rnsc-medium > * { max-width:100%; }
.rnsc-side { position:relative; overflow:visible; }
.rnsc-text { height:100%; box-sizing:border-box; }
.rnsc-text img { max-width:100%; height:auto; }
.rnsc-icon { position:absolute; z-index:3; top:-18px; right:4px; max-width:54px; max-height:54px; height:auto; }

/* =========================================================
   MOBIL – regler fra fungerende new_mobil.php
   ========================================================= */

/* Samme bannerfonter som desktop */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato:wght@400;700&family=Merriweather:wght@400;700&family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&family=Oswald:wght@400;700&family=Playfair+Display:wght@400;700&family=Poppins:wght@400;700&family=Raleway:wght@400;700&family=Roboto:wght@400;700&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; 
    background: #ffffff;
}
body {
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    color: #111;
}
.mobile-page {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    min-height: 100vh;
}

/* HEADER */
.mobile-header {
    height: 64px;
    display: grid;
    grid-template-columns: 55px 1fr 55px;
    align-items: center;
    background: #111;
}
.mobile-header-button {
    color: #fff;
    text-align: center;
    font-size: 25px;
    text-decoration: none;
}
.mobile-logo { text-align: center; }
.mobile-logo img {
    display: inline-block;
    max-width: 210px;
    max-height: 46px;
}

/* NYHETER */
.news {
    margin: 0;
    padding: 12px 12px 18px;
    border-bottom: 1px solid #ddd;
}
.news-image {
    display: block;
    width: 100%;
    height: auto;
}
.news-link {
    color: #111;
    text-decoration: none;
}
.news h1 {
    margin: 9px 0 0;
    font-size: 25px;
    line-height: 1.08;
    font-weight: 700;
}

/* MOBILANNONSER – samme oppbygning som desktop:
   egen headline-div + egen annonse-div. */
.mobile-booking-block {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.mobile-booking-head {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 400;
}
.mobile-booking-position {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--mob-gap);
}
.mobile-booking-item {
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}
.mobile-booking-item[style*="--mobile-w:596"] { flex:0 0 100%; }
.mobile-booking-item[style*="--mobile-w:190"] { flex:0 0 calc((100% - (2 * var(--mob-gap))) / 3); }
.mobile-booking-item[style*="--mobile-w:293"] { flex:0 0 calc((100% - var(--mob-gap)) / 2); }
.mobile-booking-item > * { max-width:100%; }
.rn-mobile-imagebanner { display:flex; width:100%; gap:var(--mob-gap); }
.rn-mobile-imagebanner a { display:block; flex:1 1 0; min-width:0; }
.rn-mobile-imagebanner img { display:block; width:100%; height:auto; }
.rn-mobile-imagebanner:not(.is-two) > a,
.rn-mobile-imagebanner:not(.is-two) > img { width:100%; flex:0 0 100%; }
.mobile-not-ready { padding:20px; background:#eee; font-size:12px; }

/*
 * MiniBanner:
 * Ytre element er responsivt 140:250.
 * Innholdet tegnes alltid i originale 140x250-koordinater
 * og skaleres deretter til tilgjengelig bredde.
 */
.rn-mini {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 140 / 250;
    overflow: hidden;
    background: #fff;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
}
.rn-mini-empty {
    background: transparent;
}
.rn-mini-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.rn-mini-viewport {
    position: absolute;
    left: 0;
    top: 0;
    width: 140px;
    height: 250px;
    transform-origin: 0 0;
    z-index: 1;
    overflow: hidden;
}
.rn-mini-layer {
    position: absolute;
    inset: 0;
    width: 140px;
    height: 250px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transform: translate(0,0);
    will-change: opacity, transform;
}
.rn-mini-layer.is-current { opacity: 1; }

.rn-mini-textbox {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    line-height: 1.08;
}

/* FOOTER */
.footer {
    margin-top: 25px;
    padding: 25px 15px;
    background: #222;
    color: #fff;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
}

/* Kundepanel mobil: alltid én per plass, 410 px og midtstilt */
.mobile-booking-item.type-kundepanel{width:410px!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;flex:0 0 410px!important}
.rnkps-mobile-single{display:block;width:410px;max-width:100%;margin:0 auto}
.rnkp-test{position:relative;overflow:hidden;box-sizing:border-box;width:410px;max-width:100%;min-width:0}
.rnkp-test-logo{position:absolute;z-index:5;left:0;right:0;top:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.rnkp-test-logo a{pointer-events:auto;height:100%;width:100%;display:flex;align-items:center;justify-content:center}
.rnkp-test-logo img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain}
.rnkp-test-viewport{position:absolute;left:0;right:0;overflow:hidden;cursor:grab;touch-action:pan-y}
.rnkp-test-viewport.rnkp-test-scrollbar{overflow-y:auto}
.rnkp-test-viewport.dragging{cursor:grabbing;user-select:none}
.rnkp-test-track{position:relative;will-change:transform}
.rnkp-test-copy{padding:10px;box-sizing:border-box;transform-origin:top left;overflow-wrap:anywhere}
.rnkp-test-copy img{max-width:100%;height:auto}
.rnkp-test-bottom{position:absolute;z-index:6;left:0;right:0;bottom:0}