/* =====================================================================
   CodeWithAI.dk – forside-layout (moduler 2354, 2355, 2356)
   Indsæt i portal.css (Site Settings > Custom CSS / portal.css).
   Alt er scoped under .cwai, så Aperture-skinnet ikke påvirkes.
   Font: Ubuntu (leveres allerede af Aperture-skinnet) med system-fallback.
   ===================================================================== */
.cwai {
  --cwai-navy: #052E68;        /* samplet fra logo_F_source.jpg (5,46,104) */
  --cwai-navy-dark: #031E45;   /* hover / mørke flader */
  --cwai-navy-tint: #E9EFF8;   /* lys baggrund */
  --cwai-line: #D3DDEC;        /* kanter */
  --cwai-ink: #142033;         /* brødtekst  (16.3:1 på hvid) */
  --cwai-muted: #44516A;       /* sekundær tekst (8.0:1 på hvid) */
  --cwai-on-dark: #E6EDF7;     /* tekst på navy/footer (>=12:1) */
  --cwai-white: #FFFFFF;
  --cwai-radius: 14px;
  --cwai-shadow: 0 1px 2px rgba(5,46,104,.06), 0 6px 18px rgba(5,46,104,.08);
  --cwai-font: Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  font-family: var(--cwai-font);
  font-weight: 400;
  color: var(--cwai-ink);
  line-height: 1.6;
  font-size: 1rem;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.cwai *, .cwai *::before, .cwai *::after { box-sizing: border-box; }

/* ---------- typografi (overstyrer Aperture h1–h4 / p / a) ---------- */
.cwai h1, .cwai h2, .cwai h3, .cwai h4, .cwai p, .cwai li, .cwai a, .cwai span, .cwai strong {
  font-family: var(--cwai-font);
}
.cwai h1, .cwai h2, .cwai h3, .cwai h4 {
  color: var(--cwai-navy);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .75rem;
  letter-spacing: -.01em;
}
.cwai h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); }
.cwai h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.25rem); }
.cwai h3 { font-size: 1.25rem; }
.cwai h4 { font-size: 1.15rem; }
.cwai p { font-size: 1rem; color: var(--cwai-ink); margin: 0 0 1rem; }
.cwai strong { font-weight: 700; }
.cwai a { color: var(--cwai-navy); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.cwai a:hover { color: var(--cwai-navy-dark); }
.cwai a:focus-visible { outline: 3px solid #5B8DEF; outline-offset: 3px; border-radius: 4px; }
.cwai img { max-width: 100%; height: auto; display: block; }

/* ---------- layout-hjælpere ---------- */
.cwai-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) { .cwai-wrap { padding: 0 2rem; } }
.cwai-section { padding: 3.5rem 0; }
@media (min-width: 992px) { .cwai-section { padding: 4.5rem 0; } }
.cwai-section--tint { background: var(--cwai-navy-tint); }
.cwai-head { max-width: 760px; margin: 0 0 2rem; }
.cwai-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.cwai .cwai-kicker {
  display: inline-block; margin: 0 0 .6rem;
  font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cwai-navy);
}
.cwai .cwai-lead { font-size: 1.125rem; color: var(--cwai-muted); }

