/* ========================================
   CYKELKALENDEREN 2027
   LØBSSIDE
======================================== */

.ck-race27 {
    --forest: #18392b;
    --forest-dark: #10291f;
    --lime: #c9f26c;
    --paper: #f6f6f1;
    --ink: #18231e;
    --muted: #738077;
    --line: #dfe5dd;

    background: var(--paper);
    color: var(--ink);
    min-height: 100vh;
    padding-bottom: 70px;
    margin: 0 -15px;
}

.ck-race27 * {
    box-sizing: border-box;
}

.ck-race27 a {
    text-decoration: none;
}

.ck-race27-wrap {
    max-width: 1160px;
    padding-left: 28px;
    padding-right: 28px;
    margin: 0 auto;
}

/* HERO */

.ck-race27-hero {
    background: var(--forest);
    color: white;
    padding: 43px 0 0;
}

.ck-race27-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    color: #d7e7da;
}

.ck-race27-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lime);
}

.ck-race27-separator {
    color: #779686;
}

.ck-race27-hero h1 {
    font-size: clamp(36px, 5vw, 66px) !important;
    font-weight: 850;
    line-height: 1.07;
    letter-spacing: -.05em;
    color: white !important;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 22px 0 20px;
}

.ck-race27-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 25px;
    color: #d6e4da;
    font-size: 14px;
    margin-bottom: 36px;
}

.ck-race27-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ck-race27-hero-meta i {
    color: var(--lime);
}

/* NAVIGATION */

.ck-race27-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}

.ck-race27-nav::-webkit-scrollbar {
    display: none;
}

.ck-race27-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d7e7db;
    font-size: 13px;
    font-weight: 750;
    padding: 16px 17px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.ck-race27-nav a:hover {
    color: white;
}

.ck-race27-nav a.active {
    color: var(--lime);
    border-bottom-color: var(--lime);
}

/* MAIN */

.ck-race27-main {
    padding-top: 40px;
}

.ck-race27-section-heading {
    margin-bottom: 25px;
}

.ck-race27-section-heading > span {
    font-size: 11px;
    letter-spacing: .14em;
    color: #55785c;
    font-weight: 800;
}

.ck-race27-section-heading h2 {
    font-size: clamp(28px, 3.4vw, 42px);
    letter-spacing: -.045em;
    font-weight: 850;
    color: var(--forest);
    background: transparent;
    border: 0;
    padding: 0;
    margin: 9px 0;
}

.ck-race27-section-heading p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
}

/* GRID */

.ck-race27-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.ck-race27-wide {
    grid-column: 1 / -1;
}

/* CARDS */

.ck-race27-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    min-width: 0;
    box-shadow: 0 5px 20px rgba(24, 57, 43, .035);
}

.ck-race27-card-heading {
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.ck-race27-card-heading span {
    display: block;
    color: #65846a;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
    margin-bottom: 7px;
}

.ck-race27-card-heading h2 {
    color: var(--forest) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 23px !important;
    font-weight: 850;
    letter-spacing: -.025em;
}

.ck-race27-card-link {
    color: var(--forest) !important;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.ck-race27-card-link:hover {
    text-decoration: underline;
}

/* PROFILE */

.ck-race27-profile {
    padding: 18px 24px 24px;
}

.ck-race27-profile img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* TV */

.ck-race27-tv-list {
    padding: 8px 22px;
}

.ck-race27-tv-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.ck-race27-tv-row:last-child {
    border-bottom: 0;
}

.ck-race27-tv-channel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    min-width: 76px;
    min-height: 48px;
    padding: 7px;
    border-radius: 5px;
    background: var(--paper);
}

.ck-race27-tv-channel img {
    display: block;
    max-width: 100%;
    max-height: 34px;
    object-fit: contain;
}

.ck-race27-tv-channel strong {
    font-size: 12px;
    color: var(--forest);
}

.ck-race27-tv-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.ck-race27-tv-info strong {
    color: var(--ink);
    font-size: 14px;
}

.ck-race27-tv-info span {
    color: #6e7d71;
    font-size: 13px;
}

.ck-race27-tv-info small {
    color: #9ba69b;
    font-size: 11px;
}

.ck-race27-watch {
    background: var(--lime);
    color: var(--forest) !important;
    font-size: 11px;
    font-weight: 850;
    padding: 10px 12px;
    border-radius: 5px;
    white-space: nowrap;
}

/* RIDERS */

.ck-race27-riders {
    padding: 5px 23px;
}

.ck-race27-rider {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.ck-race27-rider:last-child {
    border-bottom: 0;
}

.ck-race27-rider-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.ck-race27-rider-name img {
    width: 21px;
    height: 21px;
    object-fit: contain;
}

.ck-race27-rider-name a,
.ck-race27-rider-name strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--forest);
}

