/* ---------- KATEGORI-RUTOR ---------- */
/* Rutnätet för kortkoden [kategoribilder]. Färger och typsnitt kommer ur
   menu.css, som filen beror på – se Urskap_Category_Tiles::register_assets().

   Rutorna radar om sig själva med auto-fit och behöver därför varken
   brytpunkter, en kolumninställning i PHP eller en rad JavaScript: minmax
   säger hur smal en ruta får bli, webbläsaren räknar ut hur många som får
   plats. min() ser till att en ensam ruta på en smal telefon inte kräver
   220px och tvingar fram sidled-skrollning. */
.urskap-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(var(--urskap-tile-min, 220px), 100%), 1fr));
  gap:clamp(12px, 2vw, 24px);
  margin:0;
  padding:0;
  list-style:none;
}
.urskap-tiles__item{
  margin:0;
  padding:0;
}

.urskap-tile{
  position:relative;
  display:block;
  /* Höjden kommer ur bredden, så inget hoppar medan bilderna laddas och
     rutorna i en rad är alltid exakt lika höga. Formen ställs in under
     Urskap-Tools → Kategori-rutor; standard är kvadrat. */
  aspect-ratio:var(--urskap-tile-ratio, 1);
  overflow:hidden;
  border-radius:3px;
  text-decoration:none;
  /* Egen staplingskontext: utan den kan ett block efter rutnätet lägga sig
     mellan bilden och slöjan. */
  isolation:isolate;
  transition:transform .45s cubic-bezier(.2,.6,.2,1), box-shadow .45s ease;
}
.urskap-tile:focus-visible{
  outline:2px solid var(--urskap-accent);
  outline-offset:3px;
}

/* ---------- BILDEN OCH TONINGEN ---------- */
.urskap-tile__media{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  /* Syns bara i springan innan bilden dekodats, och bakom en bild som är
     smalare än rutan. Mörk, så texten är läsbar även då. */
  background:#241c18;
}
/* TVÅ klasser i väljaren med flit, trots att en hade räckt för att träffa
   bilden. WordPress och blockteman skriver ut egna bildregler – core har
   html :where(img[class*=wp-image-]){height:auto;max-width:100%} och teman
   brukar ha något liknande. De väger lätt var för sig, men det kostar
   ingenting att lägga sig ovanför dem en gång för alla: vinner en sådan regel
   blir höjden bildens egen i stället för rutans, och då syns omslagets mörka
   botten som ett fält vid kanten.

   min-height/min-width och max-width:none finns av samma skäl – de gör att
   bilden täcker rutan även om något annat lyckas skriva över height. */
.urskap-tile .urskap-tile__img{
  display:block;
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  max-width:none;
  /* Fyller rutan och beskär det som inte får plats, i stället för att krympa
     bilden tills hela ryms. Mitten behålls – det är där motivet brukar sitta. */
  object-fit:cover;
  object-position:center;
  /* Transform och inget annat vid hover: den räknas på grafikkortet och tvingar
     inte fram en omritning av layouten. */
  transform:scale(1.01);
  transition:transform .8s cubic-bezier(.2,.6,.2,1);
}

/* Toningen. Ligger som ::after på omslaget och inte på .urskap-tile, så den
   står still när bilden skalas – annars vandrar den med och kanterna ljusnar.

   Fasta färger och inte --urskap-ink: texten ovanpå är vit i BÅDA lägena, och
   i mörkt läge är ink den ljusa färgen. En toning som följde variabeln hade
   alltså blivit ljus bakom vit text. */
.urskap-tile__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(18,14,12,.28) 0%,
    rgba(18,14,12,.50) 52%,
    rgba(18,14,12,.74) 100%
  );
  transition:opacity .45s ease;
}

/* Kategorier utan bild ritas i en varm mörk ton i stället för att lämnas tomma
   eller hämta WooCommerces platshållare. Rutraden ser hel ut, texten är läsbar,
   och det kostar noll bytes. Strecket i hörnet är samma accent som resten av
   sajten, så rutan inte blir en död fyrkant. */
