/* TROBO À L'ÉCOLE — V1 */

:root {
  --trobo-green: #173f3a;
  --trobo-green-dark: #102f2b;
  --trobo-mint: #dceee7;
  --trobo-coral: #e97961;
  --trobo-cream: #f7f4ee;
  --trobo-white: #ffffff;
  --trobo-text: #17322f;
  --trobo-muted: #667875;
}

/* GLOBAL */

body {
  color: var(--trobo-text);
  background: var(--trobo-white);
}

.entry-content {
  margin-top: 0;
}

.entry-content > * {
  margin-top: 0;
}

.trobo-section,
.trobo-flow,
.trobo-photographers,
.trobo-cta,
.trobo-stats,
.trobo-hero {
  padding-left: clamp(24px, 6vw, 80px);
  padding-right: clamp(24px, 6vw, 80px);
}

.trobo-section {
  padding-top: clamp(70px, 9vw, 130px);
  padding-bottom: clamp(70px, 9vw, 130px);
}

/* HERO */

.trobo-hero {
  min-height: 650px;
  padding-top: clamp(100px, 12vw, 180px);
  padding-bottom: clamp(100px, 12vw, 180px);
  background: var(--trobo-green);
  color: var(--trobo-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.trobo-hero h1 {
  color: var(--trobo-white);
  font-size: clamp(54px, 8vw, 108px) !important;
  line-height: .93;
  letter-spacing: -.055em;
  max-width: 950px;
  margin-bottom: 32px;
}

.trobo-hero p {
  color: rgba(255,255,255,.84);
  max-width: 720px;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.55;
}

.trobo-hero .trobo-lead {
  color: var(--trobo-mint);
  font-weight: 600;
  font-size: clamp(22px, 2.5vw, 30px);
}

.trobo-hero .wp-block-buttons {
  margin-top: 38px;
  gap: 16px;
}

.trobo-hero .wp-block-button__link {
  border-radius: 100px;
  padding: 15px 26px;
  font-weight: 700;
  background: var(--trobo-coral);
  color: var(--trobo-green-dark);
}

.trobo-hero .is-style-outline .wp-block-button__link {
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,.55);
}

/* STATS */

.trobo-stats {
  background: var(--trobo-mint);
  padding-top: 42px;
  padding-bottom: 42px;
}

.trobo-stats .wp-block-columns {
  margin: 0;
}

.trobo-stats .wp-block-column {
  text-align: center;
  border-right: 1px solid rgba(23,63,58,.18);
}

.trobo-stats .wp-block-column:last-child {
  border-right: 0;
}

.trobo-stats p {
  margin: 0;
  color: var(--trobo-green);
  line-height: 1.35;
}

.trobo-stats strong {
  display: inline-block;
  font-size: clamp(34px, 4vw, 55px);
  letter-spacing: -.04em;
  margin-bottom: 5px;
}

/* CARDS */

.trobo-card {
  padding: clamp(30px, 4vw, 55px);
  border-radius: 24px;
  background: var(--trobo-cream);
}

.trobo-card:nth-child(2) {
  background: var(--trobo-green);
  color: white;
}

.trobo-card:nth-child(2) h2,
.trobo-card:nth-child(2) a {
  color: white;
}

.trobo-card h2 {
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -.035em;
}

.trobo-card a {
  color: var(--trobo-green);
  font-weight: 700;
  text-decoration: none;
}

/* FLOW */

.trobo-flow {
  padding-top: clamp(70px, 9vw, 120px);
  padding-bottom: clamp(70px, 9vw, 120px);
  background: var(--trobo-coral);
  color: var(--trobo-green-dark);
}

.trobo-flow h2 {
  color: var(--trobo-green-dark);
  font-size: clamp(38px, 5vw, 65px);
  max-width: 850px;
  letter-spacing: -.04em;
}

.trobo-steps {
  margin-top: 50px;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.8;
}

/* LABELS */

.trobo-eyebrow {
  color: var(--trobo-coral);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  font-weight: 800;
}

/* PHOTOGRAPHERS */

.trobo-photographers {
  background: var(--trobo-green);
  color: white;
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(80px, 10vw, 140px);
}

.trobo-photographers h2,
.trobo-photographers h3 {
  color: white;
}

.trobo-photographers > h2 {
  font-size: clamp(40px, 5vw, 68px);
  letter-spacing: -.045em;
}

.trobo-feature {
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.25);
}

.trobo-feature h3 {
  font-size: 25px;
}

.trobo-feature p {
  color: rgba(255,255,255,.75);
}

/* CTA */

.trobo-cta {
  background: var(--trobo-mint);
  text-align: center;
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(80px, 10vw, 140px);
}

.trobo-cta h2 {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(40px, 5vw, 68px);
  letter-spacing: -.045em;
}

.trobo-cta p {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.trobo-cta .wp-block-buttons {
  justify-content: center;
  margin-top: 32px;
}

.trobo-cta .wp-block-button__link {
  background: var(--trobo-coral);
  color: var(--trobo-green-dark);
  border-radius: 100px;
  padding: 16px 30px;
  font-weight: 700;
}

/* MOBILE */

@media (max-width: 781px) {
  .trobo-hero {
    min-height: auto;
  }

  .trobo-stats .wp-block-column {
    border-right: 0;
    border-bottom: 1px solid rgba(23,63,58,.18);
    padding: 20px 0;
  }

  .trobo-stats .wp-block-column:last-child {
    border-bottom: 0;
  }

  .trobo-card {
    margin-bottom: 12px;
  }
}

/* HEADER */

#header {
  --theme-link-initial-color: var(--trobo-green);
}

[data-header*="type-1"] .ct-header [data-row*="middle"] {
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid rgba(23,63,58,.08);
}

.site-title {
  font-size: 27px !important;
  font-weight: 800 !important;
  letter-spacing: -.045em;
}

.site-title a {
  color: var(--trobo-green) !important;
}

.site-description {
  font-size: 11px !important;
  color: var(--trobo-muted) !important;
}

.menu > li > a {
  font-size: 14px;
  font-weight: 650;
  color: var(--trobo-green) !important;
}

.menu > li > a:hover {
  color: var(--trobo-coral) !important;
}

/* HEADINGS */

h1, h2, h3, h4 {
  letter-spacing: -.035em;
}

/* LINKS */

.entry-content a {
  text-underline-offset: 4px;
}

/* Hide page title on homepage */

.home .hero-section {
  display: none;
}

/* INTERNAL PAGES */

.trobo-page-hero {
  background: var(--trobo-green);
  color: white;
  padding: clamp(90px, 11vw, 160px) clamp(24px, 6vw, 80px);
}

.trobo-page-hero h1 {
  color: white;
  font-size: clamp(50px, 7vw, 92px);
  line-height: .98;
  letter-spacing: -.055em;
  max-width: 950px;
}

.trobo-page-hero > p:not(.trobo-eyebrow) {
  color: rgba(255,255,255,.78);
  font-size: clamp(19px, 2vw, 25px);
  max-width: 750px;
}

.trobo-section > h2 {
  font-size: clamp(34px, 4vw, 55px);
  margin-top: 70px;
}

.trobo-section > h2:first-child {
  margin-top: 0;
}