.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
word-break: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}@media (min-width: 992px) { .dropdown-submenu {
position: relative;
} .dropdown-submenu > .dropdown-menu {
display: none;
position: absolute;
top: 0;
left: 100%;
margin-top: 0;
margin-left: 0.125rem;
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu {
display: block;
opacity: 1;
transform: translateX(0);
} .dropdown-submenu-toggle,
.dropdown-nav-toggle {
display: none !important;
} .nav-item.dropdown > .nav-link .dropdown-nav-arrow {
font-size: 0.65em;
margin-left: 0.4rem;
vertical-align: middle;
transition: transform 0.2s ease;
}
.nav-item.dropdown.show > .nav-link .dropdown-nav-arrow {
transform: rotate(180deg);
} .dropdown-submenu > .dropdown-item::after {
content: "";
display: inline-block;
margin-left: 0.5rem;
vertical-align: middle;
border-top: 0.3em solid transparent;
border-bottom: 0.3em solid transparent;
border-left: 0.3em solid currentColor;
}
} @media (max-width: 991.98px) { .dropdown-submenu {
position: static !important;
display: flex !important;
align-items: stretch;
}
.dropdown-submenu > .dropdown-item {
flex: 1 1 auto;
} .nav-item.dropdown > .nav-link .dropdown-nav-arrow {
display: none;
}  .nav-item.dropdown {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.nav-item.dropdown > .nav-link {
flex: 1 1 auto;
} .nav-item.dropdown > .dropdown-menu {
flex: 0 0 100%;
}
.nav-item.dropdown > .dropdown-nav-toggle {
flex: 0 0 auto;
display: flex !important;
align-items: center;
padding: 0 1.5rem !important;
background: none;
border: none;
border-left: 1px solid rgba(0, 0, 0, .05) !important;
cursor: pointer;
color: inherit;
line-height: 1;
}
.nav-item.dropdown > .dropdown-nav-toggle:focus-visible {
outline: 2px solid var(--bs-primary, #0d6efd);
outline-offset: -2px;
}
.nav-item.dropdown > .dropdown-nav-toggle .dropdown-nav-arrow {
font-size: 0.75em;
color: var(--surfcamp-grid-text); transition: transform 0.2s ease;
}
.nav-item.dropdown.show > .dropdown-nav-toggle .dropdown-nav-arrow {
transform: rotate(180deg);
} .dropdown-submenu-toggle {
flex: 0 0 auto;
display: flex !important; align-items: center;
padding: 0 1rem;
background: none;
border: none;
border-left: 1px solid rgba(0, 0, 0, .05) !important;
padding: 1rem 1.5rem !important;
cursor: pointer;
color: inherit;
line-height: 1;
}
.dropdown-submenu-toggle:focus-visible {
outline: 2px solid var(--bs-primary, #0d6efd);
outline-offset: -2px;
} .dropdown-submenu-arrow {
font-size: 0.75em;
color: var(--surfcamp-grid-text);
}  .dropdown-submenu > .dropdown-menu { position: fixed !important; margin: 0 !important;
padding-top: 0;
border: none !important;
border-radius: 0;
box-shadow: none !important; display: block !important;
visibility: hidden;
pointer-events: none; transform: translateX(100%) !important;
transition: transform 0.25s ease !important;
background: var(--bs-dropdown-bg, #fff);
z-index: 1055;
overflow-y: auto;
} .dropdown-submenu > .dropdown-menu[data-positioned] {
visibility: visible;
} .dropdown-submenu > .dropdown-menu.is-open {
transform: translateX(0) !important;
pointer-events: auto;
} .dropdown-submenu-back {
display: flex;
align-items: center;
gap: 0.625rem;
width: 100%;
padding: 0.875rem 1rem;
background: var(--bs-dropdown-bg, #fff);
border: none;
border-bottom: 2px solid var(--bs-dropdown-divider-bg, rgba(0,0,0,.08));
cursor: pointer;
font-weight: 600;
font-size: 1rem;
color: var(--bs-dropdown-link-color, #212529);
text-align: left;
box-sizing: border-box; position: sticky;
top: 0;
z-index: 1;
}
.dropdown-submenu-back:hover {
background: var(--bs-dropdown-link-hover-bg, #f8f9fa);
}
.dropdown-submenu-back:focus-visible {
outline: 2px solid var(--bs-primary, #0d6efd);
outline-offset: -2px;
} .dropdown-submenu-back-arrow {
display: inline-block;
width: 0.45em;
height: 0.45em;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
flex-shrink: 0;
margin-right: 0.5rem;
}
} @media (min-width: 992px) {
[dir="rtl"] .dropdown-submenu > .dropdown-menu {
left: auto;
right: 100%;
margin-left: 0;
margin-right: 0.5rem;
transform: translateX(6px);
}
[dir="rtl"] .dropdown-submenu:hover > .dropdown-menu,
[dir="rtl"] .dropdown-submenu:focus-within > .dropdown-menu {
transform: translateX(0);
}
[dir="rtl"] .dropdown-submenu > .dropdown-item::after {
border-left: none;
border-right: 0.3em solid currentColor;
margin-left: 0;
margin-right: 0.5em;
}
}
@media (max-width: 991.98px) {
[dir="rtl"] .dropdown-submenu > .dropdown-menu {
transform: translateX(-100%) !important;
}
[dir="rtl"] .dropdown-submenu > .dropdown-menu.is-open {
transform: translateX(0) !important;
}
[dir="rtl"] .dropdown-submenu-back-arrow {
transform: rotate(-135deg);
}
}:root{
--surfcamp-grid-bg:transparent;
--surfcamp-grid-text:#22272a;
--surfcamp-grid-muted:#66727a;
--surfcamp-grid-border:#e6edf0;
--surfcamp-grid-primary:#1AA6B7;
--surfcamp-grid-primary-light:#5ED3DF;
--surfcamp-grid-primary-dark:#0E7490;
--surfcamp-grid-accent:#F4A261;
--surfcamp-grid-accent-soft:#FFF3E8;
--surfcamp-grid-shadow:0 22px 54px rgba(15,111,143,.15);
--surfcamp-grid-radius:24px;
}
.surfcamp-grid-section{
color:var(--surfcamp-grid-text);
padding:clamp(28px,4vw,56px) 0;
}
.surfcamp-grid-wrap{
width:min(1400px,100%);
margin:0 auto;
}
.surfcamp-grid-head{
margin-bottom:24px;
}
.surfcamp-grid-kicker{
display:inline-flex;
align-items:center;
gap:10px;
margin:0 0 12px;
padding:7px 12px;
border-radius:999px;
background:rgba(26,166,183,.08);
color:var(--surfcamp-grid-primary-dark);
font:800 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
letter-spacing:.14em;
text-transform:uppercase;
}
.surfcamp-grid-kicker::before{
content:"~\A~";
white-space:pre;
display:inline-block;
font-size:14px;
font-weight:900;
line-height:0.7;
color:var(--surfcamp-grid-primary);
margin-right:6px;
animation:waveStack 2.4s ease-in-out infinite;
}
.surfcamp-grid-kicker::before,
.surfcamp-grid-kicker::after{
position:relative;
}
.surfcamp-grid-kicker::before{
content:"~\A~";
white-space:pre;
display:inline-block;
font-size:14px;
font-weight:900;
line-height:0.3;
background:linear-gradient(
180deg,
var(--surfcamp-grid-primary),
var(--surfcamp-grid-primary-light)
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-right:4px;
animation:waveStack 2.4s ease-in-out infinite;
}
@keyframes waveStack{
0%,100%{
transform:translateY(0);
opacity:.7;
}
50%{
transform:translateY(-2px);
opacity:1;
}
}
.surfcamp-grid-title{
margin:0;
color:var(--surfcamp-grid-text);
font:800 clamp(28px,4vw,56px)/1.05 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
letter-spacing:-.02em;
}
.surfcamp-grid-subtitle{
margin:20px 0 0 !important;
max-width:100%;
color:var(--surfcamp-grid-muted);
font:500 16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
}
.surfcamp-grid{
display:grid;
gap:20px;
grid-template-columns:repeat(4,1fr);
align-items:stretch;
}
@media(max-width:1100px){
.surfcamp-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:620px){
.surfcamp-grid{
grid-template-columns:1fr;
}
}
.surfcamp-card{
background:#ffffff;
border:1px solid var(--surfcamp-grid-border);
border-radius:28px 28px 32px 22px;
overflow:hidden;
box-shadow:0 2px 12px rgba(15,111,143,.04);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
display:flex;
flex-direction:column;
min-height:100%;
}
.surfcamp-card:hover,
.surfcamp-card:focus-within{
transform:translateY(-5px);
box-shadow:var(--surfcamp-grid-shadow);
border-color:rgba(15,111,143,.26);
}
.surfcamp-card-media{
position:relative;
display:block;
aspect-ratio:4/3;
overflow:hidden;
background:#f3f7f8; border-radius:28px 28px 34px 12px; isolation:isolate;
transform:translateZ(0);
}
.surfcamp-card-media::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
180deg,
rgba(0,0,0,0) 50%,
rgba(0,0,0,.18) 100%
);
pointer-events:none;
}
.surfcamp-card-media img{
width:100%;
height:100%;
object-fit:cover; transform:scale(1.001);
transition:transform .4s ease;
display:block; border-radius:inherit; backface-visibility:hidden;
}
.surfcamp-card:hover .surfcamp-card-media img,
.surfcamp-card:focus-within .surfcamp-card-media img{
transform:scale(1.045);
}
.surfcamp-card-badge{
position:absolute;
top:16px;
right:16px;
z-index:3;
display:inline-flex;
align-items:center;
min-height:28px;
padding:0 11px;
border-radius:999px;
background:var(--surfcamp-grid-accent);
color:#22272a;
box-shadow:0 8px 18px rgba(244,162,97,.22);
backdrop-filter:blur(8px);
font:800 10px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
letter-spacing:.05em;
text-transform:uppercase;
}
.surfcamp-card-price{
position:absolute;
right:18px;
bottom:14px;
z-index:2;
display:inline-flex;
align-items:baseline;
gap:8px;
padding:9px 14px;
border-radius:999px;
background:var(--surfcamp-grid-primary-dark);
color:#ffffff;
backdrop-filter:blur(6px);
box-shadow:0 12px 28px rgba(14,116,144,.35);
font:800 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
}
.surfcamp-card-price strong{
font-size:20px;
letter-spacing:-.01em;
}
.surfcamp-card-price small{
opacity:.9;
font-weight:700;
font-size:12px;
}
.surfcamp-card-body{
padding:18px 20px 20px;
display:flex;
flex-direction:column;
gap:11px;
flex:1;
}
.surfcamp-card-country{
margin:0;
color:var(--surfcamp-grid-muted);
font:800 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
letter-spacing:.13em;
text-transform:uppercase;
}
.surfcamp-card-country::before{
content:"\f57d";
font-family:"Font Awesome 5 Free";
font-weight:900;
font-size:11px;
line-height:1;
color:inherit;
margin-right:9px;
opacity:.65;
}
.surfcamp-card-title{
margin:1px 0 0;
color:var(--surfcamp-grid-text);
font:900 24px/1.12 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
letter-spacing:-.03em;
transition:color .18s ease;
}
.surfcamp-card:hover .surfcamp-card-title,
.surfcamp-card:focus-within .surfcamp-card-title{
color:var(--surfcamp-grid-primary-dark);
}
.surfcamp-card-title a{
color:inherit;
text-decoration:none;
}
.surfcamp-card-title a:hover{
color:inherit;
text-decoration:none;
}
.surfcamp-card-desc{
margin:0;
color:#374151;
font:500 15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
opacity:.86;
}
.surfcamp-card-tags{
list-style:none;
padding:0;
margin:4px 0 0;
display:flex;
flex-wrap:wrap;
gap:6px;
}
.surfcamp-card-tags li{
border:0;
background:rgba(26,166,183,.08);
color:var(--surfcamp-grid-primary-dark);
border-radius:12px;
padding:6px 9px;
font:800 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
white-space:nowrap;
}
.surfcamp-card-actions{
margin-top:auto;
padding-top:14px;
}
.surfcamp-card-button{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
gap:9px;
width:100%;
min-height:50px;
padding:13px 16px;
border-radius:999px;
background:linear-gradient(
90deg,
var(--surfcamp-grid-primary-light),
var(--surfcamp-grid-primary-dark)
);
color:#ffffff;
font:900 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
text-decoration:none;
border:none;
box-shadow:0 10px 22px rgba(14,116,144,.32);
transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
}
.surfcamp-card-button::after{
content:"";
position:absolute;
inset:0;
z-index:-1;
border-radius:inherit;
background:inherit;
filter:blur(14px);
opacity:.22;
transition:opacity .18s ease,filter .18s ease;
}
.surfcamp-card-button:hover,
.surfcamp-card-button:focus{
background:linear-gradient(
90deg,
#7FE7F0,
#0C6B86
);
color:#ffffff;
text-decoration:none;
transform:translateY(-2px);
box-shadow:0 13px 28px rgba(26,166,183,.34);
}
.surfcamp-card-button:hover::after,
.surfcamp-card-button:focus::after{
opacity:.34;
filter:blur(18px);
}
.surfcamp-card-button i{
font-size:13px;
line-height:1;
transition:transform .2s ease;
}
.surfcamp-card-button:hover i,
.surfcamp-card-button:focus i{
transform:translateX(4px);
}.surfcamp-destination-grid-section{
background:transparent;
padding:clamp(32px,4vw,60px) 0;
}
.surfcamp-destination-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
@media(max-width:1100px){
.surfcamp-destination-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:620px){
.surfcamp-destination-grid{
grid-template-columns:1fr;
}
}
.surfcamp-destination-card{
position:relative;
min-height:320px;
border-radius:28px 28px 32px 22px;
overflow:hidden;
background:#f3f7f8;
box-shadow:0 2px 12px rgba(15,111,143,.04);
transition:transform .22s ease,box-shadow .22s ease;
isolation:isolate;
transform:translateZ(0);
backface-visibility:hidden;
}
.surfcamp-destination-card__link{
position:relative;
display:flex;
width:100%;
height:100%;
min-height:320px;
overflow:hidden;
color:#ffffff;
text-decoration:none;
border-radius:inherit;
isolation:isolate;
transform:translateZ(0);
}
.surfcamp-destination-card__link img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.001);
transition:transform .45s ease;
backface-visibility:hidden;
border-radius:inherit;
clip-path:inset(0 round 28px 28px 32px 22px);
}
.surfcamp-destination-card__overlay{
position:absolute;
inset:0;
border-radius:inherit;
clip-path:inset(0 round 28px 28px 32px 22px);
background:linear-gradient(
180deg,
rgba(0,0,0,.05) 0%,
rgba(10,80,104,.36) 48%,
rgba(10,80,104,.82) 100%
);
}
.surfcamp-destination-card__content{
position:relative;
z-index:2;
align-self:flex-end;
width:100%;
padding:24px;
}
.surfcamp-destination-card__label{
display:inline-flex;
align-items:center;
margin-bottom:12px;
color:rgba(255,255,255,.82);
font:800 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
letter-spacing:.14em;
text-transform:uppercase;
}
.surfcamp-destination-card__label::before{
content:"\f57d";
font-family:"Font Awesome 5 Free";
font-weight:900;
margin-right:8px;
opacity:.75;
}
.surfcamp-destination-card h3{
margin:0 0 16px;
color:#ffffff;
font:900 28px/1.08 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
letter-spacing:-.03em;
}
.surfcamp-destination-card__button{
display:inline-flex;
align-items:center;
gap:8px;
min-height:42px;
padding:10px 15px;
border-radius:999px;
background:linear-gradient(
90deg,
var(--surfcamp-grid-primary-light),
var(--surfcamp-grid-primary-dark)
);
color:#ffffff;
font:900 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
box-shadow:0 10px 22px rgba(14,116,144,.32);
}
.surfcamp-destination-card__button i{
font-size:12px;
transition:transform .2s ease;
}
.surfcamp-destination-card:hover .surfcamp-destination-card__button i{
transform:translateX(4px);
}
.surfcamp-destination-card:hover img{
transform:scale(1.05);
}.surfcamp-decision-section{
color:var(--surfcamp-grid-text,#22272a);
padding:clamp(32px,5vw,68px) 0;
} .surfcamp-decision-layout{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
gap:clamp(28px,5vw,72px);
align-items:center;
}
.surfcamp-decision-content{
min-width:0;
}
.surfcamp-decision-content .surfcamp-grid-head{
margin-bottom:26px;
}
.surfcamp-decision-content .surfcamp-grid-title{
max-width:900px;
}
.surfcamp-decision-intro{
max-width:780px;
}
.surfcamp-decision-intro > *:first-child{
margin-top:0;
}
.surfcamp-decision-intro > *:last-child{
margin-bottom:0;
} .surfcamp-decision-accordion{
display:flex;
flex-direction:column;
gap:10px;
}
.surfcamp-decision-item{
background:#ffffff;
border:1px solid var(--surfcamp-grid-border,#e6edf0);
border-radius:20px 20px 24px 16px;
overflow:hidden;
box-shadow:0 2px 10px rgba(15,111,143,.045);
transition:
border-color .22s ease,
box-shadow .22s ease,
transform .22s ease;
}
.surfcamp-decision-item:hover{
border-color:rgba(26,166,183,.30);
}
.surfcamp-decision-item[open]{
border-color:rgba(26,166,183,.32);
box-shadow:0 14px 34px rgba(15,111,143,.11);
} .surfcamp-decision-summary{
position:relative;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:14px;
align-items:center;
min-height:88px;
padding:11px 16px 11px 11px;
cursor:pointer;
list-style:none;
background:#ffffff;
transition:
background .2s ease,
color .2s ease;
}
.surfcamp-decision-summary::-webkit-details-marker{
display:none;
}
.surfcamp-decision-summary::marker{
display:none;
}
.surfcamp-decision-summary:hover{
background:rgba(26,166,183,.025);
}
.surfcamp-decision-summary:focus-visible{
outline:3px solid rgba(94,211,223,.45);
outline-offset:-3px;
} .surfcamp-decision-thumb{
display:block;
width:86px;
height:66px;
border-radius:15px 15px 18px 10px;
overflow:hidden;
background:#f3f7f8;
isolation:isolate;
transform:translateZ(0);
}
.surfcamp-decision-thumb img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.001);
transition:transform .35s ease;
backface-visibility:hidden;
}
.surfcamp-decision-item:hover .surfcamp-decision-thumb img,
.surfcamp-decision-item[open] .surfcamp-decision-thumb img{
transform:scale(1.055);
} .surfcamp-decision-summary-text{
min-width:0;
display:flex;
flex-direction:column;
gap:6px;
}
.surfcamp-decision-camp-title{
display:block;
color:var(--surfcamp-grid-text,#22272a);
font:
900 19px/1.15
system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,
"Helvetica Neue",Arial;
letter-spacing:-.025em;
transition:color .18s ease;
}
.surfcamp-decision-item:hover
.surfcamp-decision-camp-title,
.surfcamp-decision-item[open]
.surfcamp-decision-camp-title{
color:var(--surfcamp-grid-primary-dark,#0E7490);
}
.surfcamp-decision-label{
display:block;
color:var(--surfcamp-grid-muted,#66727a);
font:
700 12px/1.35
system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,
"Helvetica Neue",Arial;
} .surfcamp-decision-toggle{
position:relative;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:999px;
background:rgba(26,166,183,.09);
transition:
background .2s ease,
transform .25s ease;
}
.surfcamp-decision-toggle::before,
.surfcamp-decision-toggle::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:12px;
height:2px;
border-radius:999px;
background:var(--surfcamp-grid-primary-dark,#0E7490);
transform:translate(-50%,-50%);
}
.surfcamp-decision-toggle::after{
transform:
translate(-50%,-50%)
rotate(90deg);
transition:
opacity .2s ease,
transform .25s ease;
}
.surfcamp-decision-item[open]
.surfcamp-decision-toggle{
background:linear-gradient(
135deg,
var(--surfcamp-grid-primary-light,#5ED3DF),
var(--surfcamp-grid-primary-dark,#0E7490)
);
}
.surfcamp-decision-item[open]
.surfcamp-decision-toggle::before,
.surfcamp-decision-item[open]
.surfcamp-decision-toggle::after{
background:#ffffff;
}
.surfcamp-decision-item[open]
.surfcamp-decision-toggle::after{
opacity:0;
transform:
translate(-50%,-50%)
rotate(0deg);
} .surfcamp-decision-panel{
padding:
4px
20px
20px
111px;
}
.surfcamp-decision-copy{
color:#374151;
font:
500 15px/1.6
system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,
"Helvetica Neue",Arial;
}
.surfcamp-decision-copy p{
margin:0 0 14px;
}
.surfcamp-decision-copy p:last-child{
margin-bottom:0;
}
.surfcamp-decision-copy strong{
color:var(--surfcamp-grid-text,#22272a);
font-weight:800;
} .surfcamp-decision-button{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
margin-top:17px;
min-height:42px;
padding:10px 17px;
border-radius:999px;
background:linear-gradient(
90deg,
var(--surfcamp-grid-primary-light,#5ED3DF),
var(--surfcamp-grid-primary-dark,#0E7490)
);
color:#ffffff;
font:
900 13px/1
system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,
"Helvetica Neue",Arial;
text-decoration:none;
box-shadow:0 9px 20px rgba(14,116,144,.24);
transition:
transform .18s ease,
box-shadow .18s ease,
background .18s ease;
}
.surfcamp-decision-button:hover,
.surfcamp-decision-button:focus{
background:linear-gradient(
90deg,
#7FE7F0,
#0C6B86
);
color:#ffffff;
text-decoration:none;
transform:translateY(-2px);
box-shadow:0 12px 25px rgba(26,166,183,.31);
}
.surfcamp-decision-button i{
font-size:11px;
transition:transform .2s ease;
}
.surfcamp-decision-button:hover i{
transform:translateX(3px);
} .surfcamp-decision-media{
position:relative;
min-height:520px;
height:100%;
overflow:hidden;
border-radius:32px 32px 42px 18px;
background:#f3f7f8;
box-shadow:
0 22px 54px rgba(15,111,143,.15);
isolation:isolate;
transform:translateZ(0);
}
.surfcamp-decision-media img{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.001);
transition:transform .55s ease;
backface-visibility:hidden;
}
.surfcamp-decision-media:hover img{
transform:scale(1.035);
}
.surfcamp-decision-media-overlay{
position:absolute;
inset:0;
background:linear-gradient(
180deg,
rgba(0,0,0,.02) 40%,
rgba(8,74,91,.34) 100%
);
pointer-events:none;
}
.surfcamp-decision-media-label{
position:absolute;
left:20px;
bottom:20px;
z-index:2;
display:inline-flex;
align-items:center;
padding:9px 14px;
border-radius:999px;
background:rgba(14,116,144,.92);
color:#ffffff;
box-shadow:0 10px 26px rgba(14,116,144,.28);
backdrop-filter:blur(8px);
font:
800 11px/1
system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,
"Helvetica Neue",Arial;
letter-spacing:.06em;
text-transform:uppercase;
} @media(max-width:1100px){
.surfcamp-decision-layout{
grid-template-columns:minmax(0,1.1fr) minmax(310px,.9fr);
gap:32px;
}
.surfcamp-decision-media{
min-height:480px;
}
} @media(max-width:620px){
.surfcamp-decision-section{
padding:34px 0;
}
.surfcamp-decision-layout{
grid-template-columns:1fr;
gap:28px;
}
.surfcamp-decision-summary{
grid-template-columns:auto minmax(0,1fr) auto;
gap:11px;
min-height:78px;
padding:9px 12px 9px 9px;
}
.surfcamp-decision-thumb{
width:70px;
height:58px;
border-radius:13px 13px 16px 9px;
}
.surfcamp-decision-camp-title{
font-size:17px;
}
.surfcamp-decision-label{
font-size:11px;
}
.surfcamp-decision-toggle{
width:30px;
height:30px;
}
.surfcamp-decision-panel{
padding:
4px
16px
18px
16px;
}
.surfcamp-decision-media{
min-height:330px;
aspect-ratio:4/3;
border-radius:26px 26px 32px 16px;
}
}.surfcamp-info-grid-section{
color:var(--surfcamp-grid-text,#22272a);
padding:clamp(28px,4vw,56px) 0;
} .surfcamp-info-grid{
display:grid;
gap:20px;
align-items:stretch;
}
.surfcamp-info-grid--4{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.surfcamp-info-grid--3{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.surfcamp-info-grid--2{
grid-template-columns:repeat(2,minmax(0,1fr));
} .surfcamp-info-card{
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
min-width:0;
min-height:100%;
padding:24px;
background:#fff;
border:1px solid var(--surfcamp-grid-border,#e6edf0);
border-radius:28px 28px 32px 22px;
box-shadow:0 2px 12px rgba(15,111,143,.04);
transition:
transform .22s ease,
box-shadow .22s ease,
border-color .22s ease;
} .surfcamp-info-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(
90deg,
var(--surfcamp-grid-primary-light,#5ED3DF),
var(--surfcamp-grid-primary-dark,#0E7490)
);
}
.surfcamp-info-card:hover,
.surfcamp-info-card:focus-within{
transform:translateY(-5px);
border-color:rgba(15,111,143,.26);
box-shadow:
var(
--surfcamp-grid-shadow,
0 22px 54px rgba(15,111,143,.15)
);
} .surfcamp-info-card__icon{
display:flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
flex:0 0 52px;
margin:2px 0 21px;
border-radius:18px 18px 20px 14px;
background:linear-gradient(
135deg,
rgba(94,211,223,.20),
rgba(14,116,144,.10)
);
color:var(--surfcamp-grid-primary-dark,#0E7490);
transition:
transform .22s ease,
background .22s ease;
}
.surfcamp-info-card:hover .surfcamp-info-card__icon{
transform:translateY(-2px) rotate(-2deg);
background:linear-gradient(
135deg,
rgba(94,211,223,.28),
rgba(14,116,144,.14)
);
}
.surfcamp-info-card__icon i{
font-size:20px;
line-height:1;
}
.surfcamp-info-card__icon span{
display:block;
color:var(--surfcamp-grid-primary,#1AA6B7);
font:900 30px/.7 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
transform:translateY(-2px);
} .surfcamp-info-card__body{
display:flex;
flex-direction:column;
flex:1;
min-width:0;
} .surfcamp-info-card__label{
margin:0 0 9px !important;
color:var(--surfcamp-grid-primary-dark,#0E7490);
font:800 11px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
letter-spacing:.13em;
text-transform:uppercase;
} .surfcamp-info-card__value{
margin:0 0 11px !important;
color:var(--surfcamp-grid-text,#22272a);
font:900 clamp(31px,3vw,42px)/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
letter-spacing:-.04em;
} .surfcamp-info-card__title{
margin:0;
color:var(--surfcamp-grid-text,#22272a);
font:900 23px/1.12 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
letter-spacing:-.025em;
transition:color .18s ease;
}
.surfcamp-info-card:hover .surfcamp-info-card__title,
.surfcamp-info-card:focus-within .surfcamp-info-card__title{
color:var(--surfcamp-grid-primary-dark,#0E7490);
} .surfcamp-info-card__text{
margin-top:13px;
color:#374151;
font:500 15px/1.58 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
opacity:.88;
}
.surfcamp-info-card__text p{
margin:0 0 10px;
}
.surfcamp-info-card__text p:last-child{
margin-bottom:0;
}
.surfcamp-info-card__text a{
color:var(--surfcamp-grid-primary-dark,#0E7490);
font-weight:700;
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:2px;
} .surfcamp-info-card__actions{
margin-top:auto;
padding-top:20px;
}
.surfcamp-info-card__button{
position:relative;
z-index:1;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:42px;
padding:10px 15px;
border-radius:999px;
background:linear-gradient(
90deg,
var(--surfcamp-grid-primary-light,#5ED3DF),
var(--surfcamp-grid-primary-dark,#0E7490)
);
color:#fff;
font:900 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
text-decoration:none;
box-shadow:0 9px 20px rgba(14,116,144,.25);
transition:
transform .18s ease,
background .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.surfcamp-info-card__button:hover,
.surfcamp-info-card__button:focus{
color:#fff;
text-decoration:none;
transform:translateY(-2px);
background:linear-gradient(
90deg,
#7FE7F0,
#0C6B86
);
box-shadow:0 12px 25px rgba(26,166,183,.32);
}
.surfcamp-info-card__button i{
font-size:12px;
line-height:1;
transition:transform .2s ease;
}
.surfcamp-info-card__button:hover i,
.surfcamp-info-card__button:focus i{
transform:translateX(4px);
} @media(max-width:1100px){
.surfcamp-info-grid--4,
.surfcamp-info-grid--3,
.surfcamp-info-grid--2{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:620px){
.surfcamp-info-grid--4,
.surfcamp-info-grid--3,
.surfcamp-info-grid--2{
grid-template-columns:1fr;
}
.surfcamp-info-card{
padding:22px;
}
}.surfcamp-overview-section{
position:relative;
padding:
clamp(24px,3vw,38px)
0
clamp(28px,3vw,44px);
color:var(--surfcamp-grid-text,#22272a);
} .surfcamp-overview-grid{
display:grid;
grid-template-columns:
repeat(6,minmax(0,1fr));
gap:12px;
align-items:stretch;
} .surfcamp-overview-card{
position:relative;
display:flex;
flex-direction:column;
min-width:0;
min-height:138px;
padding:18px;
overflow:hidden;
background:#ffffff;
border:
1px solid
var(--surfcamp-grid-border,#e6edf0);
border-radius:
22px 22px 26px 16px;
box-shadow:
0 3px 14px
rgba(15,111,143,.045);
color:
var(--surfcamp-grid-text,#22272a);
text-decoration:none;
transition:
transform .20s ease,
box-shadow .20s ease,
border-color .20s ease,
background .20s ease;
isolation:isolate;
} .surfcamp-overview-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:3px;
background:
linear-gradient(
90deg,
var(--surfcamp-grid-primary-light,#5ED3DF),
var(--surfcamp-grid-primary-dark,#0E7490)
);
opacity:.85;
} a.surfcamp-overview-card{
color:
var(--surfcamp-grid-text,#22272a);
text-decoration:none;
}
a.surfcamp-overview-card:hover,
a.surfcamp-overview-card:focus{
color:
var(--surfcamp-grid-text,#22272a);
text-decoration:none;
transform:translateY(-4px);
border-color:
rgba(26,166,183,.30);
box-shadow:
0 17px 36px
rgba(15,111,143,.12);
}
a.surfcamp-overview-card:focus-visible{
outline:
3px solid
rgba(94,211,223,.42);
outline-offset:3px;
} .surfcamp-overview-card__icon{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
flex:0 0 42px;
margin-bottom:17px;
border-radius:
15px 15px 17px 11px;
background:
linear-gradient(
135deg,
rgba(94,211,223,.22),
rgba(14,116,144,.09)
);
color:
var(--surfcamp-grid-primary-dark,#0E7490);
transition:
transform .20s ease,
background .20s ease;
}
.surfcamp-overview-card__icon i{
font-size:16px;
line-height:1;
}
.surfcamp-overview-card--link:hover
.surfcamp-overview-card__icon{
transform:
translateY(-2px)
rotate(-2deg);
background:
linear-gradient(
135deg,
rgba(94,211,223,.30),
rgba(14,116,144,.14)
);
} .surfcamp-overview-card__body{
display:flex;
flex-direction:column;
min-width:0;
margin-top:auto;
} .surfcamp-overview-card__label{
margin:0 0 7px;
color:
var(--surfcamp-grid-muted,#66727a);
font:
800 10px/1.2
system-ui,
-apple-system,
Segoe UI,
Roboto,
Ubuntu,
Cantarell,
"Helvetica Neue",
Arial;
letter-spacing:.12em;
text-transform:uppercase;
} .surfcamp-overview-card__value{
color:
var(--surfcamp-grid-text,#22272a);
font:
850 16px/1.28
system-ui,
-apple-system,
Segoe UI,
Roboto,
Ubuntu,
Cantarell,
"Helvetica Neue",
Arial;
letter-spacing:-.018em;
overflow-wrap:anywhere;
transition:color .18s ease;
}
.surfcamp-overview-card--link:hover
.surfcamp-overview-card__value{
color:
var(--surfcamp-grid-primary-dark,#0E7490);
} .surfcamp-overview-card__arrow{
position:absolute;
top:18px;
right:17px;
display:flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
border-radius:999px;
background:
rgba(26,166,183,.07);
color:
var(--surfcamp-grid-primary-dark,#0E7490);
font-size:10px;
transition:
transform .20s ease,
background .20s ease,
color .20s ease;
}
.surfcamp-overview-card--link:hover
.surfcamp-overview-card__arrow{
transform:translateY(3px);
background:
var(--surfcamp-grid-primary-dark,#0E7490);
color:#ffffff;
} .surfcamp-overview-card--static{
background:
linear-gradient(
145deg,
rgba(94,211,223,.07),
rgba(14,116,144,.035)
);
} #surfspots,
#reisezeit,
#surfkurs,
#verpflegung,
#unterkunft{
scroll-margin-top:110px;
} @media(max-width:1180px){
.surfcamp-overview-grid{
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:14px;
}
} @media(max-width:620px){
.surfcamp-overview-section{
padding:
22px
0
32px;
}
.surfcamp-overview-grid{
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:10px;
}
.surfcamp-overview-card{
min-height:130px;
padding:15px;
border-radius:
19px 19px 22px 13px;
}
.surfcamp-overview-card__icon{
width:38px;
height:38px;
flex-basis:38px;
margin-bottom:15px;
border-radius:
13px 13px 15px 9px;
}
.surfcamp-overview-card__icon i{
font-size:15px;
}
.surfcamp-overview-card__arrow{
top:14px;
right:13px;
width:26px;
height:26px;
}
.surfcamp-overview-card__label{
font-size:9px;
}
.surfcamp-overview-card__value{
font-size:15px;
}
} @media(prefers-reduced-motion:reduce){
.surfcamp-overview-card,
.surfcamp-overview-card__icon,
.surfcamp-overview-card__arrow,
.surfcamp-overview-card__value{
transition:none;
}
a.surfcamp-overview-card:hover,
a.surfcamp-overview-card:focus{
transform:none;
}
}.surfcamp-feature-grid-section{
color:var(--surfcamp-grid-text,#22272a);
padding:clamp(32px,4vw,60px) 0;
} .surfcamp-feature-grid{
display:grid;
gap:20px;
align-items:stretch;
}
.surfcamp-feature-grid--4{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.surfcamp-feature-grid--3{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.surfcamp-feature-grid--2{
grid-template-columns:repeat(2,minmax(0,1fr));
} .surfcamp-feature-card{
position:relative;
min-width:0;
min-height:390px;
overflow:hidden;
border-radius:28px 28px 32px 22px;
background:#f3f7f8;
box-shadow:0 2px 12px rgba(15,111,143,.04);
transition:
transform .22s ease,
box-shadow .22s ease;
isolation:isolate;
transform:translateZ(0);
backface-visibility:hidden;
}
.surfcamp-feature-card:hover,
.surfcamp-feature-card:focus-within{
transform:translateY(-5px);
box-shadow:
var(
--surfcamp-grid-shadow,
0 22px 54px rgba(15,111,143,.15)
);
} .surfcamp-feature-card__surface{
position:relative;
display:flex;
width:100%;
height:100%;
min-height:390px;
overflow:hidden;
border-radius:inherit;
color:#fff;
text-decoration:none;
isolation:isolate;
transform:translateZ(0);
}
a.surfcamp-feature-card__surface:hover,
a.surfcamp-feature-card__surface:focus{
color:#fff;
text-decoration:none;
} .surfcamp-feature-card__media{
position:absolute;
inset:0;
overflow:hidden;
border-radius:inherit;
background:#f3f7f8;
clip-path:inset(
0 round 28px 28px 32px 22px
);
}
.surfcamp-feature-card__image{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
object-fit:cover;
border-radius:inherit;
transform:scale(1.001);
backface-visibility:hidden;
transition:transform .45s ease;
}
.surfcamp-feature-card:hover
.surfcamp-feature-card__image,
.surfcamp-feature-card:focus-within
.surfcamp-feature-card__image{
transform:scale(1.05);
} .surfcamp-feature-card__placeholder{
position:absolute;
inset:0;
background:
radial-gradient(
circle at 78% 18%,
rgba(255,255,255,.18),
transparent 30%
),
linear-gradient(
145deg,
var(--surfcamp-grid-primary-light,#5ED3DF),
var(--surfcamp-grid-primary-dark,#0E7490)
);
} .surfcamp-feature-card__overlay{
position:absolute;
inset:0;
z-index:1;
border-radius:inherit;
clip-path:inset(
0 round 28px 28px 32px 22px
);
background:linear-gradient(
180deg,
rgba(0,0,0,.02) 0%,
rgba(10,80,104,.18) 28%,
rgba(10,80,104,.62) 65%,
rgba(8,55,73,.94) 100%
);
pointer-events:none;
} .surfcamp-feature-card__content{
position:relative;
z-index:2;
align-self:flex-end;
width:100%;
padding:25px;
} .surfcamp-feature-card__label{
display:flex;
align-items:center;
gap:8px;
width:max-content;
max-width:100%;
margin:0 0 11px !important;
color:rgba(255,255,255,.84);
font:800 11px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
letter-spacing:.14em;
text-transform:uppercase;
}
.surfcamp-feature-card__label i{
flex:0 0 auto;
color:var(--surfcamp-grid-primary-light,#5ED3DF);
font-size:11px;
} .surfcamp-feature-card__title{
margin:0;
color:#fff;
font:900 28px/1.08 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
letter-spacing:-.03em;
} .surfcamp-feature-card__text{
max-width:36em;
margin-top:11px;
color:rgba(255,255,255,.90);
font:500 15px/1.52 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
}
.surfcamp-feature-card__text p{
margin:0 0 9px;
}
.surfcamp-feature-card__text p:last-child{
margin-bottom:0;
}
.surfcamp-feature-card__text strong{
color:#fff;
font-weight:800;
} .surfcamp-feature-card__button{
position:relative;
z-index:1;
display:inline-flex;
align-items:center;
gap:8px;
min-height:42px;
margin-top:18px;
padding:10px 15px;
border-radius:999px;
background:linear-gradient(
90deg,
var(--surfcamp-grid-primary-light,#5ED3DF),
var(--surfcamp-grid-primary-dark,#0E7490)
);
color:#fff;
font:900 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
box-shadow:0 10px 22px rgba(14,116,144,.32);
transition:
transform .18s ease,
background .18s ease,
box-shadow .18s ease;
}
.surfcamp-feature-card__surface:hover
.surfcamp-feature-card__button,
.surfcamp-feature-card__surface:focus
.surfcamp-feature-card__button{
transform:translateY(-2px);
background:linear-gradient(
90deg,
#7FE7F0,
#0C6B86
);
box-shadow:0 13px 28px rgba(26,166,183,.34);
}
.surfcamp-feature-card__button i{
font-size:12px;
line-height:1;
transition:transform .2s ease;
}
.surfcamp-feature-card__surface:hover
.surfcamp-feature-card__button i,
.surfcamp-feature-card__surface:focus
.surfcamp-feature-card__button i{
transform:translateX(4px);
} @media(max-width:1100px){
.surfcamp-feature-grid--4,
.surfcamp-feature-grid--3,
.surfcamp-feature-grid--2{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:620px){
.surfcamp-feature-grid--4,
.surfcamp-feature-grid--3,
.surfcamp-feature-grid--2{
grid-template-columns:1fr;
}
.surfcamp-feature-card,
.surfcamp-feature-card__surface{
min-height:360px;
}
.surfcamp-feature-card__content{
padding:23px;
}
.surfcamp-feature-card__title{
font-size:26px;
}
}.surfcamp-accommodation-section{
color:var(--surfcamp-grid-text,#22272a);
padding:clamp(32px,5vw,68px) 0;
scroll-margin-top:110px;
} .surfcamp-accommodation-layout{
display:grid;
grid-template-columns:
minmax(0,1.08fr)
minmax(360px,.92fr);
gap:clamp(28px,5vw,72px);
align-items:center;
}
.surfcamp-accommodation-content{
min-width:0;
}
.surfcamp-accommodation-content
.surfcamp-grid-head{
margin-bottom:26px;
}
.surfcamp-accommodation-intro{
max-width:780px;
}
.surfcamp-accommodation-intro > *:first-child{
margin-top:0;
}
.surfcamp-accommodation-intro > *:last-child{
margin-bottom:0;
} .surfcamp-accommodation-accordion{
display:flex;
flex-direction:column;
gap:10px;
}
.surfcamp-accommodation-item{
overflow:hidden;
background:#fff;
border:
1px solid
var(--surfcamp-grid-border,#e6edf0);
border-radius:
20px 20px 24px 16px;
box-shadow:
0 2px 10px
rgba(15,111,143,.045);
transition:
border-color .22s ease,
box-shadow .22s ease;
}
.surfcamp-accommodation-item:hover{
border-color:
rgba(26,166,183,.30);
}
.surfcamp-accommodation-item[open]{
border-color:
rgba(26,166,183,.32);
box-shadow:
0 14px 34px
rgba(15,111,143,.11);
} .surfcamp-accommodation-summary{
position:relative;
display:grid;
grid-template-columns:
auto
minmax(0,1fr)
auto;
gap:14px;
align-items:center;
min-height:88px;
padding:
11px
16px
11px
11px;
cursor:pointer;
list-style:none;
background:#fff;
transition:
background .2s ease;
}
.surfcamp-accommodation-summary::-webkit-details-marker{
display:none;
}
.surfcamp-accommodation-summary::marker{
display:none;
}
.surfcamp-accommodation-summary:hover{
background:
rgba(26,166,183,.025);
}
.surfcamp-accommodation-summary:focus-visible{
outline:
3px solid
rgba(94,211,223,.45);
outline-offset:-3px;
} .surfcamp-accommodation-thumb{
display:block;
width:86px;
height:66px;
overflow:hidden;
border-radius:
15px 15px 18px 10px;
background:#f3f7f8;
isolation:isolate;
transform:translateZ(0);
}
.surfcamp-accommodation-thumb img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.001);
backface-visibility:hidden;
transition:
transform .35s ease;
}
.surfcamp-accommodation-item:hover
.surfcamp-accommodation-thumb img,
.surfcamp-accommodation-item[open]
.surfcamp-accommodation-thumb img{
transform:scale(1.055);
} .surfcamp-accommodation-summary-text{
min-width:0;
display:flex;
flex-direction:column;
gap:6px;
}
.surfcamp-accommodation-title{
display:block;
color:
var(--surfcamp-grid-text,#22272a);
font:
900 19px/1.15
system-ui,
-apple-system,
Segoe UI,
Roboto,
Ubuntu,
Cantarell,
"Helvetica Neue",
Arial;
letter-spacing:-.025em;
transition:color .18s ease;
}
.surfcamp-accommodation-item:hover
.surfcamp-accommodation-title,
.surfcamp-accommodation-item[open]
.surfcamp-accommodation-title{
color:
var(--surfcamp-grid-primary-dark,#0E7490);
}
.surfcamp-accommodation-label{
display:block;
color:
var(--surfcamp-grid-muted,#66727a);
font:
700 12px/1.4
system-ui,
-apple-system,
Segoe UI,
Roboto,
Ubuntu,
Cantarell,
"Helvetica Neue",
Arial;
} .surfcamp-accommodation-toggle{
position:relative;
width:34px;
height:34px;
flex:0 0 34px;
border-radius:999px;
background:
rgba(26,166,183,.09);
transition:
background .2s ease,
transform .25s ease;
}
.surfcamp-accommodation-toggle::before,
.surfcamp-accommodation-toggle::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:12px;
height:2px;
border-radius:999px;
background:
var(--surfcamp-grid-primary-dark,#0E7490);
transform:
translate(-50%,-50%);
}
.surfcamp-accommodation-toggle::after{
transform:
translate(-50%,-50%)
rotate(90deg);
transition:
opacity .2s ease,
transform .25s ease;
}
.surfcamp-accommodation-item[open]
.surfcamp-accommodation-toggle{
background:
linear-gradient(
135deg,
var(--surfcamp-grid-primary-light,#5ED3DF),
var(--surfcamp-grid-primary-dark,#0E7490)
);
}
.surfcamp-accommodation-item[open]
.surfcamp-accommodation-toggle::before,
.surfcamp-accommodation-item[open]
.surfcamp-accommodation-toggle::after{
background:#fff;
}
.surfcamp-accommodation-item[open]
.surfcamp-accommodation-toggle::after{
opacity:0;
transform:
translate(-50%,-50%)
rotate(0deg);
} .surfcamp-accommodation-panel{
padding:
4px
20px
20px
111px;
}
.surfcamp-accommodation-copy{
color:#374151;
font:
500 15px/1.6
system-ui,
-apple-system,
Segoe UI,
Roboto,
Ubuntu,
Cantarell,
"Helvetica Neue",
Arial;
}
.surfcamp-accommodation-copy p{
margin:0 0 14px;
}
.surfcamp-accommodation-copy p:last-child{
margin-bottom:0;
}
.surfcamp-accommodation-copy strong{
color:
var(--surfcamp-grid-text,#22272a);
font-weight:800;
}
.surfcamp-accommodation-copy ul,
.surfcamp-accommodation-copy ol{
margin:
13px
0
0;
padding-left:20px;
}
.surfcamp-accommodation-copy li{
margin-bottom:5px;
} .surfcamp-accommodation-media{
position:relative;
min-height:520px;
height:100%;
overflow:hidden;
border-radius:
32px 32px 42px 18px;
background:#f3f7f8;
box-shadow:
0 22px 54px
rgba(15,111,143,.15);
isolation:isolate;
transform:translateZ(0);
}
.surfcamp-accommodation-media__image{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.001);
backface-visibility:hidden;
transition:
transform .55s ease;
}
.surfcamp-accommodation-media:hover
.surfcamp-accommodation-media__image{
transform:scale(1.035);
}
.surfcamp-accommodation-media__overlay{
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(0,0,0,.02) 40%,
rgba(8,74,91,.34) 100%
);
pointer-events:none;
}
.surfcamp-accommodation-media__label{
position:absolute;
left:20px;
bottom:20px;
z-index:2;
display:inline-flex;
align-items:center;
padding:
9px
14px;
border-radius:999px;
background:
rgba(14,116,144,.92);
color:#fff;
box-shadow:
0 10px 26px
rgba(14,116,144,.28);
backdrop-filter:
blur(8px);
font:
800 11px/1
system-ui,
-apple-system,
Segoe UI,
Roboto,
Ubuntu,
Cantarell,
"Helvetica Neue",
Arial;
letter-spacing:.06em;
text-transform:uppercase;
} @media(max-width:1100px){
.surfcamp-accommodation-layout{
grid-template-columns:
minmax(0,1.1fr)
minmax(310px,.9fr);
gap:32px;
}
.surfcamp-accommodation-media{
min-height:480px;
}
} @media(max-width:620px){
.surfcamp-accommodation-section{
padding:34px 0;
}
.surfcamp-accommodation-layout{
grid-template-columns:1fr;
gap:28px;
}
.surfcamp-accommodation-summary{
grid-template-columns:
auto
minmax(0,1fr)
auto;
gap:11px;
min-height:78px;
padding:
9px
12px
9px
9px;
}
.surfcamp-accommodation-thumb{
width:70px;
height:58px;
border-radius:
13px 13px 16px 9px;
}
.surfcamp-accommodation-title{
font-size:17px;
}
.surfcamp-accommodation-label{
font-size:11px;
}
.surfcamp-accommodation-toggle{
width:30px;
height:30px;
flex-basis:30px;
}
.surfcamp-accommodation-panel{
padding:
4px
16px
18px;
}
.surfcamp-accommodation-media{
min-height:330px;
aspect-ratio:4/3;
border-radius:
26px 26px 32px 16px;
}
} @media(prefers-reduced-motion:reduce){
.surfcamp-accommodation-thumb img,
.surfcamp-accommodation-media__image,
.surfcamp-accommodation-toggle{
transition:none;
}
}