/*
  two-way-cta.css
  Selvstendig stilark for to-veis-seksjonen (Golfklubber / Sponsorer)
  på forsiden, rett under hero-seksjonen.
  Denne filen har ingen avhengigheter til andre seksjoner —
  den kan trygt fjernes eller flyttes uten å påvirke resten av siden.

  Kortene bruker samme kortstil som ikonboksene/CTA-boksene på
  /golfklubber og /sponsorer: hvit bunn, skarpe hjørner, myk skygge
  og en tynn grå topplinje.

  .two-way__heading bruker Clash Display (samme lokale fontfil som
  hero/golfklubber/sponsorer, se public/fonts/clash-display/).
*/

@font-face {
  font-family: 'Clash Display';
  src: url('../public/fonts/clash-display/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Felles seksjonsrytme: 60px over og under hver seksjon, slik at to
   naboseksjoner alltid gir 120px mellom seg. Første seksjon etter et
   hero-bilde får 120px på toppen, siden heroen ikke har bunn-padding. */
/* position: relative er ankeret for .supported-by, som ligger absolutt
   plassert oppe i topp-paddingen (se css/supported-by.css). */
.two-way {
  position: relative;
  padding: 120px 0 60px;
  background: #F5F5F5;
}

.two-way__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}

.two-way__grid {
  display: flex;
  gap: 32px;
}

/* Samme kortstil som ikonboksene/CTA-boksene: hvit bunn, skarpe
   hjørner, myk skygge og en tynn grå topplinje. */
.two-way__card {
  position: relative;
  flex: 1 1 0;
  display: flex;
  background-color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 0;
}

.two-way__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #9EA2A2;
}

.two-way__card-inner {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 4vw, 40px);
}

.two-way__kicker {
  display: inline-block;
  margin: 0 0 14px;
  color: #111111;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.two-way__heading {
  font-family: 'Clash Display', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  line-height: 1.25;
  margin: 0 0 16px;
  color: #111111;
  text-wrap: balance;
}

/* Siste del av overskriften på egen linje under, i små bokstaver og
   kursiv — samme skriftstørrelse som første linje.
   Clash Display har ingen kursiv-snitt, så nettleseren skråstiller. */
.two-way__heading-sub {
  display: block;
  font-style: italic;
  text-transform: lowercase;
}

.two-way__body {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #0d0d0d;
  margin: 0 0 28px;
}

.two-way__btn {
  display: inline-block;
  margin-top: auto;
  padding: 16px 32px;
  border-radius: 12px;
  background: #111111;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.two-way__btn:hover,
.two-way__btn:focus-visible {
  background: #2a2a2a;
}

@media (max-width: 760px) {
  .two-way__grid {
    flex-direction: column;
  }

  /* Toppen kan IKKE følge den vanlige 64px mobil-rytmen (120px = 60+60
     på desktop, redusert til 64px andre steder): .supported-by (se
     css/supported-by.css) ligger absolutt plassert i denne
     topp-paddingen, med top: 24px + egen høyde ca. 65px = 89px — bredt
     nok til å stikke ned i kortet under ved 64px. 112px gir 23px
     klaring under logoblokken før kortet begynner, og skyver dermed
     kortene (og alt som kommer etter i flyten) tilsvarende lenger ned
     enn den vanlige mobil-rytmen ville gjort. Bunnen er urørt (32px
     som normalt, parres med 32px topp på .home-stats i
     css/home-stats-video.css). */
  .two-way {
    padding-top: 112px;
    padding-bottom: 32px;
  }
}