/* Åstveit Film & historier — only var(--e-global-…) for colors/fonts. */
.as-stories{ --as-ov:var(--e-global-color-dark); position:relative; background:var(--e-global-color-surface); padding-block:calc(var(--as-section-y) - 30px) var(--as-section-y); }
.as-stories .as-wrap{ max-width:calc(1500px + 2 * var(--as-side)); margin-inline:auto; }
.as-stories .as-stories__head{ text-align:center; margin-bottom:52px; }
.as-stories .as-stories__head h2,.as-stories .as-stories__head p{ margin-inline:auto; }
.as-stories .as-stories__text{ color:var(--e-global-color-text); }
.as-stories .as-stories__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 3vw, 36px); }

.as-stories .as-panel,.as-stories .as-panel:hover,.as-stories .as-panel:focus{
  position:relative; min-height:clamp(300px, 24vw, 400px); border-radius:var(--as-radius-lg); overflow:hidden;
  display:flex; align-items:flex-end; color:var(--e-global-color-surface); isolation:isolate; text-decoration:none; box-shadow:var(--as-shadow);
  margin:0; padding:0; border:0; font:inherit; text-align:left; width:100%; background:var(--e-global-color-dark); cursor:pointer;
}
.as-stories .as-panel:focus-visible{ outline:3px solid var(--e-global-color-secondary); outline-offset:3px; }
.as-stories .as-panel__media{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; max-width:none; object-fit:cover; transition:transform .8s ease; }
/* No colour overlay on the images (user, 27 Oct) - title readable via text shadow */
.as-stories .as-panel:hover .as-panel__media{ transform:scale(1.04); }
.as-stories .as-panel__body{ display:block; padding:clamp(26px, 3.5vw, 48px); width:100%; }
.as-stories .as-panel__title{ display:block; color:var(--e-global-color-surface); margin-bottom:.7em; text-shadow:0 2px 4px rgba(0,0,0,.55), 0 4px 22px rgba(0,0,0,.45); }

/* Soft buttons with a fading wave at the bottom */
.as-stories .as-panel .as-btn{
  position:relative; overflow:hidden; isolation:isolate; pointer-events:none; padding:.4em .55em .4em 1.4em; color:var(--e-global-color-text);
  border:1px solid color-mix(in srgb, var(--e-global-color-surface) 90%, transparent); background:var(--e-global-color-surface);
  box-shadow:0 10px 28px -14px color-mix(in srgb, var(--e-global-color-dark) 55%, transparent), inset 0 1px 0 var(--e-global-color-surface);
  transition:box-shadow .3s ease, transform .3s ease;
  font-size:.85rem; min-height:38px; gap:11px;
}
.as-stories .as-panel .as-btn::before,.as-stories .as-panel .as-btn::after{
  content:""; position:absolute; left:0; bottom:0; width:200%; height:70%; z-index:-1; pointer-events:none;
  -webkit-mask:var(--as-wave) left bottom / 100% 100% no-repeat; mask:var(--as-wave) left bottom / 100% 100% no-repeat;
  transition:transform .9s ease;
}
.as-stories .as-panel .as-btn::before{ --as-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C60,10 120,10 200,20 C280,30 340,30 400,18 L400,40 L0,40Z'/%3E%3C/svg%3E"); background:var(--e-global-color-accent); }
.as-stories .as-panel .as-btn::after{ --as-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0,32 C70,24 130,22 210,30 C290,38 350,36 400,28 L400,40 L0,40Z'/%3E%3C/svg%3E"); background:color-mix(in srgb, var(--e-global-color-border) 55%, transparent); }
.as-stories .as-panel:hover .as-btn::before,.as-stories .as-panel:hover .as-btn::after,
.as-stories .as-panel:focus-visible .as-btn::before,.as-stories .as-panel:focus-visible .as-btn::after{ transform:translateX(-50%); }
.as-stories .as-panel .as-btn svg{ order:2; width:27px; height:27px; padding:7px; border-radius:50%; background:var(--e-global-color-accent); color:var(--e-global-color-primary); transition:background-color .3s, color .3s, transform .3s; }
.as-stories .as-panel:hover .as-btn,.as-stories .as-panel:focus-visible .as-btn{ transform:translateY(-2px); box-shadow:0 14px 32px -14px color-mix(in srgb, var(--e-global-color-dark) 65%, transparent), inset 0 1px 0 var(--e-global-color-surface); }
.as-stories .as-panel:hover .as-btn svg,.as-stories .as-panel:focus-visible .as-btn svg{ background:var(--e-global-color-primary); color:var(--e-global-color-surface); transform:translateX(2px); }

.as-stories .as-play-big{ position:absolute; top:42%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:color-mix(in srgb, var(--e-global-color-surface) 95%, transparent); color:var(--e-global-color-primary); display:grid; place-items:center; transition:transform .3s; }
.as-stories .as-play-big::after{ content:""; position:absolute; inset:-7px; border-radius:50%; border:2px solid color-mix(in srgb, var(--e-global-color-surface) 50%, transparent); }
.as-stories .as-play-big svg{ width:19px; height:19px; margin-left:3px; }
.as-stories .as-panel--video:hover .as-play-big{ transform:translate(-50%,-50%) scale(1.06); }

.as-video-dialog{ border:0; padding:0; background:transparent; width:min(92vw, 1100px); max-width:none; max-height:90vh; overflow:visible; }
.as-video-dialog::backdrop{ background:color-mix(in srgb, var(--e-global-color-dark) 88%, transparent); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.as-video-dialog video{ width:100%; border-radius:var(--as-radius); background:var(--e-global-color-text); }
.as-video-dialog .as-video-dialog__close,.as-video-dialog .as-video-dialog__close:hover,.as-video-dialog .as-video-dialog__close:focus{ display:flex; align-items:center; gap:8px; margin:0 0 12px auto; min-height:52px; padding:0 22px; border-radius:999px; border:0; background:var(--e-global-color-surface); color:var(--e-global-color-text); font-family:var(--e-global-typography-accent-font-family); font-size:1.1875rem; font-weight:700; cursor:pointer; }
.as-video-dialog__close svg{ width:18px; height:18px; }

@media (max-width:960px){ .as-stories .as-stories__grid{ grid-template-columns:1fr; } }