.urskap-tile--blank .urskap-tile__media{
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(var(--urskap-paper-rgb),.10) 0%, transparent 60%),
    linear-gradient(155deg, #2f231d 0%, #171412 62%, #241a14 100%);
}
.urskap-tile--blank .urskap-tile__media::after{
  /* Ingen andra slöja över en yta som redan är mörk – då blir rutan svart. */
  background:none;
}
.urskap-tile--blank .urskap-tile__text::before{
  content:"";
  position:absolute;
  left:50%;
  /* Ovanför namnet, räknat från textens överkant – inte från rutans, så
     strecket följer med om texten går i två rader. */
  bottom:calc(100% + .7em);
  width:34px;
  height:2px;
  margin-left:-17px;
  background:var(--urskap-accent);
  opacity:.85;
}

/* ---------- TEXTEN ---------- */
.urskap-tile__label{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(10px, 6%, 26px);
  text-align:center;
}
.urskap-tile__text{
  position:relative;
  display:inline-block;
  /* Ärvs från temat om inget annat valts under Urskap-Tools → Typsnitt. */
  font-family:var(--urskap-display);
  /* 500 ingår i vikterna hos Urskap_Fonts::google_fonts(). Lägger du en annan
     vikt här, lägg till den där också – annars räknar webbläsaren fram den
     själv och bokstäverna blir smetiga. */
  font-weight:500;
  /* Storleken ställs in under Urskap-Tools → Kategori-rutor. Talet i clampens
     slut är standardvärdet och MÅSTE stämma med Urskap_Category_Tiles::defaults(). */
  font-size:var(--urskap-tile-size, clamp(.95rem, 1.5vw, 1.2rem));
  line-height:1.25;
  letter-spacing:.14em;
  text-transform:uppercase;
  /* Vit i båda lägena: texten ligger på en mörk toning, inte på sidans papper. */
  color:#fff;
  /* Skuggan räddar läsbarheten över en ljus fläck i bilden, t.ex. en himmel. */
  text-shadow:0 1px 12px rgba(18,14,12,.55);
  transition:letter-spacing .45s cubic-bezier(.2,.6,.2,1);
}
/* Strecket under namnet växer ut vid hover. scaleX och inte width, av samma
   skäl som ovan – bredd räknas om i layouten, transform gör det inte. */
.urskap-tile__text::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-.5em;
  height:1px;
  background:currentColor;
  opacity:.75;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .45s cubic-bezier(.2,.6,.2,1);
}

/* ---------- HOVER OCH KLICK ---------- */
/* Bakom (hover: hover) så en pekskärm inte fastnar i hover-läget efter ett
   tryck – där räcker klickeffekten nedan, som gäller alla. */
@media (hover: hover){
  .urskap-tile:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(18,14,12,.28);
  }
  .urskap-tile:hover .urskap-tile__img{
    transform:scale(1.07);
  }
  /* Toningen lättar så bilden får kliva fram – men bara en bit, texten ska
     fortfarande gå att läsa. */
  .urskap-tile:hover .urskap-tile__media::after{
    opacity:.72;
  }
  .urskap-tile:hover .urskap-tile__text{
    letter-spacing:.2em;
  }
  .urskap-tile:hover .urskap-tile__text::after{
    transform:scaleX(1);
  }
}
/* Tangentbordet ska få samma svar som musen. */
.urskap-tile:focus-visible .urskap-tile__text::after{
  transform:scaleX(1);
}
/* Klicket: rutan trycks ner igen. Kort och liten – en knapp som ger efter,
   inte en animering att titta på. */
.urskap-tile:active{
  transform:translateY(-1px) scale(.99);
  transition-duration:.1s;
}

@media (prefers-reduced-motion: reduce){
  .urskap-tile,
  .urskap-tile__img,
  .urskap-tile__text,
  .urskap-tile__text::after,
  .urskap-tile__media::after{
    transition:none;
  }
  .urskap-tile:hover,
  .urskap-tile:active{
    transform:none;
  }
  .urskap-tile:hover .urskap-tile__img{
    transform:scale(1.01);
  }
  .urskap-tile:hover .urskap-tile__text{
    letter-spacing:.14em;
  }
}