/* ==========================================================================
   Slotsferie Danmark — hero-splitter ("Hvad søger I rammerne til?")
   Port of the Claude Design proposal (forside med ny menu, .choose/.panels).
   Tokens are scoped to the element so nothing leaks into the rest of the site.
   ========================================================================== */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('playfair-display-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.sfd-choose {
  --sfd-navy: #2B2B60;
  --sfd-navy-600: #3D3D7A;
  --sfd-slate: #6A7D8E;
  --sfd-sand-50: #F7F3EE;
  --sfd-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sfd-font-sans: 'Raleway', system-ui, sans-serif;
  --sfd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sfd-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sfd-offset: 0px; /* set by frontend.js to the height of the site header above the element */

  /* full-bleed, also when the element sits inside a .container column */
  position: relative;
  width: var(--sfd-vw, 100vw); /* frontend.js sets the scrollbar-free viewport width */
  margin-left: calc(50% - var(--sfd-vw, 100vw) / 2);
  margin-top: var(--sfd-overlap, 0px); /* frontend.js: room for a site header taller than the space the page reserves */
  display: flex;
  flex-direction: column;
  height: clamp(600px, calc(100svh - var(--sfd-offset)), 1040px);
  background: var(--sfd-sand-50);
  font-family: var(--sfd-font-sans);
  box-sizing: border-box;
}
.sfd-choose *, .sfd-choose *::before, .sfd-choose *::after { box-sizing: border-box; }

.sfd-choose__head { flex: none; text-align: center; padding: clamp(14px, 2.2vh, 26px) 20px clamp(12px, 1.8vh, 20px); }
.sfd-eyebrow { font-family: var(--sfd-font-sans); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--sfd-slate); margin: 0 0 9px; }
.sfd-choose__head h1 { font-family: var(--sfd-font-display); font-weight: 700; color: var(--sfd-navy); letter-spacing: -0.005em;
  font-size: clamp(1.8rem, 3vw, 2.9rem); margin: 0; line-height: 1.05; text-transform: none; }

.sfd-panels { flex: 1; display: flex; min-height: 0; }
.sfd-panel { position: relative; flex: 1 1 0; overflow: hidden; cursor: pointer; min-width: 0;
  transition: flex-grow 0.55s var(--sfd-ease-out); }
.sfd-panel__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center;
  transition: transform 0.8s var(--sfd-ease-out); }
.sfd-panel::after { content: ''; position: absolute; inset: 0; pointer-events: none; transition: background 0.55s var(--sfd-ease-standard);
  background: linear-gradient(0deg, rgba(250,242,231,0.96) 0%, rgba(250,242,231,0.58) 18%, rgba(250,242,231,0.14) 34%, rgba(250,242,231,0) 50%); }
.sfd-panel:hover, .sfd-panel:focus-within { flex-grow: 1.55; }
.sfd-panel:hover .sfd-panel__img, .sfd-panel:focus-within .sfd-panel__img { transform: scale(1.07); }
.sfd-panel:hover::after, .sfd-panel:focus-within::after {
  background: linear-gradient(0deg, rgba(250,242,231,0.98) 0%, rgba(250,242,231,0.62) 22%, rgba(250,242,231,0.16) 40%, rgba(250,242,231,0) 58%); }

.sfd-panel__c { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 3vw, 54px); color: var(--sfd-navy); }
.sfd-panel__t { font-family: var(--sfd-font-display); font-weight: 700; color: var(--sfd-navy); line-height: 1.04;
  font-size: clamp(1.7rem, 2.3vw, 2.6rem); margin: 0; text-wrap: balance; text-transform: none; }
.sfd-panel__cta { margin-top: 24px; }

.sfd-btn { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--sfd-font-sans); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.01em; line-height: 1; border-radius: 999px; padding: 15px 30px;
  border: 1px solid transparent; text-decoration: none; background: var(--sfd-navy); color: #fff;
  transition: background-color 240ms var(--sfd-ease-standard), box-shadow 240ms var(--sfd-ease-standard); }
/* No transform on the link itself: it would become the containing block of the ::before overlay below,
   shrink the click area to the button, drop :hover and flicker. The panel's hover drives the button instead. */
.sfd-btn:hover, .sfd-btn:focus,
.sfd-panel:hover .sfd-btn { background: var(--sfd-navy-600); color: #fff; text-decoration: none; box-shadow: 0 10px 30px -12px rgba(5,5,32,0.18); }
.sfd-btn:focus-visible { outline: 3px solid rgba(43,43,96,0.45); outline-offset: 3px; }
.sfd-btn svg { width: 18px; height: 18px; flex: none; transition: transform 240ms var(--sfd-ease-out); }
.sfd-panel:hover .sfd-btn svg, .sfd-btn:focus-visible svg { transform: translateX(4px); }
/* the whole panel is the click target, like in the design */
.sfd-panel__link::before { content: ''; position: absolute; inset: 0; z-index: 1; }
.sfd-panel__c { pointer-events: none; }
.sfd-panel__link { pointer-events: auto; }

@media (max-width: 920px) {
  .sfd-choose { height: auto; }
  .sfd-panels { flex-direction: column; }
  .sfd-panel { flex: none; min-height: 46vh; }
  .sfd-panel:hover, .sfd-panel:focus-within { flex-grow: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sfd-panel, .sfd-panel__img, .sfd-panel::after, .sfd-btn, .sfd-btn svg { transition: none; }
  .sfd-panel:hover .sfd-panel__img, .sfd-panel:focus-within .sfd-panel__img { transform: none; }
}