/* ==========================================================
   WILDFINS
   CHALLENGE DETAIL PAGES
   ========================================================== */


/* ==========================================================
   GRUNDSTRUKTUR
   ========================================================== */

.challenge-detail-inner {
    width: calc(100% - 88px);
    max-width: var(--content-wide);
    margin-inline: auto;
}


/* ==========================================================
   HERO
   ========================================================== */

.challenge-detail-hero{

    position:relative;

}


.challenge-detail-hero-image{

    width:100%;

    aspect-ratio:var(--hero-desktop-ratio);

    overflow:hidden;

}


.challenge-detail-hero-image .image-placeholder{

    width:100%;
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#D8D8D4;

    color:var(--color-primary);

    font-size:.70rem;

    letter-spacing:.12em;

    text-transform:uppercase;

}


.challenge-detail-hero-content{

    position:relative;

    left:auto;
    bottom:auto;
    transform:none;

    width:calc(100% - 88px);
    max-width:var(--content-wide);

    margin-inline:auto;

    padding:72px 0 80px;

}


.challenge-detail-hero-content .eyebrow{

    margin-bottom:16px;

}


.challenge-detail-hero-content h1{

    max-width:900px;

    margin:0 0 20px;

    font-size:clamp(3rem,5vw,5.4rem);

    line-height:1;

}


.challenge-detail-hero-content > p:last-child{

    max-width:760px;

    margin:0;

    font-family:var(--font-serif);

    font-size:1.35rem;

    line-height:1.45;

}


/* ==========================================================
   INTRO
   ========================================================== */

.challenge-detail-intro{

    padding:56px 0 96px;

}


.challenge-detail-intro h2{

    max-width:1100px;

    margin:22px 0 30px;

    font-size:clamp(2rem,3.3vw,3.2rem);

    line-height:1.12;

}


.challenge-detail-intro > .challenge-detail-inner > p:not(.eyebrow){

    max-width:1100px;

}


.challenge-detail-claim{

    margin-top:54px;

    max-width:none !important;

    font-family:var(--font-serif);

    font-size:1.45rem;

    line-height:1.3;

    color:var(--color-primary);

}


/* ==========================================================
   STANDARD SECTIONS
   ========================================================== */

.challenge-detail-section{

    padding:96px 0;

}


.challenge-detail-section-heading{

    max-width:1100px;

    margin-bottom:58px;

}


.challenge-detail-section h2{

    margin:18px 0 26px;

    font-size:clamp(2.3rem,3.6vw,3.7rem);

    line-height:1.08;

}


.challenge-detail-copy p{

    max-width:1100px;

}


.challenge-detail-wide-text{

    max-width:1100px;

}
.challenge-detail-image{

    margin-top:58px;

}


.challenge-detail-image .image-placeholder{

    width:100%;
    aspect-ratio:1920 / 800;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#D8D8D4;

    color:var(--color-primary);

    font-size:.70rem;

    letter-spacing:.12em;

    text-transform:uppercase;

}

/* ==========================================================
   TWO COLUMN
   ========================================================== */

.challenge-detail-split{

    display:grid;

    grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);

    gap:96px;

    align-items:start;

}


.challenge-detail-split > *{

    min-width:0;

}


/* ==========================================================
   FLORIDA KEYS
   ========================================================== */

.challenge-detail-keys{

    padding-top:64;

}


.challenge-detail-highlight{

    max-width:800px !important;

    margin-top:42px;

    font-family:var(--font-serif);

    font-size:clamp(1.45rem,2.2vw,2rem);

    line-height:1.3;

    color:var(--color-primary);

}


/* ==========================================================
   FAKTEN
   ========================================================== */

.challenge-detail-facts{

    border-top:1px solid var(--color-line);

}


.challenge-fact{

    padding:22px 0 24px;

    border-bottom:1px solid var(--color-line);

}


.challenge-fact strong{

    display:block;

    font-family:var(--font-serif);

    font-size:2rem;

    font-weight:400;

    line-height:1.1;

    color:var(--color-primary);

}


.challenge-fact span{

    display:block;

    margin-top:6px;

    font-size:.85rem;

    color:var(--color-text-soft);

}


/* ==========================================================
   DIE FISCHEREI
   ========================================================== */

.challenge-detail-fishing{

    padding-top:112px;
    padding-bottom:20px;

}


.challenge-detail-fishing h2{

    max-width:1000px;

}


/* ==========================================================
   PROGRAMM
   ========================================================== */

.challenge-detail-program{

    padding-top:112px;

}


.challenge-detail-program-grid{

    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);

    gap:96px;

    margin-top:54px;

}


.challenge-detail-program-intro p{

    max-width:720px;

}


