/* gulspejder_test — designet lagt oven på bootstrap_packages eksisterende indholdselementer.
   BP styrer frames med CSS-variabler (--frame-spacing, --frame-background, --frame-color);
   de sættes her til designets sektionsmål og flader i stedet for at omskrive skabelonerne. */

/* ---- Sektionsrytme og indholdsbredde ----
   BP indlejrer .frame-group-container og .frame-container med hver sin max-width/padding
   (og nulstiller paddingen inde i group-inner), hvilket gav venstrestillede sektioner på
   desktop. Her får kun den inderste container designets centrerede bredde og margen. */
.frame{--frame-spacing:40px}
.frame .frame-group-container{max-width:none;padding-left:0;padding-right:0}
.frame .frame-group-inner .frame-container-default{box-sizing:border-box;width:100%;max-width:var(--content-max);margin-left:auto;margin-right:auto;padding-left:var(--gutter-mobile);padding-right:var(--gutter-mobile)}
@media (min-width:768px){
  .frame .frame-group-inner .frame-container-default{padding-left:var(--gutter-desktop);padding-right:var(--gutter-desktop)}
}
@media (min-width:1024px){
  .frame{--frame-spacing:88px}
}
/* Elementer i top-kolonnen (hero) har ingen luft omkring sig */
.gs-top>.frame,.gs-top .frame{--frame-spacing:0}

