/* Existing Skole water topics and equipment surfaces, using native editable widgets. */
@font-face {
    font-family: CMSJSensei;
    src: url('camping-swimming-hero/Sensei-Medium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: CMSJCatamaran;
    src: url('camping-swimming-hero/Catamaran.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
body.cmsj-swimming-details-page {
    --cmsj-swim-detail-ink: #0a303a;
    --cmsj-swim-detail-cream: #f4f1ea;
    --cmsj-swim-detail-blue: #d5e6eb;
    --cmsj-swim-detail-pink: #ffd9d2;
    --cmsj-swim-detail-inline: 60px;
    --cmsj-swim-detail-width: 1120px;
}
#main .elementor .elementor-section.cmsj-swim-details {
    width: 100%;
    margin: 0;
    color: var(--cmsj-swim-detail-ink);
    background: #fff;
}
#main .elementor .elementor-section.cmsj-swim-details > .elementor-container,
#main .elementor .elementor-section.cmsj-swim-details .elementor-inner-section > .elementor-container {
    max-width: var(--cmsj-swim-detail-width);
    margin-inline: auto;
}
#main .elementor .elementor-section.cmsj-swim-details .elementor-column {
    min-width: 0;
}
#main .elementor .elementor-section.cmsj-swim-details .elementor-widget-wrap {
    display: flex;
    flex-direction: column;
    align-content: stretch;
    padding: 0;
    gap: 14px;
}
#main .elementor .elementor-section.cmsj-swim-details .elementor-widget {
    min-width: 0;
    margin-bottom: 0;
}
#main .elementor .elementor-section.cmsj-swim-details .elementor-heading-title {
    margin: 0;
    color: var(--cmsj-swim-detail-ink);
    font: 400 30px/1.25 CMSJSensei, sans-serif;
    letter-spacing: 0;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
