html,
body {
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
}

button,
input {
    font:inherit;
}

button {
    -webkit-tap-highlight-color:transparent;
}

img,
video,
iframe {
    max-width:100%;
}

.source-row>div:nth-child(2) {
    min-width:0;
}

@media (hover:none) {

    .card:hover {
        transform:none;
    }

    .card:hover img {
        transform:none;
    }
}

/* TABLET */

@media(max-width:820px) {

    .topbar {
        padding-inline:20px;
    }

    .hero {
        gap:28px;
    }

    .update {
        min-width:225px;
    }

    .content h2 {
        font-size:19px;
    }

    .admin-main {
        padding-inline:20px;
    }

    .admin-panel,
    .stats article {
        padding:22px;
    }

    .source-row button,
    .source-add button,
    .admin-head button {
        min-height:44px;
    }
}

/* MOBILE */

@media(max-width:680px) {

    html,
    body {
        overflow-x:hidden;
    }

    .topbar {
        height:64px;
        padding-inline:14px;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .brand {
        min-width:0;
        flex:0 0 auto;
    }

    .brand>span:last-child {
        display:none;
    }

    .brand-mark {
        width:36px;
        height:36px;
    }

    .status-strip {
        margin-left:auto;
        min-width:0;
        max-width:64%;
        overflow:hidden;
    }

    .status-strip>div {
        display:none;
    }

    .status-strip .clock {
        display:flex;
        min-width:auto;
        border:0;
        padding:8px 2px;
        align-items:flex-end;
    }

    .clock small {
        display:none;
    }

    .clock b {
        font-size:18px;
    }

    main {
        width:100%;
        max-width:100%;
        padding-inline:14px;
        overflow:visible;
    }

    .hero {
        min-height:0;
        display:block;
        padding:48px 0 36px;
    }

    .hero h1 {
        font-size:clamp(42px,14vw,54px);
        margin:22px 0 18px;
        max-width:100%;
        overflow-wrap:anywhere;
    }

    .lead {
        font-size:15px;
        line-height:1.55;
        margin-bottom:0;
        max-width:100%;
    }

    .update {
        width:100%;
        max-width:100%;
        min-width:0;
        margin:28px 0 0;
        padding:17px 18px;
    }

    .update > div {
        min-width:0;
    }

    .update button {
        width:44px;
        height:44px;
        flex:0 0 44px;
    }

    /* FILTERS
       Filterknappene wrapper nå i stedet for
       å lage horisontal scrolling.
    */

    .filters {
        width:100%;
        max-width:100%;
        min-width:0;
        margin:0;
        padding:18px 0;
        display:flex;
        flex-wrap:wrap;
        gap:7px;
        overflow:visible;
    }

    .filters button {
        min-height:44px;
        padding:10px 16px;
        max-width:100%;
    }

    /* NEWS */

    .news-grid {
        width:100%;
        max-width:100%;
        grid-template-columns:minmax(0,1fr);
        gap:14px;
        padding-bottom:50px;
    }

    .card {
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .featured {
        grid-column:auto;
    }

    .card>a,
    .featured>a {
        display:flex;
        flex-direction:column;
        width:100%;
        min-width:0;
    }

    .image,
    .featured .image {
        width:100%;
        max-width:100%;
        height:auto;
        min-height:0;
        aspect-ratio:16/9;
    }

    .content,
    .featured .content {
        width:100%;
        max-width:100%;
        min-width:0;
        padding:19px 18px 68px;
    }

    .content h2,
    .featured .content h2 {
        font-size:21px;
        line-height:1.28;
        overflow-wrap:anywhere;
    }

    .content p {
        font-size:13px;
        margin-bottom:18px;
        overflow-wrap:anywhere;
    }

    .meta {
        font-size:10px;
        gap:12px;
        flex-wrap:wrap;
    }

    .meta time {
        white-space:nowrap;
    }

    .read {
        padding-right:0;
    }

    /* RATING */

    .rating {
        left:18px;
        right:18px;
        bottom:15px;
        max-width:calc(100% - 36px);
    }

    .rating .domain-less {
        height:40px;
        max-width:none;
        min-width:0;
        flex:1;
        font-size:9px;
    }

    .rating .vote {
        width:40px;
        height:40px;
        flex-shrink:0;
        font-size:21px;
    }

    /* FOOTER */

    footer {
        width:auto;
        max-width:none;
        margin-inline:14px;
        padding:28px 0;
        display:block;
        line-height:1.5;
    }

    footer p {
        margin:7px 0;
    }

    .mini {
        margin-bottom:20px;
    }

    /* ADMIN */

    .admin-head {
        padding:10px 14px;
        gap:8px;
        max-width:100%;
    }

    .admin-head .brand {
        flex:0 0 auto;
    }

    .admin-actions {
        gap:6px;
        min-width:0;
    }

    .admin-head button {
        padding:10px 12px;
    }

    .admin-head .fetch-button {
        width:44px;
    }

    .admin-main {
        width:100%;
        max-width:100%;
        padding:38px 14px;
    }

    .admin-main>h1 {
        font-size:42px;
        margin:16px 0 30px;
        overflow-wrap:anywhere;
    }

    .stats {
        gap:8px;
    }

    .stats article {
        padding:18px;
        min-width:0;
    }

    .stats b {
        font-size:25px;
    }

    .admin-panel {
        padding:19px;
        min-width:0;
    }

    .admin-grid {
        gap:12px;
        min-width:0;
    }

    .bar-row {
        grid-template-columns:88px minmax(0,1fr) 24px;
        gap:8px;
    }

    .topic-list {
        gap:9px;
    }

    .topic-list article {
        padding:17px;
        min-width:0;
    }

    .source-row {
        grid-template-columns:10px minmax(0,1fr);
        gap:8px 12px;
        padding:18px 0;
        min-width:0;
    }

    .source-row p {
        white-space:normal;
        overflow-wrap:anywhere;
    }

    .source-cat,
    .source-row form {
        grid-column:2;
        min-width:0;
    }

    .source-row form {
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    }

    .source-row button {
        width:100%;
        min-width:0;
    }

    .source-add.simple {
        grid-template-columns:minmax(0,1fr);
        gap:12px;
    }

    .source-add input {
        width:100%;
        min-width:0;
        height:46px;
        font-size:16px;
    }

    .source-add button {
        height:46px;
    }

    .section-title {
        align-items:center;
        min-width:0;
    }

    .login {
        width:calc(100% - 28px);
        max-width:100%;
        padding:28px 22px;
        margin-top:8vh;
    }

    .login h1 {
        font-size:36px;
        margin:35px 0 22px;
    }
}

/* VERY SMALL MOBILE */

@media(max-width:370px) {

    .hero h1 {
        font-size:40px;
    }

    .eyebrow {
        font-size:9px;
    }

    .rating {
        left:14px;
        right:14px;
        max-width:calc(100% - 28px);
    }

    .rating .domain-less {
        padding-inline:6px;
        font-size:8px;
    }

    .content,
    .featured .content {
        padding-inline:15px;
    }

    .admin-head button {
        padding-inline:9px;
    }

    .stats {
        grid-template-columns:1fr 1fr;
    }

    .stats article:last-child {
        grid-column:1/-1;
    }

    .section-title>span {
        display:none;
    }
}

@media(max-width:680px){

    * {
        max-width:100%;
    }

    html,
    body {
        width:100%;
        max-width:100%;
        overflow-x:clip;
    }

    .topbar,
    main,
    .hero,
    .filters,
    .news-grid,
    .card,
    .card > a,
    .content,
    .image,
    footer {
        min-width:0;
        max-width:100%;
    }
}