.challenge-detail-schedule{

    border-top:1px solid var(--color-line);

}


.challenge-schedule-item{

    padding:18px 0 20px;

    border-bottom:1px solid var(--color-line);

}


.challenge-schedule-item > span{

    display:block;

    margin-bottom:7px;

    font-size:.72rem;

    font-weight:var(--fw-semibold);

    letter-spacing:.14em;

    color:var(--color-primary);

}


.challenge-schedule-item h3{

    margin:0 0 5px;

    font-size:1.45rem;

}


.challenge-schedule-item p{

    max-width:none;

    margin:0;

    font-size:.95rem;

    line-height:1.5;

    color:var(--color-text-soft);

}


/* ==========================================================
   DESTINATION
   ========================================================== */

.challenge-detail-destination{

    padding-top:100px;

    padding-bottom:112px;

}


.challenge-detail-destination .challenge-detail-split{

    grid-template-columns:1fr 1fr;

    gap:96px;

}


.challenge-detail-destination h2{

    max-width:600px;

}


/* ==========================================================
   ÜBERSICHT
   ========================================================== */

.challenge-detail-overview{

    padding:72px 0 112px;

}


.challenge-overview-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    margin-top:48px;

    border-top:1px solid var(--color-line);

}


.challenge-overview-item{

    min-height:125px;

    padding:24px 28px 24px 0;

    border-bottom:1px solid var(--color-line);

}


.challenge-overview-item:nth-child(n+4){

    border-bottom:none;

}


.challenge-overview-item:not(:nth-child(3n+1)){

    padding-left:28px;

    border-left:1px solid var(--color-line);

}


.challenge-overview-item strong{

    display:block;

    margin-bottom:7px;

    font-family:var(--font-serif);

    font-size:1.7rem;

    font-weight:400;

    color:var(--color-primary);

}


.challenge-overview-item span{

    display:block;

    font-size:.88rem;

    color:var(--color-text-soft);

}


/* ==========================================================
   INTERESSE
   ========================================================== */

.challenge-detail-interest{

    padding:104px 0 130px;

    border-top:1px solid var(--color-line);

}


.challenge-detail-interest h2{

    max-width:900px;

    margin:20px 0 24px;

    font-size:clamp(2.4rem,4vw,4rem);

}


.challenge-detail-interest > .challenge-detail-inner > p:not(.eyebrow){

    max-width:760px;

}


.challenge-detail-cta{

    display:inline-block;

    margin-top:38px;

    font-size:.80rem;

    font-weight:var(--fw-semibold);

    letter-spacing:.13em;

    text-transform:uppercase;

    color:var(--color-primary);

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:900px){

    .challenge-detail-split{

        grid-template-columns:1fr;

        gap:58px;

    }


    .challenge-detail-program-grid{

        grid-template-columns:1fr;

        gap:58px;

    }


    .challenge-detail-destination .challenge-detail-split{

        grid-template-columns:1fr;

    }


    .challenge-overview-grid{

        grid-template-columns:repeat(2,1fr);

    }


    .challenge-overview-item:nth-child(n+4){

        border-bottom:1px solid var(--color-line);

    }


    .challenge-overview-item:nth-child(2n){

        padding-left:28px;

        border-left:1px solid var(--color-line);

    }


    .challenge-overview-item:nth-child(2n+1){

        padding-left:0;

        border-left:none;

    }

}


@media(max-width:700px){

    .challenge-detail-inner{

        width:calc(100% - 48px);

        max-width:none;

    }


    /* HERO */

    .challenge-detail-hero-image{

        aspect-ratio:var(--hero-mobile-ratio);

    }


    .challenge-detail-hero-content{

        position:relative;

        left:auto;
        bottom:auto;

        transform:none;

        width:calc(100% - 48px);

        margin-inline:auto;

        padding:34px 0 52px;

    }


    .challenge-detail-hero-content h1{

        font-size:2.65rem;

        line-height:1.02;

    }


    .challenge-detail-hero-content > p:last-child{

        font-size:1.15rem;

        line-height:1.5;

    }


    /* INTRO */

    .challenge-detail-intro{

        padding:70px 0 72px;

    }


    .challenge-detail-intro h2{

        font-size:2rem;

    }


    .challenge-detail-claim{

        margin-top:42px;

        font-size:1.25rem;

    }


    /* SECTIONS */

    .challenge-detail-section{

        padding:70px 0;

    }


    .challenge-detail-section h2{

        font-size:2.35rem;

    }


    .challenge-detail-image{

        margin-top:40px;

    }


    .challenge-detail-image .image-placeholder{

        min-height:250px;

    }


    /* FACTS */

    .challenge-detail-facts{

        margin-top:10px;

    }


    .challenge-fact strong{

        font-size:1.75rem;

    }


    /* PROGRAM */

    .challenge-detail-program{

        padding-top:72px;

    }


    .challenge-detail-program-grid{

        margin-top:38px;

    }


    /* OVERVIEW */

    .challenge-detail-overview{

        padding:64px 0 80px;

    }


    .challenge-overview-grid{

        grid-template-columns:1fr;

        margin-top:36px;

    }


    .challenge-overview-item{

        min-height:auto;

        padding:20px 0 !important;

        border-left:none !important;

        border-bottom:1px solid var(--color-line);

    }


    .challenge-overview-item:last-child{

        border-bottom:none;

    }


    /* INTEREST */

    .challenge-detail-interest{

        padding:74px 0 90px;

    }


    .challenge-detail-interest h2{

        font-size:2.5rem;

    }

}
/* ==========================================================
   CHALLENGE DETAIL – FLIESSTEXT
   ========================================================== */