/* ---- Frame-baggrunde = designets fladetyper ---- */
.frame-background-primary{--frame-background:var(--surface-brand);--frame-color:#fff;--frame-link-color:#fff;--frame-link-hover-color:#fff}
.frame-background-secondary{--frame-background:var(--surface-inverse);--frame-color:#fff;--frame-link-color:#fff;--frame-link-hover-color:#fff}
.frame-background-tertiary{--frame-background:var(--surface-sunken);--frame-color:var(--text-body);--frame-link-color:var(--text-link);--frame-link-hover-color:var(--text-link-hover)}
.frame-background-primary :is(h1,h2,h3,h4),.frame-background-secondary :is(h1,h2,h3,h4){color:#fff}
.frame-background-primary .gs-overline,.frame-background-secondary .gs-overline{color:var(--yellow-300)}
/* BP lægger vandret padding på farvede frames; designets sektioner bruger den normale margen */
.frame-background-primary:not(.frame-layout-embedded),.frame-background-secondary:not(.frame-layout-embedded),.frame-background-tertiary:not(.frame-layout-embedded){padding-left:0;padding-right:0}

/* ---- Sektionshoved (Header/All-override) ---- */
.frame-header.gs-sectionhead :is(h1,h2,h3,h4){margin:0}
.frame-header.gs-sectionhead h2{font-size:clamp(32px,4vw,48px)}
.gs-sectionhead__more{flex-shrink:0}

/* ---- Overskriftsstilen "Display" (header_class gs-display) ---- */
.frame :is(h1,h2).gs-display{font-size:clamp(40px,5.6vw,80px)}

/* ---- Tekst: brødtekstbredde og RTE-knapper ---- */
.frame-type-text .frame-inner>p,.frame-type-textmedia .ce-bodytext>p{max-width:var(--text-max)}
.frame a.gs-btn{text-decoration:none}
.frame-background-primary .frame-inner>p{font-size:17px;line-height:1.55}
/* En RTE-link med klassen gs-btn--arrow får designets pil (Lucide arrow-right) */
.gs-btn--arrow::after{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("../Icons/Lucide/arrow-right.svg") center/contain no-repeat;mask:url("../Icons/Lucide/arrow-right.svg") center/contain no-repeat}

/* Helrød tekstsektion: overskrift venstre, tekst + knap højre på desktop (Main.dc.html) */
@media (min-width:1024px){
  .frame-type-text.frame-background-primary .frame-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:64px;align-items:center}
  .frame-type-text.frame-background-primary :is(h1,h2).gs-display{font-size:clamp(40px,5vw,72px)}
  .frame-type-text.frame-background-primary .frame-inner>.frame-header{grid-column:1;grid-row:1 / span 20;margin:0}
  .frame-type-text.frame-background-primary .frame-inner>:not(.frame-header){grid-column:2}
  .frame-background-primary .frame-inner>p{font-size:21px}
}

/* ================= Fase 3: eksisterende elementer i designets udgave ================= */
[hidden]{display:none!important}

/* ---- Lead-tekst (RTE-klassen "lead") ---- */
.frame p.lead{font-size:18px;line-height:1.6;color:var(--text-strong)}
@media (min-width:1024px){.frame p.lead{font-size:22px}}

/* ---- Textmedia, billede centreret til højre (Bliv spejder-introen) ---- */
.textmedia-centered.textmedia-right{display:flex;flex-direction:column;gap:24px}
.textmedia-centered.textmedia-right .textmedia-gallery img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.textmedia-centered.textmedia-right .textmedia-item{width:auto;max-width:none;flex:none;margin:0;padding:0}
.textmedia-centered.textmedia-right .textmedia-gallery{order:2;margin:0 calc(-1 * var(--gutter-mobile))}
.textmedia-centered.textmedia-right .textmedia-gallery :is(.gallery-row,.gallery-item,figure,picture,a){display:block;width:100%;max-width:none;flex:none;margin:0;padding:0}
.textmedia-centered.textmedia-right .textmedia-gallery img{width:100%!important;max-width:none}
@media (min-width:1024px){
  .textmedia-centered.textmedia-right{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
  .textmedia-centered.textmedia-right .textmedia-gallery{margin:0}
  .textmedia-centered.textmedia-right .textmedia-gallery img{aspect-ratio:5/4;border-radius:var(--radius-xl)}
}

/* ---- Tab (BP tab) som designets segmenterede pille-faner ---- */
.frame-type-tab .tab-navigation .nav-tabs{display:flex;gap:4px;padding:4px;background:var(--surface-sunken);border:0;border-radius:var(--radius-pill);max-width:420px}
.frame-type-tab .nav-tabs .nav-link{flex:1;height:40px;padding:0 12px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-muted);font-size:15px;font-weight:var(--fw-semibold);white-space:nowrap;margin:0}
.frame-type-tab .nav-tabs .nav-link:hover{color:var(--text-strong)}
.frame-type-tab .nav-tabs .nav-link.active{background:var(--surface-card);color:var(--text-strong);box-shadow:var(--shadow-1)}
.frame-type-tab .tab-content{margin-top:20px;max-width:var(--text-max)}
.frame-type-tab .tab-pane-content-text>:last-child{margin-bottom:0}

/* ---- Accordion (BP accordion) som designets FAQ ---- */
.frame-type-accordion{--frame-background:var(--surface-sunken)}
.frame-type-accordion .accordion{--bs-accordion-bg:transparent;--bs-accordion-border-width:0;--bs-accordion-border-radius:0;--bs-accordion-inner-border-radius:0;border-top:1px solid var(--border-default)}
.frame-type-accordion .accordion-item{border:0;border-bottom:1px solid var(--border-default);background:transparent}
.frame-type-accordion .accordion-header{margin:0;font-family:var(--font-body)}
.frame-type-accordion .accordion-button{position:relative;display:flex;min-height:60px;padding:14px 44px 14px 0;background:none;box-shadow:none;font-family:var(--font-body);font-stretch:100%;font-size:17px;font-weight:var(--fw-semibold);letter-spacing:0;color:var(--text-strong)}
.frame-type-accordion .accordion-button:not(.collapsed){background:none;color:var(--text-strong);box-shadow:none}
.frame-type-accordion .accordion-button:focus{box-shadow:none}
.frame-type-accordion .accordion-button::after{content:"";position:absolute;right:0;top:50%;width:32px;height:32px;margin:-16px 0 0;border-radius:50%;background:var(--surface-card);background-image:none;transform:none;transition:background var(--dur-base)}
.frame-type-accordion .accordion-button::before{content:"";position:absolute;right:7px;top:50%;z-index:1;width:18px;height:18px;margin-top:-9px;background:var(--text-strong);-webkit-mask:url("../Icons/Lucide/plus.svg") center/contain no-repeat;mask:url("../Icons/Lucide/plus.svg") center/contain no-repeat}
.frame-type-accordion .accordion-button:not(.collapsed)::after{background:var(--brand)}
.frame-type-accordion .accordion-button:not(.collapsed)::before{background:#fff;-webkit-mask-image:url("../Icons/Lucide/minus.svg");mask-image:url("../Icons/Lucide/minus.svg")}
.frame-type-accordion .accordion-body{padding:0 44px 18px 0;font-size:16px;line-height:1.6;color:var(--text-body)}
.frame-type-accordion .accordion-content-text>:last-child{margin-bottom:0}
@media (min-width:1024px){
  .frame-type-accordion{--frame-background:transparent}
  .frame-type-accordion .accordion-button::after{background:var(--surface-sunken)}
  .frame-type-accordion .frame-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;align-items:start}
  .frame-type-accordion .frame-inner>.frame-header{margin:0}
}

/* ---- Card group (card_extender, StandardCard): hvidt kort / foto-kort ---- */
.frame-type-card_group .card-group-element{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin:0}
.frame-type-card_group .card-group-element-item{width:auto;max-width:none;flex:none;margin:0;padding:0}
.frame-type-card_group .card{position:relative;height:100%;overflow:hidden;padding:24px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-l);box-shadow:var(--shadow-1)}
.frame-type-card_group .card-body,.frame-type-card_group .card-footer{position:relative;z-index:2;padding:0;background:none;border:0}
.frame-type-card_group .card-body a{color:inherit;text-decoration:none}
.frame-type-card_group .card-title{font-size:28px;margin:0 0 10px}
.frame-type-card_group .card-subtitle{font-size:var(--fs-small);margin:0 0 8px}
.frame-type-card_group .card-text{font-size:17px}
.frame-type-card_group .card-text>:last-child{margin-bottom:0}
.frame-type-card_group .card-footer{margin-top:20px}
.frame-type-card_group .card-footer .btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--radius-pill);border:var(--border-w-strong) solid var(--border-strong);background:transparent;color:var(--text-strong);font-weight:var(--fw-semibold);font-size:16px;line-height:1;text-decoration:none}
.frame-type-card_group .card-footer .btn:hover{background:var(--surface-sunken)}
.frame-type-card_group .card-footer .btn-icon{display:inline-flex}
.frame-type-card_group .card-footer .btn-icon svg{width:19px;height:19px}
/* Foto-varianten ("Start ny spejdergruppe") */
.frame-type-card_group .card-has-image .card{background:var(--surface-inverse);color:rgba(255,255,255,.9);border:0}
.frame-type-card_group .card-has-image .card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,38,27,.96) 40%,rgba(20,38,27,.55))}
.frame-type-card_group .card-has-image .card-img-top{position:absolute;inset:0;margin:0}
.frame-type-card_group .card-has-image .card-img-top :is(a,picture,figure,img){display:block;width:100%;height:100%;margin:0}
.frame-type-card_group .card-has-image .card-img-top img{object-fit:cover}
.frame-type-card_group .card-has-image .card-title{color:#fff}
.frame-type-card_group .card-has-image .card-footer .btn{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.frame-type-card_group .card-has-image .card-footer .btn:hover{background:var(--yellow-300)}
@media (min-width:1024px){
  .frame-type-card_group .card-group-element{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
  .frame-type-card_group .card{padding:32px}
}

/* ---- Container (2 kolonner) — grensidens lead + "Kommende for …" ---- */
.contentcontainer{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.contentcontainer-column{display:flex;flex-direction:column;gap:16px;min-width:0}
.contentcontainer .frame{--frame-spacing:0;margin:0}
.contentcontainer .frame .frame-group-inner .frame-container-default{max-width:none;padding-left:0;padding-right:0}
.contentcontainer .frame-background-tertiary{border-radius:var(--radius-l);--frame-spacing:24px}
.contentcontainer .frame-background-tertiary .frame-group-inner .frame-container-default{padding-left:24px;padding-right:24px}
.contentcontainer .frame-header h3{font-size:24px}
@media (min-width:1024px){
  .contentcontainer{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:64px;align-items:start}
}
/* RTE-link med klassen gs-btn--pin får designets kortnål foran teksten */
.gs-btn--pin::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("../Icons/Lucide/map-pin.svg") center/contain no-repeat;mask:url("../Icons/Lucide/map-pin.svg") center/contain no-repeat}