/* =========================================================================
   FGU Nordvest - re-design.css
   -------------------------------------------------------------------------
   Brush-up af forsiden. Kun style-ændringer – ingen markup er rørt.
   VIGTIGT: filen skal indlæses EFTER /css/main.css, ellers vinder main.css.

   Indhold:
     1. Designtokens
     2. Hero - lavere
     3. Uddannelseskort (AGU/PGU/EGU) - afrunding og luft
     4. Knapper - blødere
     5. Nyheder - 3 kort i vandret række, billede over tekst
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. DESIGNTOKENS
   Trukket ud af main.css så farverne kun står ét sted.
   ------------------------------------------------------------------------- */
:root {
  --fgu-teal:        #245765;
  --fgu-teal-dark:   #17373f;
  --fgu-yellow:      #fab600;
  --fgu-yellow-soft: #eeb83f;
  --fgu-sand:        #ecdcc0;
  --fgu-red:         #cf2d37;

  --fgu-radius:      18px;   /* store kort */
  --fgu-radius-sm:   10px;   /* knapper og småting */
  --fgu-shadow:      0 8px 28px rgba(36, 87, 101, .12);
  --fgu-gap:         30px;
}

section{
    padding:60px 0px !important;
}

.svg-splitter-section{
    display:none;
}


/* -------------------------------------------------------------------------
   2. HERO - lavere, så uddannelseskortene kommer højere op
   main.css: .video-section.small-section { height: 600px }

   :has(video) scoper reglen til forsiden. Undersiderne bruger samme
   .video-section.small-section, men med baggrundsbillede i stedet for
   video - de skal beholde deres nuværende højde.
   ------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------
   3. UDDANNELSESKORT (AGU / PGU / EGU)
   Kortets baggrund tegnes af .frame:before (absolut, indrykket 15px),
   så afrundingen skal sættes både på :before og på .item.
   ------------------------------------------------------------------------- */
.quicklinks-section {
  padding-bottom: 60px;
}

/* overflow slippes fri så skyggen ikke bliver klippet.
   .item har stadig overflow:hidden, så ikon-cirklen holdes inde. */
.quicklinks-section .frame {
  overflow: visible;
}

.quicklinks-section .frame:before {
  border-radius: var(--fgu-radius);
  box-shadow: var(--fgu-shadow);
}

.quicklinks-section .frame .item {
  border-radius: var(--fgu-radius);
}

/* lidt mere luft i kortets indhold */
.quicklinks-section .frame .item .text {
  padding-bottom: 10px;
}


/* -------------------------------------------------------------------------
   4. KNAPPER - blødere hjørner
   main.css nulstiller border-radius inde i sektionerne; vi sætter den igen.
   ------------------------------------------------------------------------- */
.quicklinks-section .read-more-btn,
.quicklinks-section .cta-btn {
  border-radius: var(--fgu-radius-sm);
}

.event-section .read-more-btn {
  border-radius: var(--fgu-radius-sm);
}


/* -------------------------------------------------------------------------
   5. NYHEDER - fra lodret liste til 3 kort i vandret række
   Markup (uændret):
     .event-section > .container > .row
        > .col-md-4  -> h2 "Nyheder fra vores verden"
        > .col-md-8  -> .row > .col-12 -> 5 x .item + a.cta-btn
     .item > .col-12 > .row.no-gutters
        > .col-md-3 -> .img-box
        > .col-md-9 -> .text + .read-more-btn
   ------------------------------------------------------------------------- */

.event-section {
  padding: 10px 0 70px;
}

/* 5a. Overskriften ud af sidekolonnen og op over kortene */
.event-section > .container > .row > .col-md-4,
.event-section > .container > .row > .col-md-8 {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

.event-section > .container > .row > .col-md-4 h2 {
  text-align: center;
  margin-bottom: 40px;
}

/* NB: <br> i overskriften beholdes bevidst. Der er ingen mellemrum omkring
   den i markup, så display:none giver "Nyheder fravores verden".
   Skal den på én linje, fjernes <br> i Umbraco-indholdet. */

/* 5b. Kortene i et 3-kolonne grid */
.event-section .col-md-8 > .row > .col-12 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fgu-gap);
  align-items: stretch;
}

@media (max-width: 991px) {
  .event-section .col-md-8 > .row > .col-12 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .event-section .col-md-8 > .row > .col-12 {
    grid-template-columns: 1fr;
  }
}

/* skitsen viser 3 nyheder - nr. 4 og 5 skjules */
.event-section .col-md-8 > .row > .col-12 > .item:nth-of-type(n + 4) {
  display: none;
}

/* "Læs flere nyheder her" spænder over hele rækken og centreres */
.event-section .col-md-8 > .row > .col-12 > .cta-btn {
  grid-column: 1 / -1;
  justify-self: center;
  width: auto;
  border-radius: 30px;
  margin-top: 20px;
  padding: 13px 58px 13px 28px;   /* plads til den absolut placerede pil */
}

/* 5c. Kortet selv: billede over tekst, ens højde, afrundet */
.event-section .item {
  margin-bottom: 0;
  height: 100%;
  border-radius: var(--fgu-radius);
  overflow: hidden;
  box-shadow: var(--fgu-shadow);
}

.event-section .item > .col-12 {
  height: 100%;
}

.event-section .item .row.no-gutters {
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
}

.event-section .item .row.no-gutters > .col-md-3 {
  flex: 0 0 auto;
  max-width: 100%;
  width: 100%;
}

.event-section .item .row.no-gutters > .col-md-9 {
  flex: 1 1 auto;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.event-section .item .img-box {
  width: 100%;
  height: 190px;
}

@media (max-width: 767px) {
  .event-section .item .img-box { height: 170px; }
}

/* teksten fylder resten, så "Læs mere" altid ligger i bunden */
.event-section .item .text {
  flex: 1 1 auto;
}

.event-section .item .read-more-btn {
  margin-top: auto;
}