/*
Theme Name: Fewer - Custom Grid Image Centering
*/

/* --- Grundstyles --- */

/* Font smoothing */
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* Button outline hover */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
    background-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--background);
    border-color: var(--wp--preset--color--secondary);
}

/* Table styles */
.wp-block-table thead {
    border-bottom: 3px solid;
}
.wp-block-table tfoot {
    border-top: 3px solid;
}
.wp-block-table td,
.wp-block-table th {
    padding: var(--wp--preset--spacing--30);
    border: 1px solid;
    word-break: normal;
}
.wp-block-table figcaption {
    font-size: var(--wp--preset--font-size--small);
    text-align: center;
}

/* Link styles */
a {
    text-decoration-thickness: .02em !important;
    text-underline-offset: .25em;
}

/* --- Vorschaubilder im Grid zentrieren --- */

/* Container der Vorschaubilder zentrieren */
.wp-block-group > .wp-block-post-featured-image {
    display: flex;
    justify-content: center; /* horizontal zentrieren */
    align-items: flex-start; /* oben ausrichten */
    overflow: hidden;
}


/* Bilder selbst */
.wp-block-post-featured-image img {
    display: block;     /* keine extra Abstände */
    height: 20vh;    /* passt sich Spaltenbreite an */
    width: auto;       /* proportional, Seitenverhältnis bleibt */
}

/* --- Seitenbilder (feste Höhe) --- */
body.page .wp-block-post-featured-image img {
    height: 50vh;
    width: auto;
    display: block;
}

/* --- Optional: Titel unter Bildern zentrieren --- */
.wp-block-post-title {
    text-align: center;
    margin-top: var(--wp--preset--spacing--20);
    margin-bottom: var(--wp--preset--spacing--30);
}

/* --- Blog/Archiv/Home Vorschaubilder Container --- */
body.archive .wp-block-post-featured-image,
body.blog .wp-block-post-featured-image,
body.home .wp-block-post-featured-image {
    overflow: visible;   /* nichts abschneiden */
}

/* --- Responsive Anpassungen --- */
@media (max-width: 1024px) {
    .wp-block-post-featured-image img {
        height: 25vh;
    }
}

@media (max-width: 768px) {
    .wp-block-post-featured-image img {
        height: 20vh;
    }
}
.wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--wp--preset--spacing--30); /* Abstand zwischen Bildern */
}

.featured-image-subtitle {
    font-size: 1rem;      /* kleiner als vorher */
    text-align: center;       /* mittig */
    color: #777;
    margin: 0.3rem auto 0;    /* oben 0.3rem, zentriert horizontal */
    line-height: 1.3;
    max-width: 80%;           /* maximal 80% der Spaltenbreite */
    word-wrap: break-word;    /* Text umbrechen, falls nötig */
    overflow-wrap: break-word;
    display: block;           /* sicherstellen, dass Margin & max-width greifen */
}