/*
Theme Name: Pressfeldt
Theme URI: https://victorpressfeldt.com
Author: Victor Pressfeldt
Description: Fotojournalistiskt arkiv-tema — "Tyst editorial, foto-först". FSE/blocktema för victorpressfeldt.com. Tre mallar: fotoessä, press-clips, start/arkiv. Se docs/design.md.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: pressfeldt
*/

/* Det mesta styrs via theme.json. Här ligger bara sånt som blockstilar inte täcker. */

/* Fotoessä: enhetlig enkolumns bildrytm */
.essay-sequence > figure { margin: 0 0 var(--wp--custom--img-gap, 56px); }
.essay-sequence img { width: 100%; height: auto; }
.essay-sequence figure.is-portrait img { width: auto; max-height: 88vh; margin-inline: auto; }

/* Kontaktkarta (översiktsläge) */
.contact-sheet { columns: 6 132px; column-gap: 8px; }
.contact-sheet img { width: 100%; margin: 0 0 8px; break-inside: avoid; cursor: pointer; }

/* Arkiv: masonry (kolumner på post-template, korten bryts inte) */
.archive-grid .wp-block-post-template { columns: 3 320px; column-gap: 22px; list-style: none; margin: 0; padding: 0; }
.archive-grid .wp-block-post { break-inside: avoid; margin: 0 0 22px; list-style: none; }
.archive-grid .archive-card { overflow: hidden; }
.archive-grid .wp-block-post-featured-image { margin: 0; }
.archive-grid .archive-card img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.archive-grid .archive-card:hover img { transform: scale(1.035); }
.archive-grid .wp-block-post-title { margin: 0; }
/* Kort utan bild: ge en diskret platshållare så de inte ser trasiga ut */
.archive-card:not(:has(img)) { padding-top: 16px; }

/* Bildvägg (start) — grid på post-template, li = rutor */
.image-wall .wp-block-post-template { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 5px; list-style: none; margin: 0; padding: 0; }
.image-wall .wp-block-post { margin: 0; }
.image-wall figure.wp-block-post-featured-image { margin: 0; }
.image-wall .wp-block-post-featured-image a, .image-wall a { display: block; }
.image-wall img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: opacity .15s; }
.image-wall img:hover { opacity: .82; }
/* 10×10-mosaik (pattern) */
.image-wall-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.image-wall-grid a { display: block; line-height: 0; overflow: hidden; }
.image-wall-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .3s, opacity .15s; }
.image-wall-grid a:hover img { transform: scale(1.08); }

/* Skalmarkörens fyra nyckeltal */
.scale-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 54px; margin-top: 30px; }
.scale-stats > div { display: flex; flex-direction: column; align-items: center; }
.scale-stats b { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1; color: var(--wp--preset--color--ink); }
.scale-stats span { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-top: 8px; }
.pf-count { font-size: 13px; color: var(--wp--preset--color--muted); margin-top: 2px; }

