/* Aktuellt: one large ticket on the left, the other events beside it (proposal 4). */
.akt-exempel{display:inline-block;margin:0 0 1.5rem;padding:.3rem .5rem;border:1.5px dashed var(--rod);background:var(--papper);color:var(--rod-djup);font:600 var(--t-xs)/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.akt-rutnat{display:grid;grid-template-columns:1fr;gap:1.8rem}
@media(min-width:56rem){.akt-rutnat{grid-template-columns:1.35fr 1fr;align-items:stretch}.akt-stor{display:flex;flex-direction:column}.akt-stor .akt-bild{flex:1 1 0;aspect-ratio:auto;min-height:18rem;position:relative}.akt-stor .akt-bild img{position:absolute;inset:0}}
.akt-hogra{display:grid;gap:1.4rem}
.akt-kort{background:var(--papper-djup);border:2px solid var(--valnot);border-radius:.4rem;position:relative;overflow:hidden}
.akt-bild{aspect-ratio:3/2;overflow:hidden;border-bottom:2px dashed var(--valnot)}
.akt-hogra .akt-bild{aspect-ratio:21/9}
.akt-hogra .akt-text{padding:.8rem 1.1rem 1rem}
.akt-bild img{display:block;width:100%;height:100%;object-fit:cover}
.akt-stampel{position:absolute;top:.8rem;left:.8rem;background:var(--rod);color:var(--papper);text-align:center;padding:.5rem .7rem;font:700 var(--t-xs)/1.1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-4deg);box-shadow:0 .2rem .5rem rgba(0,0,0,.3)}
.akt-stampel b{display:block;font-size:var(--t-xl);line-height:1}
.akt-text{padding:1rem 1.2rem 1.3rem}
.akt-tid{display:block;margin-bottom:.5rem;color:var(--tra);font:700 var(--t-xs)/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase}
.akt-text h2,.akt-text h3{margin:0 0 .5rem;font:600 var(--t-lg)/1.15 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.akt-text p{margin:0 0 .75rem;font:var(--t-base)/1.5 var(--f-bok)}
.akt-stor .akt-text{padding:1.4rem 1.6rem 1.7rem}
.akt-stor .akt-text h2{font-size:var(--t-xl)}
.akt-stor .akt-stampel{padding:.7rem .95rem}
.akt-stor .akt-stampel b{font-size:var(--t-2xl)}
.akt-lank{color:var(--rod);font:700 var(--t-sm)/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:.15rem}
.akt-lank:focus-visible{outline:3px solid var(--valnot);outline-offset:3px}

/* One screen, no scrolling, on a desktop-sized window. Header ~6rem, the hero below,
   so the event grid takes what is left. Narrow or short windows fall back to normal flow. */
.akt-hero{padding-block:1.4rem 1.2rem}
.akt-hero__rad{display:grid;gap:.8rem}
.akt-hero__rubrik{margin:0;font-size:var(--t-xl)}
.akt-hero__ingress{margin:0;color:var(--papper);font:var(--t-base)/1.45 var(--f-bok);max-width:48rem}
.akt-band{padding-block:2.6rem 2rem}   /* room for the scalloped edge that hangs over the top */
.akt-exempel{margin:0 0 .8rem}
@media(min-width:56rem) and (min-height:40rem){
  .akt-hero__rad{grid-template-columns:auto 1fr;align-items:end;gap:2.5rem}
  .akt-hero__ingress{font-size:var(--t-sm);max-width:none}
  .akt-rutnat{height:calc(100svh - 17.4rem);min-height:24rem}
  .akt-hogra{display:flex;flex-direction:column;gap:.9rem;min-height:0}
  .akt-hogra .akt-kort{display:flex;flex-direction:column;min-height:0;flex:1 1 0}
  .akt-hogra .akt-bild{flex:1 1 0;aspect-ratio:auto;min-height:4rem}
  .akt-hogra .akt-text{padding:.55rem .9rem .7rem}
  .akt-hogra .akt-text h3{margin:0;font-size:var(--t-md)}
  .akt-hogra .akt-tid{margin-bottom:.25rem}
  .akt-hogra .akt-stampel{transform:rotate(-4deg) scale(.8);transform-origin:top left}
  /* The big card's text field is larger and its photo gives up the height (Dennis 2026-10-19): the photo is the flexible
     part of the card, so every pixel the text takes comes out of the photo and the card keeps its height. */
  .akt-stor .akt-text{padding:1.5rem 1.8rem 1.7rem}
  .akt-stor .akt-text h2{font-size:var(--t-2xl);margin-bottom:.6rem}
  .akt-stor .akt-text p{font-size:var(--t-md);line-height:1.55;margin-bottom:1rem}
  /* Short windows: the photo is already a strip, so the text field grows less there. */
  @media(max-height:800px){.akt-stor .akt-text{padding:1.1rem 1.5rem 1.2rem}.akt-stor .akt-text h2{font-size:var(--t-xl);margin-bottom:.4rem}.akt-stor .akt-text p{font-size:var(--t-base);margin-bottom:.7rem}}
  .akt-stor .akt-bild{min-height:0}
}

/* Fold-out. Only when the script runs; the button is invisible furniture otherwise.
   One decision, not three: the open card's text slides down and every photo gives up the same share of its height.
   No card is squeezed to a sliver, no photo jumps to another crop, nothing grows against something else. */
.akt-knapp{all:unset;cursor:pointer;display:block;box-sizing:border-box;width:100%;min-height:2.75rem;padding-block:.35rem}
.akt-knapp:focus-visible{outline:3px solid var(--valnot);outline-offset:3px}
.akt-liten .akt-mer p{margin:.4rem 0 .6rem}
.akt-js .akt-liten{cursor:pointer}
.akt-js .akt-liten .akt-mer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.akt-js .akt-liten .akt-mer>div{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .3s}
.akt-js .akt-liten.akt-oppen .akt-mer{grid-template-rows:1fr}
.akt-js .akt-liten.akt-oppen .akt-mer>div{visibility:visible;transition-delay:0s}
/* Desktop: each small card is a row, text on the left and the photo on the right. Opening unfolds sideways: the
   photo narrows, the text widens and the description appears. The card keeps its height, nothing moves up or down. */
@media(min-width:56rem) and (min-height:40rem){
  .akt-hogra .akt-liten{flex-direction:row}
  .akt-hogra .akt-liten .akt-text{order:1;flex:1 1 0;min-width:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:.6rem 1.1rem}
  .akt-hogra .akt-liten .akt-bild{order:2;flex:0 0 50%;min-height:0;border-bottom:0;border-left:2px dashed var(--valnot);transition:flex-basis .4s ease}
  .akt-hogra .akt-liten.akt-oppen .akt-bild{flex-basis:34%}
  .akt-hogra .akt-liten .akt-stampel{left:auto;right:.6rem;transform:rotate(4deg) scale(.8);transform-origin:top right}
  .akt-hogra .akt-liten .akt-mer{overflow:hidden}
  .akt-hogra .akt-liten .akt-mer p{font-size:var(--t-sm);margin:.35rem 0 .5rem}
}
@media(prefers-reduced-motion:reduce){.akt-hogra .akt-liten .akt-bild{transition:none}}
.akt-js .akt-liten .akt-knapp::after{content:"+";float:right;margin-left:.6rem;font-weight:700;color:var(--rod)}
.akt-js .akt-liten.akt-oppen .akt-knapp::after{content:"\2212"}
@media(prefers-reduced-motion:reduce){.akt-js .akt-liten .akt-mer,.akt-js .akt-liten .akt-mer>div{transition:none}}
@media(min-width:56rem) and (min-height:40rem) and (max-height:800px){
  .akt-js .akt-hogra .akt-liten .akt-stampel{transform:rotate(4deg) scale(.6);top:.4rem;right:.4rem;left:auto;transform-origin:top right}
}

/* Aktuellt Instagram block, "Höjdpunkter" (Dennis picked proposal 5, 2026-10-14). Scoped to .igg-*.
   The layout idea (profile row, counts, tabs, 3-column grid, feed) is generic; everything that is Instagram's
   own brand is left out on purpose: no gradient ring, no Instagram blue, no logo, no system UI font.
   Colours, type, rules and corners are Moldau's own, so nobody can mistake it for Instagram's interface. */
.igg{--ig-bg:var(--papper-djup);--ig-text:var(--valnot);--ig-mut:var(--tra);--ig-line:var(--valnot);--ig-acc:var(--rod);--ig-ring:var(--guld);
  background:var(--ig-bg);color:var(--ig-text);font-family:var(--f-bok);
  border:2px solid var(--valnot);border-radius:.4rem;max-width:56rem;margin-inline:auto;padding:1.6rem 1.2rem}
.igg-stat,.igg-folj,.igg h3,.igg-flikar,.igg-hojd,.igg-toppfalt,.igg-inlagg header,.igg-bio b{font-family:var(--f-display)}
.igg ul,.igg nav{margin:0;padding:0;list-style:none}
.igg h3{margin:0;font-size:1.2rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.igg p{margin:0;font-size:.95rem;line-height:1.35}
.igg a{color:inherit;text-decoration:none}
.igg img{display:block;width:100%;height:100%;object-fit:cover}
.igg svg{display:block}

.igg-ring{flex:0 0 auto;width:5rem;height:5rem;border-radius:50%;padding:3px;display:block;background:var(--ig-ring)}
.igg-ring img{border-radius:50%;border:3px solid var(--ig-bg);background:var(--papper);object-fit:cover}
.igg-ring--stor{width:9.4rem;height:9.4rem;padding:4px}
.igg-ring--liten{width:2.4rem;height:2.4rem;padding:2px}
.igg-ring--hojd{width:4.8rem;height:4.8rem;background:var(--ig-ring);padding:2px}
.igg-ring--hojd img{border-width:2px}

.igg-huvud{display:flex;gap:2rem;align-items:center;justify-content:center;padding-bottom:1.6rem}
.igg-huvud--mobil{gap:1.4rem;padding-bottom:.8rem;justify-content:flex-start}
.igg-info{flex:1 1 auto;display:flex;flex-direction:column;gap:1rem;max-width:30rem}
.igg-rad1{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.igg-stat{display:flex;gap:2.4rem}
.igg-stat li{font-size:.95rem;display:flex;flex-direction:column;align-items:center;line-height:1.2}
.igg-stat b{font-weight:600;font-size:1.05rem}
.igg-stat--rad li{flex-direction:row;gap:.3rem}
.igg-bio{color:var(--ig-text)}
.igg-bio b{font-weight:600}
.igg-folj{display:inline-block;background:var(--ig-acc);color:var(--papper)!important;font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:.65rem 1.5rem;border-radius:.2rem}
.igg-folj:hover{background:var(--rod-djup)}
.igg-folj--bred{display:block;text-align:center;margin:.7rem 0 1rem}

.igg-flikar{display:flex;justify-content:center;gap:3.5rem;border-top:2px dashed var(--ig-line);color:var(--ig-mut)}
.igg-flikar span{padding:.8rem .2rem;border-top:2px solid transparent;margin-top:-2px}
.igg-flikar .pa{color:var(--ig-acc);border-top-color:var(--ig-acc)}
.igg-flikar svg{width:1.3rem;height:1.3rem}

.igg-rutnat{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.5rem}
.igg-rutnat li{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--papper);border:2px solid var(--valnot);border-radius:.3rem}
.igg-rutnat a{display:block;height:100%}
.igg-typ{position:absolute;top:.6rem;right:.6rem;color:#fff;filter:drop-shadow(0 0 3px rgba(0,0,0,.55))}
.igg-typ svg{width:1.3rem;height:1.3rem}
.igg-over{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1.4rem;color:#fff;background:rgba(43,26,14,.5);opacity:0;transition:opacity .15s}
.igg-over svg{width:1.7rem;height:1.7rem;fill:#fff;stroke:#fff}
.igg-rutnat a:hover .igg-over,.igg-rutnat a:focus-visible .igg-over{opacity:1}

/* 5 highlights */
.igg-5{max-width:34rem}
.igg-mitt{padding-bottom:1rem}
.igg-mitt .igg-folj{display:block;text-align:center;margin-top:.8rem}
.igg-hojd{display:flex;gap:1.3rem;overflow-x:auto;padding:.2rem 0 1.4rem}
.igg-hojd a{display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:.75rem}
.igg-hojd .igg-ring--hojd img{border-radius:50%}
.igg-hojd a{letter-spacing:.06em;text-transform:uppercase;font-weight:600}



/* The grid scrolls inside the card; two columns so six posts are taller than the box. */
.akt-ig .igg-flode{max-height:34rem;overflow-y:auto;scrollbar-width:thin;padding-right:.3rem;margin-top:.2rem;border-top:2px dashed var(--ig-line);padding-top:.7rem}
.akt-ig .igg-flode:focus-visible{outline:2px solid var(--rod);outline-offset:2px}
.akt-ig .igg-rutnat{grid-template-columns:repeat(2,1fr);margin-top:0}
/* One Instagram block: the old text and button on the left, the profile card with the scrolling feed on the right. */
.akt-ig__rutnat{display:grid;grid-template-columns:minmax(0,1fr);gap:2.2rem;align-items:center}
.akt-ig__rutnat>*{min-width:0}
.akt-ig__ord .lead{max-width:32rem}
.akt-ig__ord h2{hyphens:manual}
.akt-ig__knapp{margin-top:var(--s-5,1.5rem)}
@media(min-width:56rem){.akt-ig__rutnat{grid-template-columns:1fr minmax(0,34rem);gap:3rem}}

/* The phone with the feed scrolling inside, and three plain cards where the pictures used to lie. */
.akt-tel__scen{position:relative;display:flex;justify-content:center;align-items:center;padding:1rem 0}
.akt-tel{position:relative;z-index:2;width:min(20.5rem,100%);border-radius:2.6rem;background:#17130f;padding:.7rem;box-shadow:0 1.2rem 2.4rem rgba(43,26,14,.4)}
.akt-tel__hogtalare{position:absolute;top:1.15rem;left:50%;width:4.2rem;height:.4rem;margin-left:-2.1rem;border-radius:1rem;background:#3a3129;z-index:3}
.akt-tel__skarm{display:flex;flex-direction:column;height:38rem;border-radius:2rem;overflow:hidden;background:var(--papper-djup);color:var(--valnot)}
.akt-tel__topp{display:flex;align-items:center;gap:.7rem;padding:1.7rem 1rem .7rem;color:var(--valnot);text-decoration:none;font-family:var(--f-display)}
.akt-tel__topp span:last-child{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.akt-tel__topp small{font:700 var(--t-xs)/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--rod)}
.akt-tel__topp b{font:700 .95rem/1.1 var(--f-display);letter-spacing:.02em;overflow-wrap:anywhere}
.akt-tel__ring{flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:50%;padding:2px;background:var(--guld)}
.akt-tel__ring img{display:block;width:100%;height:100%;border-radius:50%;border:2px solid var(--papper-djup);object-fit:cover}
.akt-tel__rull{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
.akt-tel__rull:focus-visible{outline:2px solid var(--rod);outline-offset:-2px}
.akt-tel__rutor{display:grid;grid-template-columns:1fr;gap:.7rem;margin:0;padding:.6rem .6rem 1rem;list-style:none}
.akt-tel__rutor li{aspect-ratio:4/5;overflow:hidden;border:2px solid var(--valnot);border-radius:.3rem;background:var(--papper)}
.akt-tel__rutor a{display:block;height:100%}
.akt-tel__rutor img{display:block;width:100%;height:100%;object-fit:cover}
.akt-lapp{position:absolute;z-index:3;display:flex;flex-direction:column;gap:.15rem;margin:0;padding:.8rem 1.1rem;background:#fbf7ee;color:var(--valnot);text-decoration:none;border:2px solid var(--valnot);border-radius:.3rem;box-shadow:.25rem .3rem 0 var(--valnot);font-family:var(--f-display)}
.akt-lapp small{font:700 var(--t-xs)/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--rod)}
.akt-lapp b{font:700 1.05rem/1.15 var(--f-display);letter-spacing:.02em}
.akt-lapp--2{left:-.8rem;top:46%;align-items:center;text-align:center;transform:rotate(-5deg);padding:.9rem 1.3rem}
.akt-lapp--2 b{font-size:2rem;line-height:1}
.akt-lapp--2 span{font:600 var(--t-xs)/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase}
.akt-lapp--3{right:-.8rem;bottom:2.6rem;transform:rotate(-2.5deg)}
.akt-lapp--3 span{font-size:.9rem;color:var(--tra)}
.akt-lapp--4{top:1.2rem;right:-2rem;transform:rotate(3deg)}
.akt-lapp--4>span{font:.9rem/1.2 var(--f-bok);color:var(--tra)}
.akt-lapp--3:hover,.akt-lapp--4:hover{background:#fff}
/* PHONES AND TABLETS: THE THREE CARDS STAY AROUND THE PHONE, as on desktop (Dennis 2026-10-20: "på aktuellt sidan så vill jag
   ha dom där blocken runtomkring mobilen"). They used to be stacked underneath. The scene is held to the phone's own width so
   the cards sit at its edges and not at the edges of a wide screen, and the cards are smaller and pulled in so that none of
   them hangs outside the column (the same rule as the start page's polaroids: inside the surface, never off its edge). */
@media(max-width:56rem){
  .akt-tel__scen{max-width:22rem;margin-inline:auto;padding:1rem 0}
  .akt-tel{width:100%}
  .akt-lapp{padding:.5rem .75rem;box-shadow:.18rem .22rem 0 var(--valnot)}
  .akt-lapp b{font-size:.9rem}
  .akt-lapp small{font-size:.62rem}
  .akt-lapp--2{left:-.3rem;top:44%;padding:.55rem .85rem}
  .akt-lapp--2 b{font-size:1.5rem}
  .akt-lapp--2 span{font-size:.62rem}
  .akt-lapp--3{right:-.3rem;bottom:2rem}
  .akt-lapp--3 span{font-size:.78rem}
  .akt-lapp--4{top:-.5rem;right:-.3rem}
  .akt-lapp--4>span{font-size:.78rem}
}