/*
Theme Name: Matthias Fotografie
Theme URI: https://github.com/MatFX/matthias-fotografie
Author: Matthias Görlich
Description: Ruhiges, bildorientiertes Block-Theme für Portfolio, Fototouren, Prints und Stockfotografie.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: matthias-fotografie
*/

:root {
  text-wrap: pretty;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
}

a {
  text-underline-offset: 0.18em;
}

.wp-site-blocks {
  overflow: clip;
}

.mf-header {
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
  border-bottom: 1px solid var(--wp--preset--color--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.mf-eyebrow {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mf-card {
  overflow: hidden;
}

.mf-card img,
.wp-block-post-featured-image img {
  transition: transform 500ms ease;
}

.mf-card:hover img,
.wp-block-post:hover .wp-block-post-featured-image img {
  transform: scale(1.025);
}

.mf-overlay {
  background: linear-gradient(180deg, transparent 25%, rgba(15, 17, 16, 0.86) 100%);
}

/* Preserve the natural size of small legacy featured images. Larger images
   still scale down responsively to the available content width. */
.single-post main .wp-block-post-featured-image {
  margin-inline: auto;
  max-width: 100%;
  width: fit-content;
}

.single-post main .wp-block-post-featured-image img {
  height: auto;
  max-width: 100%;
  object-fit: contain !important;
  width: auto;
}

/* Restore the classic WordPress image alignment used by the imported posts. */
.single-post .wp-block-post-content::after {
  clear: both;
  content: "";
  display: table;
}

.single-post .wp-block-post-content img.alignleft {
  float: left;
  margin: 0.35rem 1.5rem 1rem 0;
}

.single-post .wp-block-post-content img.alignright {
  float: right;
  margin: 0.35rem 0 1rem 1.5rem;
}

.single-post .wp-block-post-content img.aligncenter {
  display: block;
  margin: 1.5rem auto;
}

@media (max-width: 600px) {
  .single-post .wp-block-post-content img.alignleft,
  .single-post .wp-block-post-content img.alignright {
    display: block;
    float: none;
    margin: 1.5rem auto;
  }

  .single-post .wp-block-post-content .wp-caption.alignleft,
  .single-post .wp-block-post-content .wp-caption.alignright {
    float: none;
    margin: 1.5rem auto;
    max-width: 100%;
    width: fit-content !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mf-card img,
  .wp-block-post-featured-image img { transition: none; }
}

/* About: text flows beside the portrait; image first on mobile. */
.mf-about-body { display:flow-root; }
.mf-about-body .mf-about-portrait { margin:0 0 1.5rem; }
.mf-about-portrait img { display:block; width:100%; height:auto; }
@media (min-width:782px) { .mf-about-body .mf-about-portrait { float:right; width:42%; margin:0 0 1rem 2rem; } }

/* Homepage photograph: retain readable text and show the castle on mobile. */
.mf-home-hero > .wp-block-cover__background { background-color:transparent !important; background-image:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.25) 70%,rgba(0,0,0,.12)); opacity:1; }
@media (max-width:600px) { .mf-home-hero > .wp-block-cover__image-background { object-position:85% 50% !important; } .mf-home-hero > .wp-block-cover__background { background-image:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.6)); } }