#main .elementor .elementor-section.cmsj-swim-details .cmsj-swim-detail-title .elementor-heading-title {
    max-width: 25ch;
    font-size: clamp(34px, 3.4vw, 44px);
}
#main .elementor .elementor-section.cmsj-swim-details .elementor-widget-text-editor,
#main .elementor .elementor-section.cmsj-swim-details .elementor-widget-text-editor p {
    margin: 0;
    color: var(--cmsj-swim-detail-ink);
    font: 400 20px/1.5 CMSJCatamaran, sans-serif;
    overflow-wrap: anywhere;
}
#main .elementor .elementor-section.cmsj-swim-details .elementor-widget-text-editor strong {
    font-weight: 750;
}
#main .elementor .cmsj-swim-summary {
    padding: 64px var(--cmsj-swim-detail-inline) 32px;
}
#main .elementor .cmsj-swim-summary .cmsj-swim-detail-intro p {
    font-size: 23px;
}
#main .elementor .cmsj-swim-topics {
    padding: 0 var(--cmsj-swim-detail-inline) 64px;
}
#main .elementor .cmsj-swim-topics > .elementor-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
#main .elementor .cmsj-swim-topics .cmsj-swim-topic {
    width: auto;
    padding: 30px 28px 34px;
    background: var(--cmsj-swim-detail-cream);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgb(10 48 58 / 8%);
}
#main .elementor .cmsj-swim-topics .cmsj-swim-topic-2 {
    background: var(--cmsj-swim-detail-pink);
}
#main .elementor .cmsj-swim-topics .cmsj-swim-topic-3 {
    background: var(--cmsj-swim-detail-blue);
}
#main .elementor .cmsj-swim-rules {
    padding: 48px var(--cmsj-swim-detail-inline) 56px;
}
#main .elementor .elementor-section.cmsj-swim-details.cmsj-swim-rules {
    background: var(--cmsj-swim-detail-cream);
}
#main .elementor .cmsj-swim-rules-main > .elementor-widget-wrap {
    gap: 32px;
}
#main .elementor .cmsj-swim-rules-grid > .elementor-container {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
#main .elementor .cmsj-swim-rules-grid .elementor-column {
    width: auto;
}
#main .elementor .cmsj-swim-rules-grid .cmsj-swim-rule-copy {
    align-self: stretch;
    padding: 28px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgb(10 48 58 / 8%);
}
/* Optional depth feedback on the existing topics and openly visible rules. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    #main .elementor .cmsj-swim-topics .cmsj-swim-topic,
    #main .elementor .cmsj-swim-rules-grid .cmsj-swim-rule-copy {
        transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    #main .elementor .cmsj-swim-topics .cmsj-swim-topic:hover,
    #main .elementor .cmsj-swim-rules-grid .cmsj-swim-rule-copy:hover {
        transform: translateY(-3px);
    }
}
@media (min-width: 768px) {
    @supports (grid-template-rows: subgrid) {
        #main .elementor .cmsj-swim-topics > .elementor-container {
            row-gap: 14px;
        }
        #main .elementor .cmsj-swim-topics .cmsj-swim-topic,
        #main .elementor .cmsj-swim-topics .cmsj-swim-topic > .elementor-widget-wrap {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 2;
            row-gap: 14px;
        }
    }
}
#main .elementor .elementor-section.cmsj-swim-details .cmsj-swim-rule-title .elementor-heading-title {
    font: 750 24px/1.3 CMSJCatamaran, sans-serif;
}
#main .elementor .cmsj-swim-details-photo > .elementor-widget-container {
    position: relative;
    isolation: isolate;
    margin: 0 6px 18px;
}
#main .elementor .cmsj-swim-details-photo > .elementor-widget-container::before {
    position: absolute;
    z-index: -1;
    inset: -6px -6px -16px -4px;
    content: '';
    background: var(--cmsj-swim-detail-pink);
    -webkit-mask: url('camping-swimming-hero/photo-mask.svg') center / 100% 100% no-repeat;
    mask: url('camping-swimming-hero/photo-mask.svg') center / 100% 100% no-repeat;
    pointer-events: none;
}
#main .elementor .cmsj-swim-details-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.35;
    object-fit: cover;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask: url('camping-swimming-hero/photo-mask.svg') center / 100% 100% no-repeat;
    mask: url('camping-swimming-hero/photo-mask.svg') center / 100% 100% no-repeat;
}
/* The following native trees and all their copy/gallery/table relationships stay unchanged. */
.cmsj-swimming-details-page #main .elementor .elementor-element-85a8dbb {
    margin: 0;
    padding: 64px var(--cmsj-swim-detail-inline);
}
.cmsj-swimming-details-page #main .elementor :is(.elementor-element-85a8dbb, .elementor-element-d626e07, .elementor-element-1d90da3, .elementor-element-51308281) > .elementor-container {
    max-width: var(--cmsj-swim-detail-width);
    min-height: 0;
    margin-inline: auto;
}
.cmsj-swimming-details-page #main .elementor :is(.elementor-element-d626e07, .elementor-element-1d90da3) {
    margin: 0;
    background: var(--cmsj-swim-detail-blue);
}
.cmsj-swimming-details-page #main .elementor .elementor-element-d626e07 {
    padding: 48px var(--cmsj-swim-detail-inline) 0;
}
.cmsj-swimming-details-page #main .elementor .elementor-element-1d90da3 {
    padding: 18px var(--cmsj-swim-detail-inline) 48px;
}
.cmsj-swimming-details-page #main .elementor .elementor-element-1d90da3 .elementor-widget-text-editor,
.cmsj-swimming-details-page #main .elementor .elementor-element-1d90da3 p {
    color: var(--cmsj-swim-detail-ink);
    font: 400 20px/1.5 CMSJCatamaran, sans-serif;
    max-width: 70ch;
}
.cmsj-swimming-details-page #main .elementor :is(.elementor-element-d626e07, .elementor-element-51308281) .elementor-heading-title {
    color: var(--cmsj-swim-detail-ink);
    font: 400 clamp(34px, 3.4vw, 44px)/1.25 CMSJSensei, sans-serif;
    letter-spacing: 0;
    text-wrap: balance;
}
.cmsj-swimming-details-page #main .elementor .elementor-element-51308281 {
    margin: 0;
    padding: 56px var(--cmsj-swim-detail-inline) 72px;
    background: var(--cmsj-swim-detail-cream);
}
.cmsj-swimming-details-page #main .elementor .elementor-element-51308281 .csj-comparison {
    font-family: CMSJCatamaran, sans-serif;
}
#main .elementor .elementor-section.cmsj-swim-details ::selection {
    background: #ffc1b9;
    color: var(--cmsj-swim-detail-ink);
}
@media (max-width: 1024px) {
    body.cmsj-swimming-details-page { --cmsj-swim-detail-inline: 32px; }
    #main .elementor .cmsj-swim-topics > .elementor-container { gap: 16px; }
    #main .elementor .cmsj-swim-topics .cmsj-swim-topic { padding: 24px 20px 28px; }
    #main .elementor .cmsj-swim-rules-grid > .elementor-container { gap: 24px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    #main .elementor .cmsj-swim-rules-grid > .elementor-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #main .elementor .cmsj-swim-rule-photo {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 400px;
        justify-self: center;
    }
    #main .elementor .cmsj-swim-details-photo img { aspect-ratio: 1.9; }
}
@media (max-width: 767px) {
    body.cmsj-swimming-details-page { --cmsj-swim-detail-inline: 20px; }
    #main .elementor .cmsj-swim-summary { padding-top: 40px; padding-bottom: 26px; }
    #main .elementor .cmsj-swim-summary .cmsj-swim-detail-intro p { font-size: 21px; }
    #main .elementor .cmsj-swim-topics { padding-bottom: 40px; }
    #main .elementor .cmsj-swim-topics > .elementor-container,
    #main .elementor .cmsj-swim-rules-grid > .elementor-container { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    #main .elementor .cmsj-swim-topics .cmsj-swim-topic { padding: 28px 24px 32px; }
    #main .elementor .cmsj-swim-rules-grid .cmsj-swim-rule-copy { padding: 24px; }
    #main .elementor .cmsj-swim-rules { padding-top: 36px; padding-bottom: 40px; }
    #main .elementor .cmsj-swim-details-photo img { aspect-ratio: 1.9; }
    .cmsj-swimming-details-page #main .elementor .elementor-element-85a8dbb { padding-block: 40px; }
    .cmsj-swimming-details-page #main .elementor .elementor-element-51308281 { padding-block: 40px; }
}
