/* ============================================================================
   VoresMidtfyn.dk — lokalmediets ramme (VoresMidtfynLayout) og forside (FrontPageVoresMidtfyn).

   Identitet og masters: G:\Mit drev\Comito\Projekter\VoresMidtfyn.dk\Brand\ (README + build.js).
     skov  #1F5A43   primær: links, knapper, footer (8,0:1 mod hvid)
     eng   #86B95B   bakken — flader og bakkelinjer, aldrig tekst
     sø    #3A9DAE   buerne i mærket — kun dekoration
     raps  #F3C433   kun som flade bag mørk tekst (kalenderens datoer)
     muld  #18231E   tekst
     kalk  #F2F4EF   baggrund (kølig, grønlig hvid — ikke creme)

   Skrift: Newsreader (rubrikker — en avis-serif tegnet til skærmlæsning) og Schibsted Grotesk
   (UI og brødtekst — tegnet til et nordisk mediehus). Self-hostet i FrontEndShared/lib/fonts;
   @font-face henter først filen når en regel bruger familien, så andre portaler betaler intet.

   Det ene markante greb er bakken (header-kant og footer). Resten holdes roligt.
   Prefiks mf- og variabler scopet til .mf (App.razor deles af alle portaler; vm- er Ryslinges).
   ============================================================================ */

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; src: url(/_content/Comito.CMS.FrontEndShared/lib/fonts/newsreader-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url(/_content/Comito.CMS.FrontEndShared/lib/fonts/newsreader-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_content/Comito.CMS.FrontEndShared/lib/fonts/newsreader-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 500; font-display: swap; src: url(/_content/Comito.CMS.FrontEndShared/lib/fonts/newsreader-latin-500-italic.woff2) format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_content/Comito.CMS.FrontEndShared/lib/fonts/schibsted-grotesk-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/_content/Comito.CMS.FrontEndShared/lib/fonts/schibsted-grotesk-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_content/Comito.CMS.FrontEndShared/lib/fonts/schibsted-grotesk-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 800; font-display: swap; src: url(/_content/Comito.CMS.FrontEndShared/lib/fonts/schibsted-grotesk-latin-800-normal.woff2) format('woff2'); }

.mf {
  --mf-skov: #1F5A43;
  --mf-skov-700: #164433;
  --mf-eng: #86B95B;
  --mf-eng-lys: #E2EED6;
  --mf-soe: #3A9DAE;
  --mf-raps: #F3C433;
  --mf-muld: #18231E;
  --mf-kalk: #F2F4EF;
  --mf-tekst-2: #4A5A51;
  --mf-linje: #D6DDD3;
  --mf-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mf-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mf-container: 76rem;

  background: var(--mf-kalk);
  color: var(--mf-muld);
  font-family: var(--mf-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.mf h1, .mf h2, .mf h3, .mf h4 {
  font-family: var(--mf-serif);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.15;
  color: var(--mf-muld);
}

.mf a { color: var(--mf-skov); }
.mf a:hover { color: var(--mf-skov-700); }

.mf :focus-visible { outline: 3px solid var(--mf-soe); outline-offset: 2px; }
/* FocusOnNavigate flytter fokus til h1 (tabindex=-1) ved navigation — til skærmlæsere, ingen ring. */
.mf h1:focus-visible, .mf [tabindex="-1"]:focus-visible { outline: none; }

.mf-container { max-width: var(--mf-container); margin: 0 auto; padding: 0 1rem; }

.mf-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1100;
  background: var(--mf-muld); color: #fff; padding: .6rem 1rem; font-weight: 700;
}
.mf-skip:focus { left: 0; color: #fff; }

/* ---- Knap ------------------------------------------------------------------ */

.mf .mf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: .55rem 1.15rem;
  border-radius: 6px; border: 0;
  background: var(--mf-skov); color: #fff;
  font-family: var(--mf-sans); font-weight: 700; font-size: .95rem;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s;
}
.mf .mf-btn:hover { background: var(--mf-skov-700); color: #fff; }
.mf .mf-btn--ghost { background: transparent; color: var(--mf-skov); box-shadow: inset 0 0 0 2px var(--mf-skov); }
.mf .mf-btn--ghost:hover { background: var(--mf-skov); color: #fff; }

/* ---- Toplinje -------------------------------------------------------------- */

.mf-topbar { background: var(--mf-skov); color: rgba(255, 255, 255, .88); font-size: .85rem; }
.mf-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.25rem; }
.mf-topbar__date::first-letter { text-transform: uppercase; }
.mf-topbar__wx { white-space: nowrap; }
@media (max-width: 36rem) { .mf-topbar__wx { display: none; } }
.mf-topbar__utils { display: flex; align-items: center; gap: 1.1rem; }
.mf .mf-topbar a, .mf .mf-topbar__login {
  color: #fff; text-decoration: none; font-weight: 500; font-size: .85rem;
  background: none; border: 0; padding: .35rem 0; cursor: pointer;
}
.mf .mf-topbar a:hover, .mf .mf-topbar__login:hover { color: #fff; text-decoration: underline; }

/* ---- Header ---------------------------------------------------------------- */

.mf-header { background: #fff; position: relative; }

.mf-masthead { display: flex; align-items: center; gap: 1.5rem; padding: 1.1rem 0 .9rem; }
.mf-logo { display: block; line-height: 0; flex: none; margin-right: auto; }
.mf-logo img { height: 44px; width: auto; display: block; }

.mf-search { display: flex; flex: 0 1 22rem; min-width: 0; }
.mf-search input {
  flex: 1 1 auto; min-width: 0; min-height: 2.75rem;
  padding: .5rem .9rem; border: 1.5px solid var(--mf-linje); border-right: 0;
  border-radius: 6px 0 0 6px; background: var(--mf-kalk);
  font: inherit; font-size: .95rem; color: var(--mf-muld);
}
.mf-search input:focus { outline: none; border-color: var(--mf-skov); background: #fff; }
.mf-search button {
  flex: none; width: 2.9rem; border: 0; border-radius: 0 6px 6px 0;
  background: var(--mf-skov); color: #fff; font-size: 1rem;
}
.mf-search button:hover { background: var(--mf-skov-700); }

.mf-navrow { display: flex; align-items: center; gap: 1rem; border-top: 1px solid var(--mf-linje); }
.mf-nav { flex: 1 1 auto; min-width: 0; }
.mf-nav__items { display: flex; gap: .15rem; margin: 0; padding: 0; list-style: none; }

.mf .mf-nav__items a, .mf-dd > summary {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 3rem; padding: .5rem .75rem;
  color: var(--mf-muld); font-weight: 700; font-size: .98rem;
  text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent;
}
.mf .mf-nav__items a:hover, .mf-dd > summary:hover { color: var(--mf-skov); box-shadow: inset 0 -3px 0 var(--mf-eng); }
/* Aktivt punkt: understreget i skovgrønt — samme placering som hover, men mørkere. */
.mf .mf-nav__items .is-active > a,
.mf .mf-nav__items .is-active > .mf-dd > summary { color: var(--mf-skov); box-shadow: inset 0 -3px 0 var(--mf-skov); }

.mf-navrow .mf-btn { flex: none; min-height: 2.4rem; padding: .4rem 1rem; font-size: .9rem; }

/* Dropdown: <details>/<summary>, så den virker uden JS og for bots. */
.mf-dd { position: relative; }
.mf-dd > summary { cursor: pointer; list-style: none; }
.mf-dd > summary::-webkit-details-marker { display: none; }
.mf-dd > summary::after {
  content: ""; width: .4em; height: .4em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
}
.mf-dd[open] > summary::after { transform: translateY(.1em) rotate(-135deg); }
.mf-dd__list {
  position: absolute; top: 100%; left: 0; z-index: 1030;
  min-width: 13rem; margin: 0; padding: .35rem; list-style: none;
  background: #fff; border: 1px solid var(--mf-linje); border-radius: 6px;
  box-shadow: 0 14px 30px rgba(24, 35, 30, .14);
}
.mf .mf-dd__list a { display: block; min-height: 0; padding: .5rem .7rem; font-weight: 500; box-shadow: none; }
.mf .mf-dd__list a:hover { background: var(--mf-eng-lys); box-shadow: none; }

/* Byerne: lille række under menuen, scroller vandret på telefon. */
.mf-towns { padding: .1rem 0 .65rem; overflow-x: auto; }
.mf-towns ul { display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.mf .mf-towns a {
  display: inline-flex; align-items: center; min-height: 2rem; padding: .2rem .75rem;
  border-radius: 999px; background: var(--mf-kalk);
  color: var(--mf-tekst-2); font-size: .85rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.mf .mf-towns a:hover { background: var(--mf-eng-lys); color: var(--mf-skov); }
.mf .mf-towns a.is-active { background: var(--mf-skov); color: #fff; }

/* Bakkelinjen under headeren. Hvid header → engbakke → kalk-baggrund. */
.mf-hillrule { display: block; width: 100%; height: 14px; margin-bottom: -1px; }
.mf-hillrule path { fill: var(--mf-eng); }

@media (max-width: 52rem) {
  .mf-topbar__date { display: none; }
  .mf-topbar__inner { justify-content: flex-end; }
  .mf-masthead { flex-wrap: wrap; gap: .75rem; padding: .8rem 0 .7rem; }
  .mf-logo img { height: 36px; }
  .mf-search { flex: 1 1 100%; }
  .mf-navrow { overflow-x: auto; margin: 0 -1rem; padding: 0 1rem; }
  .mf .mf-nav__items a, .mf-dd > summary { min-height: 2.75rem; padding: .45rem .6rem; }
  .mf-navrow .mf-btn { display: none; } /* knappen står i forsidens tip-boks på små skærme */
  /* Menuen scroller vandret og ville klippe en svævende dropdown: fold den ud på stedet. */
  .mf-dd__list { position: static; box-shadow: none; }
}

/* ---- Main ------------------------------------------------------------------ */

/* height:auto + overflow:visible overskriver Blazor.Bootstraps globale main{height:100vh;overflow-x:hidden}.
   min-height holder footeren nede mens hydreringen udskifter <main>-undertræet (som ryslinge.css). */
.mf-main { padding: 2rem 0 3.5rem; min-height: 100vh; height: auto; overflow: visible; }
.mf-main:focus { outline: none; }

/* ---- Footer ---------------------------------------------------------------- */

.mf-footer { margin-top: 2rem; }
.mf-footer__hills { display: block; width: 100%; height: clamp(48px, 7vw, 110px); margin-bottom: -1px; }
.mf-footer__hill-back { fill: var(--mf-eng); }
.mf-footer__hill-front { fill: var(--mf-skov); }
.mf-footer__body { background: var(--mf-skov); color: rgba(255, 255, 255, .86); padding: 1.5rem 0 1.25rem; }

.mf-footer__grid {
  /* auto-fit kan ikke kombineres med en fr-kolonne, så "om"-kolonnen fylder i stedet to spor. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem; margin-bottom: 2rem;
}
.mf-footer__about { grid-column: span 2; }
.mf-footer__logo { height: 37px; width: auto; display: block; margin-bottom: .9rem; }
.mf-footer__about p { max-width: 34ch; margin: 0; font-size: .95rem; line-height: 1.6; }
.mf .mf-footer__head {
  font-family: var(--mf-sans); font-size: .95rem; font-weight: 800; letter-spacing: 0;
  color: #fff; margin: 0 0 .7rem;
}
.mf-footer ul { margin: 0; padding: 0; list-style: none; }
.mf-footer li { margin-bottom: .4rem; }
.mf .mf-footer a { color: rgba(255, 255, 255, .86); text-decoration: none; font-size: .95rem; }
.mf .mf-footer a:hover { color: #fff; text-decoration: underline; }

/* Kolofonen (#72): diskret række over bundlinjen — samme lille, dæmpede tekst som bundlinjen. */
.mf-footer__colophon {
  padding: 1.1rem 0; border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .85rem; line-height: 1.6; color: rgba(255, 255, 255, .7);
}
.mf .mf-footer .mf-footer__colophon a { font-size: .85rem; }
.mf-footer__colophon + .mf-footer__bottom { padding-top: 1.1rem; }

.mf-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .85rem; color: rgba(255, 255, 255, .7);
}
.mf-footer__nabolo { line-height: 0; }
.mf-footer__nabolo img { height: 28px; width: auto; }

@media (max-width: 52rem) {
  .mf-footer__grid { grid-template-columns: 1fr 1fr; }
  .mf-footer__about { grid-column: 1 / -1; }
}

/* ============================================================================
   Forsiden
   ============================================================================ */

.mf-front { display: grid; gap: 3rem; }

/* Metalinje: sektion i skovgrøn + tid i grå. Mellemrum, ingen prik-separator. */
.mf-meta { display: flex; flex-wrap: wrap; gap: .2rem .7rem; font-size: .82rem; color: var(--mf-tekst-2); }
.mf-meta__section { color: var(--mf-skov); font-weight: 700; }
.mf-meta .cms-sponsored { margin: 0; align-self: center; } /* Annoncørbetalt (#88) */
.mf-meta .cms-breaking { margin: 0; align-self: center; } /* Netop nu (#107) */
.mf-front .mf-breaking .cms-breaking-line__link,
.mf-front .mf-breaking .cms-breaking-line__link:hover { color: #fff; }

.mf .mf-h2 { font-size: 1.5rem; margin: 0; }

.mf-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.mf .mf-sechead a { font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.mf .mf-sechead a:hover { text-decoration: underline; }

/* Tophistorie + "Også i dag" ------------------------------------------------- */

.mf-lead { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }

.mf .mf-lead__link { display: block; color: inherit; text-decoration: none; }
.mf-lead__img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: var(--mf-eng-lys); margin-bottom: 1rem; }
.mf-lead__img img, .mf-lead__img picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.mf .mf-lead__title {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); font-weight: 700; line-height: 1.04;
  letter-spacing: -.015em; margin: .45rem 0 .7rem; max-width: 20ch; text-wrap: balance;
}
.mf .mf-lead__link:hover .mf-lead__title { color: var(--mf-skov); }
.mf-lead__summary { font-size: 1.15rem; line-height: 1.5; color: var(--mf-tekst-2); margin: 0; max-width: 60ch; }

.mf-lead__side { border-top: 4px solid var(--mf-muld); padding-top: .9rem; }
.mf-headlines { list-style: none; margin: .4rem 0 0; padding: 0; }
.mf-headlines li + li { border-top: 1px solid var(--mf-linje); }
.mf .mf-headlines a { display: grid; gap: .3rem; padding: .95rem 0; color: inherit; text-decoration: none; }
.mf-headlines__title { font-family: var(--mf-serif); font-weight: 600; font-size: 1.28rem; line-height: 1.2; text-wrap: pretty; }
.mf .mf-headlines a:hover .mf-headlines__title { color: var(--mf-skov); }

/* Kalender-striben --------------------------------------------------------- */

.mf-cal { background: #fff; border-radius: 6px; padding: 1.4rem 1.4rem 1.2rem; }
.mf-cal__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none;
}
.mf .mf-cal__item { display: flex; gap: .9rem; align-items: flex-start; padding: .55rem 0; color: inherit; text-decoration: none; }
.mf-cal__date {
  flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem;
  border-radius: 4px; background: var(--mf-raps); color: var(--mf-muld); line-height: 1;
}
.mf-cal__date .d { font-family: var(--mf-serif); font-weight: 700; font-size: 1.45rem; }
.mf-cal__date .m { font-size: .72rem; font-weight: 700; margin-top: -.6rem; }
.mf-cal__body { display: grid; gap: .15rem; min-width: 0; }
.mf-cal__title { font-weight: 700; line-height: 1.25; }
.mf .mf-cal__item:hover .mf-cal__title { color: var(--mf-skov); text-decoration: underline; }
.mf-cal__when { font-size: .85rem; color: var(--mf-tekst-2); }
.mf-cal__when::first-letter { text-transform: uppercase; }

/* By-vælger + "Nyt fra {by}" --------------------------------------------------- */
.mf-townpick { display: flex; gap: .45rem; align-items: center; overflow-x: auto; padding: .2rem 0 1rem; scrollbar-width: thin; }
.mf-townpick__lbl { font-size: .82rem; font-weight: 700; color: var(--mf-tekst-2); margin-right: .3rem; white-space: nowrap; }
.mf .mf-chip { flex: none; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--mf-linje); background: #fff; color: var(--mf-muld); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.mf .mf-chip:hover { border-color: var(--mf-skov); }
.mf .mf-chip.is-on { background: var(--mf-skov); border-color: var(--mf-skov); color: #fff; }
.mf-town__grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.mf-town__none { color: var(--mf-tekst-2); }
.mf-now { border: 1px solid var(--mf-linje); border-radius: 6px; background: #fff; overflow: hidden; }
.mf .mf-now__h { margin: 0; padding: .8rem 1rem; background: var(--mf-skov); color: #fff; font-size: 1rem; }
.mf .mf-now__row { display: grid; gap: .1rem; padding: .7rem 1rem; border-top: 1px solid var(--mf-linje); margin: 0; color: inherit; text-decoration: none; }
.mf .mf-now__h + .mf-now__row { border-top: 0; }
.mf .mf-now__row:hover span:last-child { color: var(--mf-skov); text-decoration: underline; }
.mf-now__k { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-tekst-2); }

/* Seneste nyt --------------------------------------------------------------- */

.mf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.mf .mf-teaser a { display: grid; gap: .45rem; color: inherit; text-decoration: none; }
.mf-teaser__img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: var(--mf-eng-lys); }
.mf-teaser__img img, .mf-teaser__img picture { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Uden billede: bakken fra mærket som stille flade. */
.mf-teaser__noimg {
  display: block; width: 100%; height: 100%;
  background:
    radial-gradient(120% 60% at 30% 105%, var(--mf-eng) 49.5%, transparent 50%),
    var(--mf-eng-lys);
}
.mf .mf-teaser__title { font-size: 1.15rem; font-weight: 600; line-height: 1.22; margin: 0; text-wrap: pretty; }
.mf .mf-teaser a:hover .mf-teaser__title { color: var(--mf-skov); }

/* Tip-boks ------------------------------------------------------------------- */

.mf-tip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  padding: 1.6rem 1.6rem; border-radius: 6px; background: var(--mf-eng-lys);
}
.mf-tip p { margin: .4rem 0 0; max-width: 58ch; color: var(--mf-tekst-2); }
.mf-tip__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Tom forside ------------------------------------------------------------------ */

.mf-empty { max-width: 40rem; padding: 3rem 0; }
.mf-empty h1 { font-size: 2.4rem; margin: 0 0 .75rem; }
.mf-empty p { color: var(--mf-tekst-2); margin-bottom: 1.25rem; }

@media (max-width: 62rem) {
  .mf-lead { grid-template-columns: 1fr; gap: 1.75rem; }
  .mf-town__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .mf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 36rem) {
  .mf-front { gap: 2.25rem; }
  .mf-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .mf-cal { padding: 1.1rem 1rem; }
}

/* Fra byerne + Navne ---------------------------------------------------------- */
.mf-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.mf-towngrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.mf .mf-towncol h3 { font-family: var(--mf-sans, inherit); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .5rem; }
.mf .mf-towncol h3 a { color: var(--mf-skov); text-decoration: none; }
.mf-towncol ul, .mf-names ul { list-style: none; margin: 0; padding: 0; }
.mf-towncol li { border-top: 1px solid var(--mf-linje); padding: .6rem 0; }
.mf .mf-towncol li a, .mf .mf-names li a { color: inherit; text-decoration: none; font-family: var(--mf-serif); font-weight: 600; line-height: 1.25; }
.mf .mf-towncol li a:hover, .mf .mf-names li a:hover { color: var(--mf-skov); }
.mf-names { background: var(--mf-eng-lys); border-radius: 6px; padding: 1.2rem; display: grid; gap: .8rem; align-content: start; }
.mf-names li + li { border-top: 1px solid var(--mf-linje); padding-top: .6rem; margin-top: .6rem; }
/* Guide-indgange ---------------------------------------------------------------- */
.mf-guide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.mf .mf-guide__card { display: grid; align-content: end; gap: .2rem; min-height: 7rem; padding: 1rem; border-radius: 6px; color: #fff; text-decoration: none; }
.mf .mf-guide__card b { font-family: var(--mf-serif); font-size: 1.3rem; }
.mf .mf-guide__card span { font-size: .85rem; opacity: .9; }
.mf .mf-guide__card:hover b { text-decoration: underline; }
.mf-guide__card--skov { background: var(--mf-skov); } .mf-guide__card--soe { background: #22707D; }
.mf-guide__card--eng { background: #4E7F36; } .mf-guide__card--muld { background: var(--mf-muld); }

/* Annoncerækker */
.mf-adrow { display: grid; justify-items: center; }
.mf-adrow:empty { display: none; }

/* Placeret efter basisreglerne, så de vinder */
@media (max-width: 62rem) {
  .mf-split { grid-template-columns: 1fr; }
  .mf-towngrid, .mf-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 36rem) {
  .mf-towngrid { grid-template-columns: 1fr; }
}