.challenge-detail-copy p:not(.challenge-detail-highlight) {
    font-size: 16px;
    line-height: 1.7;
}
/* ==========================================================
   DAS PROGRAMM – TYPOGRAFIE
   ========================================================== */

.challenge-program-intro p {

    font-size: 1rem;
    line-height: 1.65;

    margin: 0 0 28px 0;

}


/* ==========================================================
   DAS PROGRAMM
   ========================================================== */

.challenge-detail-program {
    width: 100%;
}


/* ----------------------------------------------------------
   HAUPTSTRUKTUR
   ---------------------------------------------------------- */

.challenge-program-layout {

    display: grid;

    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);

    column-gap: 72px;

    align-items: start;

}


/* ----------------------------------------------------------
   LINKE SPALTE
   ---------------------------------------------------------- */

.challenge-program-left {

    min-width: 0;

}


.challenge-program-intro {

    width: 100%;

}


.challenge-program-intro p {

    margin: 0 0 28px 0;

    font-size: 1rem;

    line-height: 1.65;

}


/* ----------------------------------------------------------
   BILDER UNTER DEM FLIESSTEXT
   ---------------------------------------------------------- */

.challenge-program-images {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

    width: 100%;

    margin-top: 38px;

}


.challenge-program-image {

    width: 100%;

}


.challenge-program-image .image-placeholder {

    width: 100%;

    aspect-ratio: 3 / 2;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #D8D8D4;

    color: var(--color-primary);

    font-size: .70rem;

    letter-spacing: .12em;

    text-transform: uppercase;

}


/* ----------------------------------------------------------
   RECHTE SPALTE – TAGESPROGRAMM
   ---------------------------------------------------------- */

.challenge-program-days {

    min-width: 0;

    width: 100%;

}


.challenge-program-day {

    padding: 0 0 18px 0;

    margin: 0 0 18px 0;

    border-bottom: 1px solid rgba(30, 50, 42, .16);

}


.challenge-program-label {

    display: block;

    margin-bottom: 7px;

    font-size: .68rem;

    line-height: 1.3;

    letter-spacing: .14em;

    text-transform: uppercase;

}


.challenge-program-day strong {

    display: block;

    font-family: var(--font-serif);

    font-size: 1.15rem;

    line-height: 1.3;

    font-weight: 400;

}


.challenge-program-day p {

    margin: 7px 0 0 0;

    font-size: .82rem;

    line-height: 1.5;

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    .challenge-program-layout {

        grid-template-columns: 1fr;

        row-gap: 42px;

    }


    .challenge-program-images {

        grid-template-columns: 1fr 1fr;

        gap: 10px;

        margin-top: 30px;

    }


    .challenge-program-days {

        width: 100%;

    }

}

.challenge-program-day p {

    margin: 7px 0 0 0;

    font-size: .82rem;
    line-height: 1.5;

}
/* ==========================================================
   PROGRAMM – INTRO TEXT BREITER LAUFEN LASSEN
   ========================================================== */

.challenge-program-intro,
.challenge-program-intro p {
    width: 100%;
    max-width: none;
}

/* ==========================================================
   WILDFINS CHALLENGE
   EINHEITLICHER ABSTAND ZWISCHEN DEN SECTIONS
   ========================================================== */

.challenge-detail-fishing + .challenge-detail-keys,
.challenge-detail-keys + .challenge-detail-program,
.challenge-detail-program + .challenge-detail-destination {
    padding-top: 48px;
}
/* ==========================================================
   TARPON CHALLENGE – ABSTAND HERO / INTRO
   ========================================================== */

.challenge-detail-hero-content{
    padding-bottom:0 !important;
}

.challenge-detail-intro{
    padding-top:40px !important;
}
