/* FH Bio v0.7 – balanserad 16:9-layout efter originalbilden */
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#3a1918;color:#fce9d6;font-family:Arial,Helvetica,sans-serif}
.screen{height:100vh;width:100%;overflow:hidden;padding:2.5vh 3.8vw 2vh;display:grid;grid-template-rows:34% minmax(0,1fr) 9%;background:radial-gradient(ellipse at 50% 35%,#552521,#351615 85%)}
header{min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:1vw}
h1{font-size:min(8.2vw,15.6vh);line-height:.93;letter-spacing:-.025em;margin:0;color:#fff4df;text-shadow:0 0 14px #e5a650,0 0 34px #b97637;font-weight:900;white-space:nowrap}
.cinema-mark{font-size:clamp(30px,4.1vw,85px);white-space:nowrap;flex-shrink:0;margin-top:4vh}
.films{min-height:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:start;gap:1.9vw;padding-top:0}
.film{min-width:0;text-align:center;display:flex;flex-direction:column;min-height:0}
.date-top{height:4.6vh;flex:none;font-size:clamp(12px,1.43vw,29px);font-weight:800;color:#e3ad70;text-transform:uppercase;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.poster{width:100%;height:33.5vh;flex:none;background:#76483a;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff1df;font-size:clamp(13px,1.4vw,27px);font-weight:800}
.poster img{width:100%;height:100%;object-fit:cover}
.poster-placeholder{padding:1vw}
.details{background:#dfc4ad;color:#16100e;margin-top:1vh;border-radius:3px;padding:1.15vh .55vw;height:14.2vh;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.film h2{font-size:clamp(15px,1.67vw,32px);margin:0 0 .6vh;line-height:1.12;text-transform:uppercase;overflow-wrap:anywhere}
.times{font-size:clamp(13px,1.35vw,27px);font-weight:700;line-height:1.32}
.meta{font-size:clamp(9px,.75vw,15px);margin-top:.4vh}
.screen footer{min-width:0;display:flex;align-items:end;justify-content:center;text-align:center;font-size:clamp(18px,2.18vw,42px);font-weight:700;letter-spacing:.075em;white-space:nowrap;padding-bottom:.25vh}
.screen footer strong{color:#ffe7ce;margin-left:.35em}
@media(max-aspect-ratio:1.3){.screen{height:auto;min-height:100vh;overflow:visible;display:flex}header{min-height:20vh}h1{font-size:clamp(28px,6vw,90px)}.cinema-mark{font-size:3vw}.films{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2vw}.poster{height:auto;aspect-ratio:2/2.8}.details{height:auto;min-height:12vh}.screen footer{white-space:normal;padding-top:3vh;letter-spacing:0}}

/* v0.8 – skalbar snackillustration i originalets övre högra hörn */
.cinema-mark{width:21vw;max-width:390px;height:24vh;min-width:0;margin-top:0;display:flex;align-items:flex-start;justify-content:flex-end;flex-shrink:0}
.snack-art{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 3px rgba(24,8,8,.35))}
@media(max-aspect-ratio:1.3){.cinema-mark{width:22vw;height:14vh}}

/* v0.9 – jämnare vertikal rytm och tydligare dekorationer */
@media(min-aspect-ratio:1.3){
  .screen{grid-template-rows:33% minmax(0,1fr) 8%}
  .date-top{height:4.4vh}
  .poster{height:34vh}
  .details{height:14.2vh;margin-top:1.15vh}
  .cinema-mark{width:24vw;max-width:450px;height:26vh;margin-top:0}
  .snack-art{width:100%;height:100%}
}

/* v1.0 – rubriken centrerad inom textytan, tydliga separata informationsrader */
@media(min-aspect-ratio:1.3){
  header{position:relative;display:block}
  header h1{width:75%;text-align:center}
  header .cinema-mark{position:absolute;right:0;top:0}
}
.details{gap:.2vh}
.film h2{display:block;width:100%;margin:0 0 .55vh;font-size:clamp(14px,1.46vw,28px)}
.times{display:flex;flex-direction:column;align-items:center;gap:.35vh;width:100%;font-size:clamp(12px,1.15vw,23px)}
.showtime{display:flex;flex-direction:column;align-items:center;gap:.1vh;width:100%}
.showtime-date,.showtime-hour{display:block}
.meta{display:none}

/* v1.1 – samma titelposition och centrerad text i alla sex filmrutor */
.details{justify-content:flex-start;text-align:center}
.film h2{width:100%;height:6.3vh;flex:0 0 6.3vh;display:flex;align-items:center;justify-content:center;text-align:center;margin:0;padding:0 .15vw;line-height:1.12}
.times{width:100%;text-align:center;align-items:center;justify-content:flex-start}
.showtime{text-align:center}

/* v1.2 – kompakt informationsyta enligt originalets typografi */
.details{height:12.6vh;padding:.8vh .45vw;justify-content:center;gap:0}
.film h2{height:auto;flex:0 0 auto;min-height:0;max-height:5.2vh;display:block;margin:0 0 .35vh;font-size:clamp(13px,1.32vw,26px);line-height:1.12;text-align:center}
.times{font-size:clamp(12px,1.1vw,22px);line-height:1.16;gap:.15vh}
.showtime{gap:0;line-height:1.16}
.screen footer{font-size:clamp(18px,2.28vw,44px)}

/* v1.3 – originalets informationsrutor: innehåll börjar upptill */
.details{justify-content:flex-start;padding:1.25vh .45vw .65vh;gap:0}
.film h2{margin:0 0 .35vh;flex:0 0 auto;max-height:none;line-height:1.12}
.times{justify-content:flex-start;gap:.2vh}

/* v1.4 – större visningsdatum och klockslag, tydligare rytm */
.details{padding-top:1.1vh}
.film h2{font-size:clamp(14px,1.38vw,27px);margin-bottom:.7vh}
.times{font-size:clamp(14px,1.36vw,27px);font-weight:750;line-height:1.25;gap:.4vh}
.showtime{gap:.25vh;line-height:1.25}
.showtime-date{font-weight:750}
.showtime-hour{font-weight:800}

/* v1.5 – filmtiteln störst, datum och tid som sekundär information */
.film h2{font-size:clamp(16px,1.58vw,31px);font-weight:800;line-height:1.13;margin-bottom:.55vh}
.times{font-size:clamp(11px,1.04vw,21px);font-weight:650;line-height:1.17;gap:.2vh}
.showtime{gap:.08vh;line-height:1.17}
.showtime-date{font-weight:650}
.showtime-hour{font-weight:700}

/* v1.6 – tydliga datum och tider med gemensam placering i alla filmkort */
.details{padding:1vh .4vw .65vh;justify-content:flex-start}
.film h2{min-height:4.3vh;max-height:4.3vh;display:flex;align-items:flex-start;justify-content:center;margin:0 0 .55vh;line-height:1.1;font-size:clamp(15px,1.48vw,29px)}
.times{width:100%;font-size:clamp(13px,1.16vw,23px);font-weight:650;line-height:1.23;gap:.6vh}
.showtime{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.32vh;line-height:1.2}
.showtime-date{font-weight:650}
.showtime-hour{font-weight:750}

/* v1.7 – tillräcklig titelzon för tre rader utan överlapp */
.details{padding-top:.85vh}
.film h2{
  box-sizing:border-box;
  height:6.3vh;
  min-height:6.3vh;
  max-height:6.3vh;
  flex:0 0 6.3vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  margin:0 0 .3vh;
  padding:0 .05vw;
  font-size:clamp(13px,1.30vw,25px);
  line-height:1.07;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:auto;
}
.times{flex:0 0 auto;font-size:clamp(12px,1.12vw,22px);gap:.25vh;line-height:1.15}
.showtime{gap:.2vh;line-height:1.15}

/* v1.8 – tydligare bokningsuppmaning på storbildsskärm */
@media(min-aspect-ratio:1.3){
  .screen footer{
    font-size:clamp(22px,2.65vw,52px);
    letter-spacing:.055em;
    line-height:1.1;
  }
}

/* v1.9 – större filmtitlar och högre informationsrutor */
@media(min-aspect-ratio:1.3){
  .details{height:14.5vh;padding:1.05vh .45vw .7vh}
  .film h2{
    font-size:clamp(16px,1.56vw,31px);
    height:7.5vh;
    min-height:7.5vh;
    max-height:7.5vh;
    flex:0 0 7.5vh;
    line-height:1.1;
    padding:0 .1vw;
    margin:0 0 .3vh;
    overflow-wrap:break-word;
  }
  .times{font-size:clamp(12px,1.1vw,22px)}
}

/* v2.0 – genre under titel, utan överlapp vid långa filmtitlar */
@media(min-aspect-ratio:1.3){
  .details{height:16.2vh;padding:.8vh .4vw .6vh;gap:0}
  .film h2{height:auto;min-height:0;max-height:6.5vh;flex:0 0 auto;margin:0 0 .35vh;font-size:clamp(15px,1.38vw,28px);line-height:1.07}
  .genre{font-size:clamp(11px,.98vw,19px);font-weight:500;line-height:1.1;margin:0 0 .55vh;max-height:3.3vh;overflow:hidden;text-align:center}
  .times{font-size:clamp(12px,1.04vw,21px);gap:.15vh}
  .showtime{gap:.12vh}
}
@media(max-aspect-ratio:1.3){.genre{font-size:12px;margin-bottom:6px;text-align:center}}


/* v2.1 – luftigare filmkort med tydlig hierarki och konsekvent placering */
@media(min-aspect-ratio:1.3){
  .details{
    height:17.4vh;
    padding:1.05vh .6vw 1vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:0;
  }
  .film h2{
    width:100%;
    height:auto;
    min-height:0;
    max-height:6.4vh;
    flex:0 0 auto;
    margin:0;
    font-size:clamp(16px,1.47vw,30px);
    line-height:1.12;
    font-weight:800;
    text-align:center;
    align-items:center;
  }
  .genre{
    width:100%;
    margin:.5vh 0 0;
    font-size:clamp(12px,1.08vw,22px);
    line-height:1.2;
    font-weight:500;
    max-height:3vh;
    overflow:hidden;
  }
  .times{
    width:100%;
    margin-top:auto;
    padding-bottom:.55vh;
    font-size:clamp(13px,1.15vw,23px);
    line-height:1.2;
    gap:.55vh;
  }
  .showtime{gap:.42vh;line-height:1.2}
  .showtime-date{font-weight:600}
  .showtime-hour{font-weight:800}
}

/* v2.2 – behåll genrestorleken, balansera visningstiderna */
@media(min-aspect-ratio:1.3){
  .details{justify-content:flex-start}
  .times{margin-top:2.2vh;padding-bottom:0}
  .genre{font-size:clamp(12px,1.08vw,22px)}
}

/* v2.3 – titel överst, visningstid i mitten och genre längst ned */
@media(min-aspect-ratio:1.3){
  .details{justify-content:flex-start;padding:1.1vh .6vw .85vh}
  .film h2{margin:0}
  .times{margin-top:auto;margin-bottom:auto;padding:0;gap:.35vh}
  .showtime{gap:.25vh}
  .genre{margin:0;width:100%;font-size:clamp(12px,1.08vw,22px);line-height:1.2;max-height:3vh;flex:0 0 auto;text-align:center}
}

/* v2.4 – alla genrer på samma baslinje längst ned i filmrutorna */
@media(min-aspect-ratio:1.3){
  .details{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
  .film h2{flex:0 0 auto}
  .times{margin-top:1.4vh;margin-bottom:0;flex:0 0 auto}
  .genre{margin-top:auto;margin-bottom:0;min-height:2.5vh;display:flex;align-items:flex-end;justify-content:center;flex:0 0 auto}
}

/* v2.5 – datum och klockslag på samma höjd i alla sex kort */
@media(min-aspect-ratio:1.3){
  .details{position:relative}
  .times{
    position:absolute;
    top:8.1vh;
    left:.35vw;
    right:.35vw;
    width:auto;
    margin:0;
    padding:0;
    align-items:center;
    justify-content:center;
  }
  .genre{margin-top:auto}
}