/*
 * Medify Academy – ämneskort och kommande utbildningar (elements/academy-amnen.php).
 * Ämneskorten följer formen på sajtens egna Academy-kort: mörkgrönt, serif-rubrik,
 * "läs mer"-rad. Färger och mått kommer från Core Framework med reservvärden.
 */

.mdfa {
	--mdfa-mork: var(--academy-dark, #26533d);
	--mdfa-gron: var(--academy, #4d8b31);
	--mdfa-brun: var(--academy-brown, #502419);
	--mdfa-cream: var(--bg-secondary, #f0ebd8);
	--mdfa-serif: "DMSerifDisplay", Georgia, serif;
	width: 100%;
	max-width: var(--width-max, 1200px);
	margin: var(--space-xl, 2.5rem) auto 0;
	padding-inline: var(--space-s, 1rem);
	box-sizing: border-box;
	text-align: left;
}

.mdfa ul { list-style: none; margin: 0; padding: 0; }
.mdfa-amne, .mdfa-kurs, .mdfa-rad, .mdfa-cta { box-sizing: border-box; }

/* ---------- Ämneskort ---------- */

.mdfa-amnen { display: grid; gap: 1.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Två eller fyra ämnen: två kolumner i stället för 3 + 1 */
.mdfa-amnen:has(> li:nth-child(2):last-child),
.mdfa-amnen:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mdfa-amne { position: relative; overflow: hidden; min-height: 280px; border-radius: 12px; background: var(--mdfa-mork); color: #fff; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.mdfa-amne:hover, .mdfa-amne:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); outline: none; }
.mdfa-amne:focus-visible { outline: 3px solid var(--mdfa-gron); outline-offset: 2px; }
.mdfa-amne__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Grön toning från vänster så att texten alltid går att läsa mot fotot */
.mdfa-amne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--mdfa-mork) 30%, rgba(38, 83, 61, .78) 55%, rgba(38, 83, 61, .15) 100%); }
.mdfa-amne__inre { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .6rem; min-height: 280px; max-width: 72%; padding: 1.75rem; box-sizing: border-box; }
.mdfa .mdfa-amne__titel { margin: 0; font-family: var(--mdfa-serif); font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); line-height: 1.15; color: #fff; }
.mdfa .mdfa-amne__antal { margin: 0; font-size: 1rem; color: #fff; }
.mdfa-amne__typer { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; }
.mdfa-amne__typer li { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem .2rem .25rem; border-radius: 999px; background: var(--mdfa-cream); color: var(--mdfa-brun); font-size: .8rem; font-weight: 600; }
.mdfa-amne__typer img { display: block; width: 22px; height: 22px; }
.mdfa-amne__mer { margin-top: auto; padding-top: .75rem; font-size: .9rem; font-weight: 700; }

/* ---------- Kommande utbildningar ---------- */

.mdfa-kal { margin-top: var(--space-2xl, 3.5rem); }
.mdfa > .mdfa-kal:first-child { margin-top: 0; }
.mdfa-kal__head { max-width: 640px; margin: 0 auto 1.75rem; text-align: center; }
.mdfa .mdfa-kal__rubrik { margin: 0 0 .5rem; font-family: var(--mdfa-serif); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); color: var(--mdfa-brun); }
.mdfa .mdfa-kal__under { margin: 0; font-size: 1rem; line-height: 1.5; }
.mdfa-kal__lista { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mdfa-kurs { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; border: 1px solid color-mix(in srgb, var(--mdfa-gron) 22%, transparent); border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.mdfa-kurs:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .12); }
.mdfa-kurs:focus-visible { outline: 3px solid var(--mdfa-gron); outline-offset: 2px; }
.mdfa-kurs__topp { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.mdfa-kurs__amne { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: right; color: var(--mdfa-gron); }
.mdfa-kurs__amne img { width: 40px; height: 40px; }
.mdfa .mdfa-kurs__titel { margin: .2rem 0 0; font-family: var(--mdfa-serif); font-size: 1.3rem; line-height: 1.25; color: var(--mdfa-brun); }
.mdfa .mdfa-kurs__text { margin: 0; font-size: .95rem; line-height: 1.5; }
.mdfa-kurs__mer { font-size: .85rem; font-weight: 700; color: var(--mdfa-gron); }
.mdfa-kurs__fot { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin-top: auto; padding-top: .5rem; }

.mdfa-datum { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 74px; padding: .5rem .6rem; border-radius: 12px; background: var(--mdfa-mork); color: #fff; line-height: 1.1; text-align: center; }
.mdfa-datum__dag { font-family: var(--mdfa-serif); font-size: 1.9rem; }
.mdfa-datum__man { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.mdfa-datum__tid { margin-top: .2rem; font-size: .75rem; opacity: .85; }
.mdfa-datum--lopande { background: var(--mdfa-cream); color: var(--mdfa-brun); }
.mdfa-datum--lopande .mdfa-datum__dag { font-size: 1.15rem; }

/* ---------- Delade delar ---------- */

.mdfa-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.mdfa-chips span { padding: .15rem .55rem; border-radius: 999px; background: var(--mdfa-cream); color: var(--mdfa-brun); font-size: .75rem; font-weight: 600; }
.mdfa-chips span:first-child { background: var(--mdfa-gron); color: #fff; }

.mdfa a.mdfa-knapp { display: inline-block; padding: .6rem 1.1rem; border-radius: 999px; background: var(--mdfa-gron); color: #fff; font-size: .9rem; font-weight: 700; line-height: 1.2; text-decoration: none; }
.mdfa a.mdfa-knapp:hover { filter: brightness(1.1); color: #fff; }
.mdfa a.mdfa-knapp--stor { padding: .8rem 1.5rem; font-size: 1.05rem; }
.mdfa a.mdfa-lank { font-size: .85rem; color: var(--mdfa-brun); }

.mdfa-svep { display: none; }
@keyframes mdfa-pil { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* ---------- Popup ---------- */

html.mdfa-oppen { overflow: hidden; }
.mdfa-modal { width: min(680px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: 16px; overflow: hidden; color: inherit; text-align: left; }
.mdfa-modal::backdrop { background: rgba(20, 30, 20, .6); }
.mdfa-modal__inre { position: relative; max-height: calc(100dvh - 2rem); overflow-y: auto; }
.mdfa-modal__stang { position: absolute; top: .75rem; right: .75rem; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #222; font-size: 1.75rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.mdfa-modal__foto { background: var(--mdfa-cream); }
.mdfa-modal__foto img { display: block; width: 100%; height: auto; max-height: 40vh; object-fit: cover; }
.mdfa-modal__text { display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem; }
.mdfa-modal__topp { display: flex; align-items: center; gap: 1rem; padding-right: 3rem; }
.mdfa-modal__rund { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.mdfa-modal .mdfa-modal__amne { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mdfa-gron); }
.mdfa-modal .mdfa-modal__titel { margin: 0; font-family: var(--mdfa-serif); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.2; color: var(--mdfa-brun); }
.mdfa-modal .mdfa-modal__datum { margin: 0; font-size: 1rem; font-weight: 600; }
.mdfa-modal .mdfa-modal__ingress { margin: 0; font-size: 1.05rem; line-height: 1.5; font-weight: 500; }
.mdfa-modal .mdfa-modal__stycke { margin: 0; font-size: 1rem; line-height: 1.55; }
.mdfa-modal .mdfa-last { display: flex; align-items: center; gap: .45rem; margin: 0; padding: .8rem 1rem; border: 1px dashed color-mix(in srgb, var(--mdfa-gron) 50%, transparent); border-radius: 12px; font-size: .95rem; font-weight: 600; color: var(--mdfa-brun); }
.mdfa-modal .mdfa-last svg { flex: 0 0 auto; }

.mdfa-rader { display: flex; flex-direction: column; gap: .6rem; }
.mdfa-rad { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--mdfa-gron) 30%, transparent); border-radius: 12px; background: #fff; cursor: pointer; transition: box-shadow .2s; }
.mdfa-rad:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.mdfa-rad:focus-visible { outline: 3px solid var(--mdfa-gron); outline-offset: 2px; }
.mdfa-modal .mdfa-rad__titel { margin: 0; font-family: var(--mdfa-serif); font-size: 1.15rem; line-height: 1.25; color: var(--mdfa-brun); }
.mdfa-modal .mdfa-rad__text { margin: 0; font-size: .95rem; line-height: 1.5; }
.mdfa-rad__mer { font-size: .85rem; font-weight: 700; color: var(--mdfa-gron); }

.mdfa-cta { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1.25rem; border-radius: 12px; background: var(--mdfa-cream); }
.mdfa-modal .mdfa-cta__rubrik { margin: 0; font-family: var(--mdfa-serif); font-size: 1.4rem; line-height: 1.25; color: var(--mdfa-brun); }
.mdfa-modal .mdfa-cta__text { margin: 0; font-size: 1rem; line-height: 1.5; }

/* ---------- Platta ---------- */

@media (max-width: 991px) {
	.mdfa-amnen, .mdfa-kal__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobil: korten sveps i sidled, nästa kort sticker fram ---------- */

@media (max-width: 767px) {
	.mdfa-amnen, .mdfa-kal__lista,
	.mdfa-amnen:has(> li:nth-child(2):last-child),
	.mdfa-amnen:has(> li:nth-child(4):last-child) { display: flex; gap: .9rem; margin-inline: calc(-1 * var(--space-s, 1rem)); padding: .25rem var(--space-s, 1rem) 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-s, 1rem); scrollbar-width: none; }
	.mdfa-amnen::-webkit-scrollbar, .mdfa-kal__lista::-webkit-scrollbar { display: none; }
	.mdfa-amne, .mdfa-kurs { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
	.mdfa-kurs__amne { min-width: 0; overflow-wrap: anywhere; }
	.mdfa-amne, .mdfa-amne__inre { min-height: 240px; }
	.mdfa-amne__inre { max-width: 80%; padding: 1.4rem; }
	.mdfa-svep { display: block; margin: .25rem 0 0; text-align: center; font-size: .85rem; font-weight: 600; color: var(--mdfa-brun); }
	.mdfa-svep span { display: inline-block; animation: mdfa-pil 1.4s ease-in-out infinite; }

	.mdfa-modal { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
	.mdfa-modal__inre { max-height: 92dvh; }
	.mdfa-modal__text { padding: 1.25rem 1rem 1.5rem; }
	.mdfa-modal__foto img { max-height: 32vh; }
	.mdfa a.mdfa-knapp--stor { width: 100%; box-sizing: border-box; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.mdfa-svep span { animation: none; }
	.mdfa-amne, .mdfa-kurs, .mdfa-rad { transition: none; }
}