/* Press-clips */
.press-clip { display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.press-clip .clip-year { color: var(--wp--preset--color--muted); white-space: nowrap; }

/* ===== Hero-karusell ===== */
.hero-carousel { position: relative; overflow: hidden;
  width: min(1480px, 94vw) !important; max-width: none !important;
  margin-left: calc((100% - min(1480px, 94vw)) / 2) !important;
  margin-right: calc((100% - min(1480px, 94vw)) / 2) !important; }
.hero-carousel .wp-block-query { overflow: hidden; }
.hero-carousel .wp-block-post-template {
  display: flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; list-style: none;
  transition: transform .6s cubic-bezier(.46,.03,.24,1); will-change: transform;
}
.hero-carousel li.wp-block-post { flex: 0 0 100%; max-width: 100%; margin: 0; }
/* Text längst ner till vänster över bilden (absolut, oberoende av cover-flex) */
/* Hero i ~standardformat (3:2) så bilden knappt beskärs */
.hero-carousel .wp-block-cover { aspect-ratio: 3 / 2; min-height: 0; max-height: 78vh; position: relative; padding: 0 !important; }
.hero-carousel .wp-block-cover img.wp-block-cover__image-background { object-position: center center; }
.hero-carousel .wp-block-cover__inner-container {
  position: absolute; inset: auto 0 0 0; margin: 0; max-width: 820px;
  padding: 0 44px 52px; text-align: left;
}
.hero-carousel .wp-block-cover__background {
  opacity: 1 !important;
  background: linear-gradient(to top, rgba(12,10,8,.9) 0%, rgba(12,10,8,.28) 48%, rgba(12,10,8,.45) 100%) !important;
}
.hero-carousel .wp-block-cover__inner-container { max-width: 900px; }
.hero-carousel .wp-block-cover, .hero-carousel .wp-block-cover a,
.hero-carousel .wp-block-cover .wp-block-post-title,
.hero-carousel .wp-block-cover .wp-block-post-terms { color: #fff !important; }
.hero-carousel .wp-block-cover .wp-block-post-terms a { color: #ffb9ac !important; }
.hero-carousel .wp-block-post-title { line-height: 1.03; margin: .2em 0 .3em; }
.hero-carousel .wp-block-cover .wp-block-read-more { display: inline-block; border-bottom: 2px solid var(--wp--preset--color--accent); padding-bottom: 3px; text-decoration: none; font-weight: 600; color: #fff !important; }

/* Karusell-kontroller (delas av hero + utlyfta) */
.pf-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(20,16,14,.45); color: #fff; font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); transition: background .15s;
}
.pf-arrow:hover { background: rgba(20,16,14,.8); }
.pf-arrow.prev { left: 18px; } .pf-arrow.next { right: 18px; }
.pf-dots { position: absolute; bottom: 20px; right: 24px; z-index: 6; display: flex; gap: 8px; }
.pf-dots .pf-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,.5); }
.pf-dots .pf-dot.on { background: #fff; }

/* ===== Utlyfta bilder (karusell) ===== */
.pf-featured { position: relative; margin-top: 8px; background: var(--wp--preset--color--bg); overflow: hidden;
  width: min(1480px, 94vw) !important; max-width: none !important;
  margin-left: calc((100% - min(1480px, 94vw)) / 2) !important;
  margin-right: calc((100% - min(1480px, 94vw)) / 2) !important; }
.pf-featured .pf-track { display: flex; flex-wrap: nowrap; transition: transform .6s cubic-bezier(.46,.03,.24,1); will-change: transform; }
.pf-featured .pf-slide { flex: 0 0 100%; max-width: 100%; }
.pf-featured img { width: 100%; aspect-ratio: 3 / 2; max-height: 78vh; object-fit: cover; display: block; }
.pf-featured-cap { padding: 26px 0 8px; border-bottom: 1px solid var(--wp--preset--color--line); }
.pf-featured-cap .pf-kicker { color: var(--wp--preset--color--accent); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.pf-featured-cap p { max-width: 62ch; color: var(--wp--preset--color--muted); font-size: 16.5px; margin: 10px 0 0; }

/* ===== Fotoessä: ENHETLIG bildpresentation — gap på BILDEN (funkar även när flera bilder delar ett <p>) ===== */
.pf-essay .wp-block-post-content { max-width: 1240px; margin-inline: auto; padding: 0 28px; }
.pf-essay .wp-block-post-content > * { margin: 0 !important; max-width: 100% !important; float: none !important; clear: both; }
/* varje bild: full bredd + samma mellanrum under sig (även flera i samma <p>) */
.pf-essay .wp-block-post-content img {
  width: 100% !important; max-width: 100% !important; height: auto !important;
  display: block; margin: 0 0 var(--wp--custom--img-gap, 56px) !important; float: none !important;
}
.pf-essay .wp-block-post-content a { display: block; line-height: 0; }
/* figure/gallery/caption: mellanrum på wrappern, INTE dubbelt på bilden (håller bildtext nära) */
.pf-essay .wp-block-post-content figure,
.pf-essay .wp-block-post-content .gallery-item,
.pf-essay .wp-block-post-content .wp-caption { margin: 0 0 var(--wp--custom--img-gap, 56px) !important; width: 100% !important; }
.pf-essay .wp-block-post-content figure img,
.pf-essay .wp-block-post-content .gallery-item img,
.pf-essay .wp-block-post-content .wp-caption img { margin-bottom: 0 !important; }
/* [gallery]-shortcode -> en kolumn istället för miniatyr-rutnät */
.pf-essay .wp-block-post-content .gallery { display: block !important; }
.pf-essay .wp-block-post-content .gallery br { display: none; }
.pf-essay .wp-block-post-content figcaption,
.pf-essay .wp-block-post-content .wp-caption-text { line-height: 1.5; font-size: 13.5px; color: var(--wp--preset--color--muted); text-align: center; margin-top: 10px; }
/* rena text-stycken: läsbart radavstånd + smal mått + eget mellanrum */
.pf-essay .wp-block-post-content > p:not(:has(img)) { line-height: 1.65; max-width: 660px; margin: 0 auto var(--wp--custom--img-gap, 56px) !important; }

/* ===== Kontaktkarta (fotoessä) ===== */
.pf-essay-modes { position: sticky; top: 64px; z-index: 30; display: flex; gap: 8px; justify-content: center;
  padding: 14px 0; background: color-mix(in srgb, var(--wp--preset--color--bg) 90%, transparent); backdrop-filter: blur(6px); }
.pf-essay-modes button { font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 6px 16px;
  border: 1px solid var(--wp--preset--color--line); border-radius: 999px; background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--muted); cursor: pointer; }
.pf-essay-modes button.on { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: #fff; }
.pf-essay[data-view="overview"] .wp-block-post-content,
.pf-essay[data-view="overview"] > .wp-block-post-featured-image,
.pf-essay[data-view="overview"] figure.wp-block-post-featured-image { display: none; }
.pf-essay:not([data-view="overview"]) .contact-sheet { display: none; }

/* ===== Facettfilter ===== */
.pf-filter { display: flex; flex-direction: column; gap: 8px; margin: 0 0 36px; position: sticky; top: 64px; z-index: 20;
  background: color-mix(in srgb, var(--wp--preset--color--bg) 92%, transparent); backdrop-filter: blur(6px); padding: 14px 0;
  border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.pf-filter .pf-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-filter .pf-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted); width: 56px; flex: none; }
.pf-chip { font-size: 13px; font-weight: 500; padding: 6px 13px; border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--muted); cursor: pointer; }
.pf-chip:hover { color: var(--wp--preset--color--ink); }
.pf-chip.on { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: #fff; }

@media (max-width: 781px) {
  .archive-grid .wp-block-post-template { columns: 1; }
  .contact-sheet { columns: 3 100px; }
  .image-wall { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  .image-wall-grid { grid-template-columns: repeat(5, 1fr); }
  .pf-arrow { width: 38px; height: 38px; font-size: 21px; }
}