/* ====================================================================================
   HOMEPAGE — School at Sea
   Wordt na style.css geladen (via functions.php). Per laag een eigen blok.
   Maten en kleuren uit Figma: "Desktop home versie 4".
   ==================================================================================== */

/* --------------------------------------- LAAG: HERO -------------------------------------- */

.embed-container .details .hero-tekst {
  width: 100%;
  max-width: 1200px;        /* breedte van het tekstvlak; bepaalt waar de regel afbreekt */
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center;
}



/* Hero: tekstlaag onderaan in plaats van verticaal gecentreerd */
.details.hero {
  top: auto;
  bottom: 50px;
  transform: none;
  padding: 0 30px !important;   /* de 30px boven/onder van .details eraf, anders wordt het 80px */
}

.details.hero .hero-tekst {
  text-align: left;
  width: 100%;
  max-width: 1300px;
}

.details.hero .hero-tekst__titel {
  margin: 0 auto;
  color: #fff;
  font-size: clamp(40px, 7vw, 100px);   /* 100px vanaf ca. 1430px schermbreedte */
  line-height: 0.95;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

@media only screen and (max-width: 786px) {
  .details.hero {
    bottom: 30px;
    /* padding: 0 20px !important;  */
  }
}

/* Rij over de volle schermbreedte; wint van de 1290px-regel in het childtheme */
body .vc_row.sas-fullbreedte {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body .vc_row.sas-fullbreedte > .vc_column_container > .vc_column-inner {
  padding: 0 !important;
}

body .vc_row.sas-fullbreedte .wpb_content_element {
  margin-bottom: 0 !important;
}


/* --------------------------------------- LAAG: WAT IS SCHOOL AT SEA? -------------------------------------- */
/* Rij-achtergrond in WP Bakery: rgba(183, 224, 237, 0.6) */

/* ---------- Infokader (Zeilen / Expedities / Scholing) ---------- */

.infokader {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    color: #002d41;
    font-family: 'Work Sans', sans-serif;
}

.infokader .header {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 78px;
    padding: 10px 25px;
    background-color: #00344d;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
}

/* Tekst bovenaan, knoppen naast elkaar en altijd onderaan het kader */
.infokader .info {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: space-between;
    gap: 24px 25px;
    padding: 16px 30px 17px 23px;
}

.infokader .info p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
}

/* ---------- Knoppen in het infokader ---------- */

.infokader .aanmelden a,
.infokader .meerinfo a {
    display: block;
    box-sizing: border-box;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #00344d;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.infokader .aanmelden a::before,
.infokader .meerinfo a::before {
    content: '> ';
}

.infokader .aanmelden a {
    background-color: #00344d;
    color: #ffffff !important;
}

.infokader .aanmelden a:hover,
.infokader .aanmelden a:focus {
    background-color: #ffffff !important;
    color: #00344d !important;
}

.infokader .meerinfo a {
    background-color: #ffffff;
    color: #002d41 !important;
}

.infokader .meerinfo a:hover,
.infokader .meerinfo a:focus {
    background-color: #00344d !important;
    color: #ffffff !important;
}

/* ---------- Grote knoppen: blauw (hier) en oranje (laag 'Enthousiast geworden...') ---------- */
/* Class op de link zelf, of op een element eromheen. */

a.infobuttonblauw,
.infobuttonblauw a,
a.infobuttonoranje,
.infobuttonoranje a {
    display: inline-block;
    box-sizing: border-box;
    padding: 20px 40px;
    border-radius: 10px;
    color: #ffffff !important;
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 27px;
    text-align: center;
    text-decoration: none !important;
    transition: background-color 0.3s ease;
}

a.infobuttonblauw::before,
.infobuttonblauw a::before,
a.infobuttonoranje::before,
.infobuttonoranje a::before {
    content: '> ';
}

a.infobuttonblauw,
.infobuttonblauw a {
    min-width: 378px;
    background-color: #00344d !important;
}

a.infobuttonblauw:hover,
a.infobuttonblauw:focus,
.infobuttonblauw a:hover,
.infobuttonblauw a:focus {
    background-color: #01567d !important;
}

a.infobuttonoranje,
.infobuttonoranje a {
    min-width: 314px;
    background-color: #F85500 !important;
}

a.infobuttonoranje:hover,
a.infobuttonoranje:focus,
.infobuttonoranje a:hover,
.infobuttonoranje a:focus {
    background-color: #D94A00 !important;
}

/* ---------- Mobiel ---------- */

@media only screen and (max-width: 480px) {

    .infokader .info {
        padding: 16px 20px 17px;
        column-gap: 12px;
    }

    a.infobuttonblauw,
    .infobuttonblauw a,
    a.infobuttonoranje,
    .infobuttonoranje a {
        min-width: 0;
        width: 100%;
        padding: 18px 20px;
        font-size: 18px;
    }
}