/* =========================================================
   Rutorna: Boka AW · Grïsens heta linje · Instagram
   Egen fil så att resten av sidan lämnas orörd
   ========================================================= */

.rutor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: max(.81vw, 12px);
  padding: 0 max(.81vw, 12px) max(12vw, 6rem);
}

/* Samma innermarginal i alla rutor */
.ruta {
  --pad: clamp(1rem, 4.5cqi, 1.75rem);
  position: relative;
  aspect-ratio: 1;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--c-yellow);
}
.ruta a { text-decoration: none; transition: color .2s ease, background-color .2s ease; }
.ruta h2 { font-weight: 700; }

/* Liten rad högst upp, som raden och footern: versaler, medium */
.ruta__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  padding: var(--pad) var(--pad) 0;
  font-size: max(3.3cqi, .75rem);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

/* ---------- Fried AW: gul med mörkgrön text, vänsterställd meny, pris i pixelfont ---------- */
.ruta--aw {
  overflow: visible; /* rutan får växa på höjden om innehållet inte ryms (smala skärmar) */
  background: var(--c-yellow);
  color: var(--c-ink);
}
.ruta--aw .ruta__top h2 {
  font-size: 1em;
  font-weight: 500;
  letter-spacing: .02em;
}
.ruta__tag {
  padding: .3em .45em .2em;
  background: var(--c-ink);
  color: var(--c-yellow);
  font-family: var(--font-pixel);
  letter-spacing: .05em;
  white-space: nowrap;
}
.aw__menu {
  margin: auto 0;
  padding: 6cqi var(--pad);
  font-size: max(7.4cqi, 1.5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.aw__menu b {
  display: block;
  margin-bottom: .12em;
  font-size: 1.9em;
  font-weight: 700;
  letter-spacing: -.045em;
}
/* Liten text under menyn */
.aw__note {
  display: block;
  margin-top: .8em;
  font-size: max(3.3cqi, .75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
.aw__plus {
  display: inline-block;
  color: var(--c-yellow);
  background: var(--c-ink);
  width: .8em;
  line-height: .8em;
  text-align: center;
  font-weight: 700;
  margin-right: .1em;
}
.aw__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1em;
  margin: 0 var(--pad) var(--pad);
  padding-top: 3cqi;
  border-top: 1px solid var(--c-ink);
}
.aw__price {
  font-family: var(--font-pixel);
  font-size: max(14cqi, 2.75rem);
  line-height: .78;
  letter-spacing: .02em;
}
.aw__price span { font-size: .42em; margin-left: .1em; }
.aw__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3em;
  font-size: max(4.4cqi, .95rem);
  white-space: nowrap; /* pilen ska stå kvar på samma rad som texten */
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  text-align: right;
}
/* Smala rutor (mobil, surfplatta): nummer och mejl under priset */
@container (max-width: 420px) {
  .aw__foot { flex-direction: column; align-items: flex-start; gap: .6em; }
  .aw__contact { align-items: flex-start; text-align: left; }
}
.aw__contact a:hover,
.aw__contact a:focus-visible { color: var(--c-pink); }
.aw__contact .lower { text-transform: none; }

/* ---------- Grïsens heta linje: rosa, stort klickbart nummer ---------- */
.ruta--heta { background: var(--c-pink); }
.heta__title {
  padding: var(--pad) var(--pad) 0;
  font-size: max(11cqi, 2.1rem);
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.heta__body {
  margin-top: auto;
  padding: 0 var(--pad);
  font-size: max(4.3cqi, .95rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: .01em;
}
.heta__body strong {
  display: block;
  margin-bottom: .5em;
  font-weight: 500;
  text-transform: uppercase;
}
.heta__phone {
  display: flex;
  justify-content: space-between;
  align-items: baseline; /* pilen står på baslinjen, som i övriga länkar */
  margin: 4cqi var(--pad) 0;
  padding: 2.4cqi 0 1.8cqi;
  border-block: 1px solid var(--c-yellow);
  font-family: var(--font-pixel);
  font-size: max(9.2cqi, 1.9rem);
  line-height: 1;
  letter-spacing: .03em;
}
.heta__phone:hover,
.heta__phone:focus-visible { background: var(--c-yellow); color: var(--c-pink); }
.heta__out {
  padding: 3cqi var(--pad) var(--pad);
  font-size: max(3.3cqi, .75rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

/* ---------- Instagram: folie i bakgrunden, inlägg som rullar ---------- */
.ruta--ig {
  /* Platshållare tills folie-bilden finns: mörk krom av gradienter */
  background:
    radial-gradient(60% 40% at 30% 20%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(50% 35% at 75% 70%, rgba(255,255,255,.35), transparent 60%),
    repeating-linear-gradient(115deg, #0b0b0b 0 6%, #8d8d8d 9%, #151515 13%, #e8e8e8 15%, #1d1d1d 19%),
    #111;
  background-size: cover;
  background-position: center;
  color: var(--c-lime);
}
.ruta--ig.has-foil {
  background: var(--foil) center / cover no-repeat, #111;
}
/* Mörk toning i botten så att texten syns mot den ljusa folien */
.ruta--ig::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 30, 19, .75), transparent 22%);
  pointer-events: none;
}
.ig__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 78%;
  aspect-ratio: 9 / 16;
  transform: translate(-50%, -52%);
  background: var(--c-ink);
  box-shadow: 0 1.5cqi 6cqi rgba(0, 0, 0, .55);
  overflow: hidden;
}
.ig__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity .6s ease;
}
.ig__slide.is-on { opacity: 1; }
.ig__slide img,
.ig__slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ig__bars {
  position: absolute;
  top: 3%;
  left: 4%;
  right: 4%;
  z-index: 2;
  display: flex;
  gap: 2%;
}
.ig__bars span {
  flex: 1;
  height: 2px;
  background: rgba(250, 237, 220, .35);
  overflow: hidden;
}
.ig__bars span::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--c-lime);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}
.ig__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 30%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ig__nav--prev { left: 0; }
.ig__nav--next { right: 0; }
.ig__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .4em;
  padding: 8%;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: max(4.4cqi, .9rem);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ig__handle {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: var(--pad);
  display: flex;
  justify-content: space-between;
  font-size: max(3.3cqi, .75rem);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.ig__handle a:hover,
.ig__handle a:focus-visible { color: var(--c-pink); }

/* ---------- Mindre skärmar ---------- */
@media (max-width: 1000px) {
  .rutor { grid-template-columns: 1fr 1fr; }
  .ruta--ig { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .ruta--ig .ig__frame { height: 84%; }
  .ruta--ig .ig__handle,
  .ruta--ig .ig__empty { font-size: max(2vw, .75rem); }
}
@media (max-width: 640px) {
  .rutor { grid-template-columns: 1fr; }
  .ruta--ig { aspect-ratio: 4 / 5; }
  .ruta--ig .ig__handle { font-size: max(3.3cqi, .75rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ig__slide { transition: none; }
}

/* ---------- 4. Bakis: bilderna fyller rutan, lätt tonade, all text i ljusbeige ---------- */
.ruta--bakis {
  background: var(--c-ink);
  color: var(--c-cream);
}
.bakis__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.bakis__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.bakis__media img.is-on { opacity: 1; }
/* Lätt mörkgrön toning, lite starkare upptill och nertill där texten ligger */
.bakis__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(3, 30, 19, .45), rgba(3, 30, 19, .2) 35%, rgba(3, 30, 19, .25) 55%, rgba(3, 30, 19, .7));
}
/* Texten ligger ovanpå bilderna; klick går igenom till bokningslänken under */
.bakis__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(3, 30, 19, .5);
}
.bakis__body a { pointer-events: auto; }
.bakis__kicker {
  font-size: clamp(.75rem, 3.3cqi, .95rem);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}
/* Bakis-loggan (vit PNG) används som mask, så att den får textfärgen */
/* Loggan mitt i rutan, vågrätt och lodrätt */
.bakis__logo {
  flex: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(8rem, 44cqi, 13rem);
  aspect-ratio: 1200 / 431;
  background: currentColor;
  -webkit-mask: url("assets/img/bakis/bakis-logo.png") center / contain no-repeat;
  mask: url("assets/img/bakis/bakis-logo.png") center / contain no-repeat;
}
.bakis__links {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.bakis__book {
  padding: .5em .65em .4em;
  border: 1px solid currentColor;
  font-family: var(--font-pixel);
  font-size: clamp(.9rem, 4.2cqi, 1.25rem);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
}
/* Hela rutan länkar till bokningen, så knappen tänds när man hovrar var som helst på bilden */
.ruta--bakis:has(.bakis__media:hover) .bakis__book,
.bakis__book:hover,
.bakis__book:focus-visible { background: var(--c-cream); color: var(--c-ink); text-shadow: none; }
.bakis__ig {
  font-size: clamp(.75rem, 3.3cqi, .95rem);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}
.bakis__ig:hover,
.bakis__ig:focus-visible { color: var(--c-pink); }

/* ---------- 5. Scenen: grön, bild överst, text under ---------- */
.ruta--scen {
  background: var(--c-lime);
  color: var(--c-ink);
}
.scen__media {
  position: relative;
  flex: 1 1 0;
  min-height: 30%;
  overflow: hidden;
  background: var(--c-ink);
}
.scen__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 70%;
}
.scen__credit {
  position: absolute;
  right: var(--pad);
  bottom: .6rem;
  color: var(--c-cream);
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  opacity: .8;
}
.scen__body { padding: var(--pad); }
.scen__title {
  font-size: clamp(1.6rem, 9cqi, 2.6rem);
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.scen__lead {
  margin: .5em 0 .35em;
  font-family: var(--font-pixel);
  font-size: clamp(.9rem, 4cqi, 1.2rem);
  line-height: 1.05;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.scen__text {
  font-size: clamp(.875rem, 3.35cqi, 1.05rem);
  line-height: 1.25;
}

/* ---------- 6. Vinyltorsdag: bara affischen + läs mer ---------- */
.vinyl__link {
  position: absolute;
  inset: 0;
}
.vinyl__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vinyl__more {
  position: absolute;
  bottom: var(--pad);
  right: var(--pad);
  /* Ljus text: hörnet täcks av affischens svarta prickar */
  color: var(--c-cream);
  font-size: clamp(.75rem, 3.3cqi, .95rem);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(3, 30, 19, .9), 0 0 2px rgba(3, 30, 19, .9);
  transition: color .2s ease;
}
.vinyl__link:hover .vinyl__more,
.vinyl__link:focus-visible .vinyl__more { color: var(--c-pink); }

/* Surfplatta: Scenen får hela bredden */
@media (max-width: 1000px) {
  .ruta--scen { grid-column: 1 / -1; aspect-ratio: auto; flex-direction: row; }
  .ruta--scen .scen__media { flex: 0 0 50%; min-height: 0; }
  .ruta--scen .scen__body { flex: 1; align-self: center; }
}
/* Mobil: allt staplas, bilden överst */
@media (max-width: 640px) {
  .ruta--scen { grid-column: auto; aspect-ratio: auto; flex-direction: column; }
  .ruta--scen .scen__media { flex: none; aspect-ratio: 4 / 3; }
  .ruta--scen .scen__body { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .bakis__media img { transition: none; }
}

/* ---------- Länkpilen ↗ (assets/svg/pil.svg) – samma storlek och läge överallt ----------
   Pilen är lika hög som versalerna och står på baslinjen, så den hamnar mitt i texten */
.pil {
  display: inline-block;
  width: .7em;
  height: .7em;
  margin-left: .35em;
  vertical-align: 0;
  flex: none;
  overflow: visible;
}

/* ---------- Lika marginal överallt: radavståndet kapas på första och sista raden ----------
   så att versalernas överkant och baslinjen hamnar exakt på --pad från kanten.
   (Chrome/Safari; övriga webbläsare visar nästan samma sak utan kapningen.) */
.heta__title,
.bakis__kicker,
.ruta--aw .ruta__top h2,
.ruta__tag { text-box: trim-start cap alphabetic; }
.aw__contact a.lower,
.heta__out,
.ig__handle > *,
.scen__text,
.vinyl__more { text-box: trim-end cap alphabetic; }
.ruta--aw .ruta__top { align-items: flex-start; }
.bakis__links { align-items: flex-end; }
.bakis__ig { text-box: trim-end cap alphabetic; }

/* ---------- Footer: "Made with ♥ by Okino" till höger om © ---------- */
.foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.foot__credit { text-decoration: none; transition: color .2s ease; }
.foot__credit:hover,
.foot__credit:focus-visible { color: var(--c-pink); }
.hjarta {
  display: inline-block;
  width: .7em;
  height: .7em;
  margin: 0 .3em;
  vertical-align: 0;
}