/*
Theme Name: Sofia Rybrand 2026
Theme URI: https://sofiak.se
Description: Barntema till Twenty Twenty-Four för Sofia Rybrands konstnärsportfolio.
             Brutet vitt, ingen dekorfärg, verken får ta plats.
Author: Simon Rybrand
Template: twentytwentyfour
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: sofiak-2026
*/

/* ---------- Murverk: verken behåller sina egna proportioner ----------
   Kärnans rutnät beskär eller tvingar fram lika höga rader. Spalter gör
   inte det — varje bild får vara exakt så hög som den är.            */
.sofiak-murverk{
  display:block !important;
  column-count:3;
  column-gap:var(--wp--preset--spacing--40, 1.5rem);
  padding:0;
  margin:0;
  list-style:none;
}
.sofiak-murverk > li{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  display:block;
  margin:0 0 var(--wp--preset--spacing--40, 1.5rem);
}
@media (max-width:900px){ .sofiak-murverk{column-count:2} }
@media (max-width:520px){ .sofiak-murverk{column-count:1} }

.sofiak-murverk figure,
.sofiak-murverk img{ margin:0; display:block; width:100% !important; height:auto !important; }

/* Titeln under verket — diskret, syns tydligare vid hover */
.sofiak-murverk .wp-block-post-title{
  font-size:.8rem; line-height:1.35; margin:.6em 0 0; font-weight:400;
  letter-spacing:.02em; color:var(--wp--preset--color--contrast-2);
  transition:color .15s;
}
.sofiak-murverk > li:hover .wp-block-post-title{ color:var(--wp--preset--color--contrast); }
.sofiak-murverk a{ text-decoration:none; }

/* Inlägg utan bild blir ett textkort i stället för en tom ruta */
.sofiak-murverk > li:not(:has(img)) .wp-block-post-title{
  font-size:1rem; padding:2.2em 1.4em; border:1px solid var(--wp--preset--color--contrast-3);
  color:var(--wp--preset--color--contrast); margin:0;
}

/* ---------- Enskilt verk: en spalt, stort ---------- */
.sofiak-verk .wp-block-post-content img{ height:auto; }
.sofiak-verk .wp-block-post-content figcaption{
  font-size:.8rem; color:var(--wp--preset--color--contrast-2);
  font-style:italic; margin-top:.7em;
}

/* ---------- Meny: liten, versal, tyst ---------- */
.wp-block-navigation{ font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; }
.wp-block-navigation a{ text-decoration:none; }
.wp-block-navigation a:hover{ text-decoration:underline; text-underline-offset:.35em; }

/* Webbplatstiteln */
.wp-block-site-title a{ text-decoration:none; letter-spacing:.12em; text-transform:uppercase; font-size:.95rem; }

/* ---------- Kategorifiltret ovanför verken ---------- */
.sofiak-kategorier ul{
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-wrap:wrap;
  gap:.4rem 1.6rem;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
}
.sofiak-kategorier li{ margin:0; }
.sofiak-kategorier a{
  text-decoration:none;
  color:var(--wp--preset--color--contrast-2);
  padding-bottom:.25em;
  border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
}
.sofiak-kategorier a:hover{ color:var(--wp--preset--color--contrast); }
.sofiak-kategorier .current-cat > a{
  color:var(--wp--preset--color--contrast);
  border-bottom-color:var(--wp--preset--color--contrast);
}
/* wp_list_categories kan lägga in räknare — göm dem */
.sofiak-kategorier .count{ display:none; }

/* ---------- Gamla [gallery]-koder ----------
   Serierna från 2013–2018 använder klassiska gallerier. De ska se ut som
   resten av sidan: obeskurna verk i murverk, inte kvadratiska miniatyrer. */
.gallery{
  display:block;
  column-count:2;
  column-gap:var(--wp--preset--spacing--40, 1.5rem);
  margin:var(--wp--preset--spacing--50) 0;
}
.gallery .gallery-item{
  float:none !important;
  width:auto !important;
  margin:0 0 var(--wp--preset--spacing--40, 1.5rem) !important;
  break-inside:avoid;
  display:block;
}
.gallery .gallery-item img{
  width:100% !important; height:auto !important;
  border:0 !important; display:block;
}
.gallery .gallery-caption{
  font-size:.8rem; font-style:italic;
  color:var(--wp--preset--color--contrast-2);
  margin:.5em 0 0; text-align:left;
}
.gallery br{ display:none; }
@media (max-width:640px){ .gallery{column-count:1} }

/* ---------- Höger- och vänsterställda bilder i äldre innehåll ----------
   Sidor skrivna i den gamla redigeraren använder class="alignright" direkt
   på <img>. Blocktemat känner inte igen det, så bilderna hamnade under
   texten i stället för bredvid. */
.wp-block-post-content img.alignright,
.wp-block-post-content figure.alignright{
  float:right;
  margin:.3em 0 1.4rem 2rem;
  max-width:42%;
  height:auto;
}
.wp-block-post-content img.alignleft,
.wp-block-post-content figure.alignleft{
  float:left;
  margin:.3em 2rem 1.4rem 0;
  max-width:42%;
  height:auto;
}
.wp-block-post-content img.aligncenter{
  display:block; margin-left:auto; margin-right:auto; float:none;
}
/* rubriker och avslutning ska inte hamna bredvid en flytande bild */
.wp-block-post-content h2,
.wp-block-post-content h3{ clear:both; }
.wp-block-post-content::after{ content:""; display:table; clear:both; }

/* På smal skärm får bilden ligga för sig själv */
@media (max-width:640px){
  .wp-block-post-content img.alignright,
  .wp-block-post-content img.alignleft,
  .wp-block-post-content figure.alignright,
  .wp-block-post-content figure.alignleft{
    float:none; max-width:100%; margin:1.4rem 0;
  }
}