/* ---------- 2354: hero ---------- */
.cwai-hero { background: linear-gradient(180deg, var(--cwai-navy-tint) 0%, #F7F9FC 100%); border-bottom: 1px solid var(--cwai-line); }
.cwai-hero .cwai-wrap { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 992px) { .cwai-hero .cwai-wrap { padding-top: 5rem; padding-bottom: 5rem; } }
.cwai-hero__text { max-width: 780px; }
.cwai-hero .cwai-welcome { font-size: 1.125rem; font-weight: 500; color: var(--cwai-muted); margin-bottom: .5rem; }
.cwai-hero .cwai-welcome strong { color: var(--cwai-navy); }
.cwai-hero h1 { margin-bottom: 1.25rem; }
.cwai-hero p { font-size: 1.0625rem; }
.cwai-hero .cwai-summary {
  margin-top: 1.5rem; padding: 1rem 1.25rem;
  border-left: 4px solid var(--cwai-navy); background: var(--cwai-white);
  border-radius: 0 10px 10px 0; box-shadow: var(--cwai-shadow);
}

/* ---------- 2355: ydelser som kort ---------- */
.cwai .cwai-services {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 600px) { .cwai .cwai-services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .cwai .cwai-services { grid-template-columns: repeat(3, 1fr); } }
.cwai .cwai-services li {
  position: relative; margin: 0;
  background: var(--cwai-white); border: 1px solid var(--cwai-line); border-radius: var(--cwai-radius);
  padding: 1.1rem 1.1rem 1.1rem 3.4rem; font-weight: 500; color: var(--cwai-ink);
  box-shadow: var(--cwai-shadow); line-height: 1.45;
}
.cwai .cwai-services li::before { /* flueben-ikon, ren CSS */
  content: ""; position: absolute; left: 1.1rem; top: 1.05rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--cwai-navy);
}
.cwai .cwai-services li::after {
  content: ""; position: absolute; left: 1.62rem; top: 1.38rem;
  width: .45rem; height: .75rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cwai .cwai-goal { font-size: 1.125rem; font-weight: 500; color: var(--cwai-navy); text-align: center; max-width: 720px; margin: 0 auto; }

/* ---------- generisk kortgrid ---------- */
.cwai-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .cwai-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .cwai-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.cwai-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--cwai-white); border: 1px solid var(--cwai-line); border-radius: var(--cwai-radius);
  box-shadow: var(--cwai-shadow); overflow: hidden;
}
.cwai-card__body { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.cwai-card__body p:last-child { margin-bottom: 0; }
.cwai-card h3, .cwai-card h4 { margin-bottom: .5rem; }
.cwai-card h3 a, .cwai-card h4 a { text-decoration: none; color: var(--cwai-navy); }
.cwai-card h3 a:hover, .cwai-card h4 a:hover { text-decoration: underline; }
.cwai-card p { color: var(--cwai-muted); }

/* "Sådan arbejder vi" – kort med kant i top */
.cwai-card--approach { border-top: 4px solid var(--cwai-navy); }

/* løsninger: thumbnail med fast 16:10-format */
.cwai .cwai-card__media {
  display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin: 0;
  background: var(--cwai-navy-tint); border-bottom: 1px solid var(--cwai-line);
}
.cwai .cwai-card__media img {
  width: 100% !important; height: 100% !important; /* overstyrer evt. inline width/height fra editoren */
  object-fit: cover; object-position: top center; transition: transform .3s ease;
}
.cwai a.cwai-card__media:hover img { transform: scale(1.03); }
/* løsninger uden skærmbillede: to kompakte kort stablet i én grid-celle */
.cwai-stack { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
@media (min-width: 992px) { .cwai-stack { gap: 1.5rem; } }
.cwai-card--compact { flex: 1; border-left: 4px solid var(--cwai-navy); }
.cwai-card--compact .cwai-card__body { padding: 1.1rem 1.25rem; }
.cwai-card--compact h3 { display: flex; align-items: center; gap: .6rem; }
.cwai-card--compact h3::before { /* lille navy "C"-prik som ikon, ren CSS */
  content: ""; flex: none; width: .9rem; height: .9rem; border-radius: 50%;
  border: 3px solid var(--cwai-navy); border-right-color: transparent; transform: rotate(-45deg);
}
.cwai .cwai-card__link { margin-top: auto; padding-top: .5rem; }
.cwai .cwai-card__link a { font-weight: 700; }
.cwai .cwai-card__link a::after, .cwai .cwai-btn::after { /* CSS-tegnet pil (ingen ekstra tekst) */
  content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .45em;
  border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); vertical-align: .08em;
}

/* Cloud-kort på fuld bredde */
.cwai-card--wide { margin-top: 1.5rem; border-left: 4px solid var(--cwai-navy); }
.cwai-card--wide .cwai-card__body { padding: 1.5rem 1.75rem; }

/* ---------- Om os ---------- */
.cwai-about { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 992px) { .cwai-about { grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; } }

/* ---------- CTA ---------- */
.cwai-cta {
  background: var(--cwai-navy); color: var(--cwai-on-dark); border-radius: 20px;
  padding: 2rem 1.5rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 768px) { .cwai-cta { grid-template-columns: 1fr auto; padding: 3rem; } }
.cwai .cwai-cta h2 { color: #fff; }
.cwai .cwai-cta p { color: var(--cwai-on-dark); }
.cwai .cwai-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; color: var(--cwai-navy); text-decoration: none;
  padding: .9rem 1.6rem; border-radius: 999px; font-weight: 700; font-size: 1.0625rem;
  border: 2px solid #fff; transition: background .2s, color .2s;
}
.cwai .cwai-btn:hover { background: transparent; color: #fff; }
.cwai .cwai-btn:focus-visible { outline: 3px solid #9DBBF5; outline-offset: 3px; }
.cwai .cwai-cta__logo { margin: 0; justify-self: start; }
@media (min-width: 768px) {
  .cwai .cwai-cta__logo { justify-self: end; }
  .cwai .cwai-cta__logo img { width: 280px !important; }
}
.cwai .cwai-cta__logo img { /* navy logo_F.png på hvid flade inde i den navy boks */
  width: 220px !important; height: auto !important; max-width: 100%;
  background: #fff; border-radius: 14px; padding: 12px 16px;
}

/* ---------- 2356: footer-modul ---------- */
.cwai-footer { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
@media (min-width: 768px) { .cwai-footer { align-items: flex-end; } }
.cwai-footer img { width: 220px !important; height: auto !important; max-width: 100%; }
.cwai .cwai-version {
  margin: 0; font-size: .875rem; font-weight: 500; letter-spacing: .04em;
  color: var(--cwai-on-dark) !important; /* tidligere arvet brun tekstfarve på mørk baggrund */
}