/* Inspiration på forsiden: samme karrusel som bloggen i butikken (kort med glasfelt, scroll mod venstre, pile) */
/* Går ud over hovedspalten, så kortene kan scrolle helt ud til skærmkanten */
.insp-section { width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 72px 0 24px; overflow-x: clip; }
.insp-head { max-width: 1100px; margin: 0 auto; padding: 0 var(--insp-gutter, 20px); }
.insp-head h2 { margin: 0; font-family: var(--sans); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.02; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.insp-section { --insp-gutter: clamp(20px, 4.5vw, 64px); }
.insp-track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  padding: 28px var(--insp-gutter) 30px; scroll-padding-inline: var(--insp-gutter);
}
.insp-track::-webkit-scrollbar { display: none; }
/* På brede skærme starter første kort lige under overskriften */
@media (min-width: 1240px) {
  .insp-track { padding-left: calc((100vw - 1100px) / 2 + var(--insp-gutter)); scroll-padding-inline-start: calc((100vw - 1100px) / 2 + var(--insp-gutter)); }
}
.insp-card {
  position: relative; flex: 0 0 min(78vw, 340px); aspect-ratio: 3 / 4.1; scroll-snap-align: start; border-radius: 10px; overflow: hidden;
  isolation: isolate; background: #CFCBC2; box-shadow: 0 20px 34px -18px rgba(18, 25, 15, .38); color: #fff; display: block; text-decoration: none;
  transition: transform .3s, box-shadow .3s;
}
.insp-card:hover { transform: translateY(-5px); box-shadow: 0 28px 42px -18px rgba(18, 25, 15, .5); }
.insp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.insp-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -1; transition: transform .7s; }
.insp-card:hover > img { transform: scale(1.05); }
.insp-glass {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; background: rgba(24, 32, 22, .42);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
}
.insp-tag { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.insp-card h3 { margin: 0; font-family: var(--sans); font-size: 1.42rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; color: #fff; }
.insp-more { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 500; color: rgba(255, 255, 255, .92); }
.insp-more svg { width: 15px; height: 15px; transition: transform .2s; }
.insp-card:hover .insp-more svg { transform: translateX(4px); }
.insp-all { background: var(--accent); }
.insp-all .insp-glass { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 26px 24px; }
.insp-all .insp-tag { color: #AEC7A8; }
.insp-all h3 { font-size: 2.3rem; margin-top: 12px; }
.insp-all-arrow { position: absolute; top: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--go); color: #000; display: grid; place-items: center; }
.insp-all-arrow svg { width: 20px; height: 20px; }
.insp-nav { max-width: 1100px; margin: -6px auto 0; padding: 0 var(--insp-gutter); display: flex; justify-content: flex-end; gap: 22px; }
.insp-nav button { appearance: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--accent); display: grid; place-items: center; cursor: pointer; }
.insp-nav button:disabled { opacity: .3; cursor: default; }
.insp-nav svg { width: 22px; height: 22px; }
@media (max-width: 860px) { .insp-card h3 { font-size: 1.3rem; } .insp-section { padding-top: 56px; } }
@media (prefers-reduced-motion: reduce) { .insp-track { scroll-behavior: auto; } .insp-card, .insp-card > img { transition: none; } }