.ck-race27-rider-name small {
    color: #849084;
    font-size: 11px;
}

.ck-race27-rider-team {
    color: #78867a;
    font-size: 12px;
    text-align: right;
    max-width: 48%;
}

.ck-race27-riders-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 35px;
}

/* ARTICLE */

.ck-race27-article {
    padding: 26px;
    font-size: 15px;
    line-height: 1.85;
    color: #3c4d40;
}

.ck-race27-article p {
    margin: 0 0 18px;
}

.ck-race27-article h2,
.ck-race27-article h3 {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--forest);
    font-weight: 850;
    letter-spacing: -.025em;
}

.ck-race27-article h2 {
    font-size: 25px;
    margin: 28px 0 12px;
}

.ck-race27-article h3 {
    font-size: 20px;
    margin: 24px 0 10px;
}

.ck-race27-article a {
    color: #387343;
    text-decoration: underline;
}

.ck-race27-article img {
    max-width: 100%;
    height: auto;
}

/* WEATHER */

.ck-race27-weather-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
    padding: 24px;
}

.ck-race27-weather-location {
    min-width: 0;
}

.ck-race27-weather-location h3 {
    color: var(--forest);
    font-size: 18px;
    font-weight: 850;
    margin: 0 0 15px;
}

.ck-race27-weather-location h3 small {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}

.ck-race27-table-scroll {
    overflow-x: auto;
}

.ck-race27-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.ck-race27-table th {
    background: var(--paper);
    color: #58725e;
    font-weight: 800;
    text-align: left;
    padding: 11px 9px;
}

.ck-race27-table td {
    padding: 11px 9px;
    border-bottom: 1px solid var(--line);
    color: #526457;
}

.ck-race27-weather-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ck-race27-weather-summary > div {
    background: var(--paper);
    border-radius: 5px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ck-race27-weather-summary span {
    color: #819083;
    font-size: 11px;
}

.ck-race27-weather-summary strong {
    color: var(--forest);
    font-size: 17px;
}

/* STAGES */

.ck-race27-stage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    color: var(--forest) !important;
}

.ck-race27-stage-row:last-child {
    border-bottom: 0;
}

.ck-race27-stage-row strong {
    font-size: 14px;
}

.ck-race27-stage-row span {
    color: var(--muted);
    white-space: nowrap;
    font-size: 12px;
}

/* ADS */

.ck-race27-ad {
    padding: 15px 0;
    text-align: center;
    min-width: 0;
}

.ck-race27-ad::before {
    content: "ANNONCE";
    display: block;
    font-size: 9px;
    letter-spacing: .13em;
    color: #98a399;
    margin-bottom: 10px;
}

/* TABLET */

@media (max-width: 850px) {

    .ck-race27-grid {
        grid-template-columns: 1fr;
    }

    .ck-race27-wide {
        grid-column: auto;
    }

    .ck-race27-riders-grid {
        grid-template-columns: 1fr;
    }

}

/* MOBILE */

@media (max-width: 600px) {

    .ck-race27-wrap {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ck-race27-hero {
        padding-top: 30px;
    }

    .ck-race27-hero h1 {
        font-size: 39px !important;
        margin: 17px 0;
    }

    .ck-race27-hero-meta {
        font-size: 12px;
        gap: 9px 16px;
        margin-bottom: 23px;
    }

    .ck-race27-nav {
        margin: 0 -16px;
        padding: 0 12px;
    }

    .ck-race27-nav a {
        font-size: 12px;
        padding: 14px 12px;
    }

    .ck-race27-main {
        padding-top: 28px;
    }

    .ck-race27-grid {
        gap: 14px;
    }

    .ck-race27-card-heading {
        padding: 17px;
    }

    .ck-race27-card-heading h2 {
        font-size: 20px !important;
    }

    .ck-race27-card-link {
        font-size: 11px;
    }

    .ck-race27-profile {
        padding: 12px;
    }

    .ck-race27-tv-list {
        padding: 5px 15px;
    }

    .ck-race27-tv-channel {
        width: 55px;
        min-width: 55px;
    }

    .ck-race27-tv-row {
        gap: 9px;
    }

    .ck-race27-watch {
        padding: 8px;
        font-size: 10px;
    }

    .ck-race27-riders {
        padding: 4px 16px;
    }

    .ck-race27-rider {
        align-items: flex-start;
    }

    .ck-race27-rider-team {
        font-size: 11px;
    }

    .ck-race27-article {
        padding: 18px;
        font-size: 14px;
    }

    .ck-race27-weather-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }

}