/*
Theme Name: Ellerbrock
Author: Sven Ellerbrock
Description: Individuelles WordPress-Theme für fotografische Projekte.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ellerbrock
*/

/* --------------------------------------------------------------
   Base
-------------------------------------------------------------- */

@font-face {
	font-family: "Cormorant Garamond";
	src: url("./fonts/cormorant-garamond-v21-latin-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Cormorant Garamond";
	src: url("./fonts/cormorant-garamond-v21-latin-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
}

:root {
	--font-family-serif: "Cormorant Garamond", serif;
	--font-family-mono: Courier, monospace;

	--font-size-base: 1.1rem;
	--font-size-site-title: 0.75rem;
	--font-size-project-title: 3rem;
	--font-size-h2: 2.2rem;
	--font-size-body: 1.1rem;
	--font-size-caption: 0.85rem;
	--font-size-navigation: 0.75rem;

	--line-height-base: 1.5;
	--line-height-title: 1.1;
	--line-height-navigation: 1.2;

	--content-width-text: 720px;
	--content-width-wide: 1200px;
}

body {
	margin: 0;
	background: #fff;
	color: #111;
	font-family: var(--font-family-serif);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
}


/* --------------------------------------------------------------
   Site Header
-------------------------------------------------------------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	padding: 0.75rem 1rem;
	text-align: left;
}

.site-title {
	display: block;
	color: inherit;
	font-family: var(--font-family-mono);
	font-size: var(--font-size-site-title);
	line-height: 1.5;
	text-align: left;
	text-transform: uppercase;
	text-decoration: none;
}


/* --------------------------------------------------------------
   Typography
-------------------------------------------------------------- */

/* Text Links */

p a,
li a {
	color: #111;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.12em;
}

p a:hover,
p a:focus-visible,
li a:hover,
li a:focus-visible {
	color: #111;
	text-decoration: underline;
}



h1 {
	margin: 0;
	font-family: var(--font-family-serif);
	font-size: var(--font-size-project-title);
	font-weight: 400;
	line-height: var(--line-height-title);
}

h1::after {
	display: block;
	width: 4rem;
	height: 1px;
	margin: 3rem auto 3rem;
	background: currentColor;
	content: "";
}

h2 {
	margin: 2rem 0 1.5rem;
	font-family: var(--font-family-serif);
	font-size: var(--font-size-h2);
	font-weight: 400;
	line-height: 1;
}

h3 {
	margin: 2rem 0 0.5rem;
	font-family: var(--font-family-serif);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1;
}

h4 {
	margin: 1.2rem 0 0.2rem;
	font-family: var(--font-family-serif);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.3;
}


/* --------------------------------------------------------------
   Main
-------------------------------------------------------------- */

.site-main {
	padding-top: 5rem;
	padding-bottom: 5rem;
}


/* --------------------------------------------------------------
   Project
-------------------------------------------------------------- */

.project__header {
	margin: 0 auto;
	padding: 0 1rem;
	text-align: center;
}

.project__title {
	margin: 0;
	font-family: var(--font-family-serif);
	font-size: var(--font-size-project-title);
	font-weight: 400;
	line-height: var(--line-height-title);
}

.project__content {
	width: min(94vw, var(--content-width-wide));
	margin: 0 auto;
}

.project__content img {
	display: block;
	width: 100%;
	height: auto;
}

.project__content p {
	max-width: var(--content-width-text);
	font-family: var(--font-family-serif);
	font-size: var(--font-size-body);
	line-height: var(--line-height-base);
}

.project__content .wp-block-image {
	margin-top: 5rem;
	margin-bottom: 5rem;
}

.project__content figcaption {
	max-width: var(--content-width-text);
	margin: 0.5rem auto 1rem;
	padding: 0 20px;
	font-size: var(--font-size-caption);
	line-height: 1.4;
	text-align: center;
}


/* --------------------------------------------------------------
   Project Navigation Overlay
-------------------------------------------------------------- */

.project-navigation {
	position: fixed;
	inset: 0;
	z-index: 90;

	visibility: hidden;
	opacity: 0;
	transform: translateY(-1rem);

	background: #fff;

	font-family: var(--font-family-mono);
	font-size: var(--font-size-navigation);

	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		visibility 0.3s ease;
}

.project-navigation.is-open {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.project-navigation__label {
	margin: 0 0 1.5rem;
	font-family: var(--font-family-serif);
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.2;
}

.project-navigation__label::after {
    display: block;
    width: 2rem;
    height: 1px;
    margin: 0.75rem auto 0;
    background: currentColor;
    content: "";
}

.project-navigation__columns {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	justify-content: center;
	gap: 10rem;

	width: calc(100% - 6rem);
	margin: 6rem auto 0;
}

.project-navigation__section {
	min-width: 0;
	text-align: center;
}

.project-navigation__list {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.project-navigation__list a {
	color: inherit;
	text-decoration: none;
}


/* --------------------------------------------------------------
   Menu Toggle
-------------------------------------------------------------- */

.menu-toggle {
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	z-index: 101;

	display: flex;
	align-items: center;
	gap: 0.5rem;

	height: 1rem;
	padding: 0;
	border: 0;
	background: none;

	color: inherit;
	font-family: var(--font-family-mono);
	font-size: var(--font-size-site-title);
	line-height: 1;

	cursor: pointer;
}

.menu-toggle__line {
	display: block;
	width: 1.25rem;
	height: 1px;
	margin: 4px 0;
	background: currentColor;

	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
}

.menu-toggle__icon {
	display: block;
	width: 1.25rem;
}

.menu-toggle.is-active .menu-toggle__line:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.menu-toggle.is-active .menu-toggle__line:nth-child(2) {
	opacity: 0;
}

.menu-toggle.is-active .menu-toggle__line:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}


/* --------------------------------------------------------------
   Front Page Sections
-------------------------------------------------------------- */

.front-page__section {
	width: min(var(--content-width-wide), calc(100vw - 6rem));
	margin: 0 auto;
}

.front-page__section-title {
	margin: 0 0 2.2rem;
	font-family: var(--font-family-serif);
	font-size: var(--font-size-project-title);
	font-weight: 400;
	line-height: var(--line-height-title);
	text-align: center;
}

.front-page__about {
	padding-bottom: 8rem;
}

.front-page__about-content {
	max-width: var(--content-width-text);
	margin: 0 auto;
}

.front-page__about-content p {
	margin-top: 0;
	margin-bottom: 1.5rem;
	font-family: var(--font-family-serif);
	font-weight: normal;
	font-size: var(--font-size-body);
	line-height: var(--line-height-base);
}

.front-page__about-content > :last-child {
	margin-bottom: 0;
}


/* --------------------------------------------------------------
   Project Overview
-------------------------------------------------------------- */

.project-overview {
	width: 100%;
	margin: 0;
	padding-bottom: 5rem;
}

.project-overview__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 2rem;
}


/* --------------------------------------------------------------
   Project Cards
-------------------------------------------------------------- */

.project-card {
	min-width: 0;
	grid-column: span 2;
}

.project-card--featured {
	grid-column: span 3;
}

.project-card__link {
	position: relative;

	display: block;
	overflow: hidden;

	color: inherit;
	text-decoration: none;
}

.project-card__figure {
	position: relative;

	margin: 0;
	overflow: hidden;
}

.project-card__image {
	display: block;
	width: 100%;
	height: auto;

	transition: transform 0.4s ease;
}


/* --------------------------------------------------------------
   Project Card Overlay
-------------------------------------------------------------- */

.project-card__figure::after {
	position: absolute;
	inset: 0;

	background: rgba(0, 0, 0, 0);
	content: "";

	transition: background 0.4s ease;
}

.project-card__title {
	position: absolute;
	bottom: 12%;
	left: 50%;
	z-index: 2;

	width: 90%;
	margin: 0;

	transform: translateX(-50%);

	color: #fff;
	font-family: var(--font-family-serif);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;

	opacity: 0;

	transition: opacity 0.4s ease;
}

.project-card:not(.project-card--featured) .project-card__title {
	font-size: 1.2rem;
}


/* --------------------------------------------------------------
   Project Card Hover
-------------------------------------------------------------- */

.project-card__link:hover .project-card__image,
.project-card__link:focus-visible .project-card__image {
	transform: scale(1.015);
}

.project-card__link:hover .project-card__figure::after,
.project-card__link:focus-visible .project-card__figure::after {
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 35%,
		rgba(0, 0, 0, 0.08) 50%,
		rgba(0, 0, 0, 0.25) 68%,
		rgba(0, 0, 0, 0.65) 100%
	);
}

.project-card__link:hover .project-card__title,
.project-card__link:focus-visible .project-card__title {
	opacity: 1;
}


/* --------------------------------------------------------------
   Footer
-------------------------------------------------------------- */

.site-footer {
	position: fixed;
	bottom: 1rem;
	left: 50%;
	z-index: 100;

	transform: translateX(-50%);

	font-family: var(--font-family-mono);
	font-size: var(--font-size-site-title);
	text-align: center;
	white-space: nowrap;
}

.site-footer p {
	margin: 0;
}


/* --------------------------------------------------------------
   Project Pagination
-------------------------------------------------------------- */

.project-pagination__previous,
.project-pagination__next {
	position: fixed;
	top: 50%;
	z-index: 100;

	display: none;

	transform: translateY(-50%);

	color: inherit;
	font-size: 1.5rem;
	text-decoration: none;
}

.project-pagination__previous {
	left: 1rem;
}

.project-pagination__next {
	right: 1rem;
}


/* --------------------------------------------------------------
   Front Page
-------------------------------------------------------------- */

.front-page {
	width: min(90vw, var(--content-width-wide));
	margin: 0 auto;
	padding-bottom: 8rem;
}


/* --------------------------------------------------------------
   Standard Pages
-------------------------------------------------------------- */

body.page {
	background: #fff;
}

body.page .site-main {
	min-height: 100vh;
	padding-top: 5rem;
	padding-bottom: 5rem;
}


/* --------------------------------------------------------------
   Page Container
-------------------------------------------------------------- */

.page-content {
	width: min(94vw, var(--content-width-wide));
	margin: 0 auto;
}


/* --------------------------------------------------------------
   Page Header
-------------------------------------------------------------- */

.page-header {
	margin: 0 auto 3rem;
	padding: 0 1rem;
	text-align: center;
}

.page-title {
	margin: 0;
	font-family: var(--font-family-serif);
	font-size: var(--font-size-project-title);
	font-weight: 400;
	line-height: var(--line-height-title);
	text-align: center;
}


/* --------------------------------------------------------------
   Page Body
-------------------------------------------------------------- */

.page-body {
	width: 100%;
	margin: 3rem auto;
}


/* --------------------------------------------------------------
   Page Content Widths
-------------------------------------------------------------- */

.content-width-720 {
	width: 100%;
	max-width: var(--content-width-text);
	margin-right: auto;
	margin-left: auto;
}

.content-width-1200,
.content-width-1600 {
	width: 100%;
	max-width: var(--content-width-wide);
	margin-right: auto;
	margin-left: auto;
}


/* --------------------------------------------------------------
   Page Typography
-------------------------------------------------------------- */

.page-content h2,
.page-content h3,
.page-content h4 {
	font-family: var(--font-family-serif);
	font-weight: 400;
}

.page-content p {
	font-family: var(--font-family-serif);
	font-size: var(--font-size-body);
	line-height: var(--line-height-base);
}




/* --------------------------------------------------------------
   Page – Separator
-------------------------------------------------------------- */

.page-content .wp-block-separator {
	width: 4rem;
	height: 1px;
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
	border: 0;
	background: currentColor;
}


/* --------------------------------------------------------------
   Page Images
-------------------------------------------------------------- */

.page-content img {
    display: block;
    max-width: 100%;
    height: auto;
}

.project__content .wp-block-image {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

/* Images inside column layouts */
.project__content .wp-block-columns .wp-block-image {
    margin-top: 0;
    margin-bottom: 0;
}

/* Spacing around split layouts */
.page-content > .wp-block-columns,
.project__content > .wp-block-columns {
	margin-top: 5rem;
	margin-bottom: 5rem;
}

/* Align section headings with the text column */
.project__content > .wp-block-heading {
    width: 100%;
    max-width: var(--content-width-text);
    margin-right: auto;
    margin-left: auto;
}

.page-content figcaption {
	max-width: var(--content-width-text);
	margin: 0.5rem auto 1rem;
	padding: 0 20px;
	font-size: var(--font-size-caption);
	line-height: 1.4;
	text-align: center;
}

/* --------------------------------------------------------------
   Gutenberg Gallery Captions
-------------------------------------------------------------- */

.page-content .wp-block-gallery.has-nested-images figure.wp-block-image {
	display: flex;
	flex-direction: column;
	height: auto;
	align-self: start;
}

.page-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	inset: auto;

	display: block;
	flex: none;

	width: 100%;
	max-width: var(--content-width-text);
	margin: 0.5rem auto 1rem;
	padding: 0 20px;

	background: none;
	color: inherit;

	font-family: var(--font-family-serif);
	font-size: var(--font-size-caption);
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	text-shadow: none;

	overflow: visible;
}

.page-content .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	display: none;
	content: none;
}


/* --------------------------------------------------------------
   Page Gallery
-------------------------------------------------------------- */

.page-content .wp-block-gallery {
	margin-top: 1.5rem;
}


/* --------------------------------------------------------------
   Page – Text / Image Split
-------------------------------------------------------------- */

.page-split {
	width: 100%;
	margin: 5rem auto;
}


/* --------------------------------------------------------------
   Split – Columns
-------------------------------------------------------------- */

.page-split .wp-block-columns {
	margin-bottom: 0;
	gap: 2rem;
}


/* --------------------------------------------------------------
   50 / 50
-------------------------------------------------------------- */

.page-split--50-50 .wp-block-column {
	flex-basis: calc(50% - 1rem) !important;
}


/* --------------------------------------------------------------
   33 / 66
-------------------------------------------------------------- */

.page-split--33-66 .wp-block-column:first-child {
	flex-basis: calc(33.333% - 1.333rem) !important;
}

.page-split--33-66 .wp-block-column:last-child {
	flex-basis: calc(66.667% - 0.667rem) !important;
}


/* --------------------------------------------------------------
   66 / 33
-------------------------------------------------------------- */

.page-split--66-33 .wp-block-column:first-child {
	flex-basis: calc(66.667% - 0.667rem) !important;
}

.page-split--66-33 .wp-block-column:last-child {
	flex-basis: calc(33.333% - 1.333rem) !important;
}


/* --------------------------------------------------------------
   Split – Text
-------------------------------------------------------------- */

.page-split .wp-block-column > p {
	max-width: var(--content-width-text);
}


/* --------------------------------------------------------------
   Split – Images
-------------------------------------------------------------- */

.page-split .wp-block-image {
	margin: 0;
}

.page-split .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}


/* --------------------------------------------------------------
   Split – Vertical Alignment
-------------------------------------------------------------- */

.page-split .wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}


/* --------------------------------------------------------------
   CTA Button
-------------------------------------------------------------- */

.wp-block-button .wp-block-button__link {
	margin: 0.5rem 0 1.5rem;
	padding: 0.3em 1.2em;
	border-width: 1px;
	transition: background-color 0.2s ease;
}

.wp-block-button .wp-block-button__link:hover {
	background: #e2e2e2;
}


/* --------------------------------------------------------------
   Responsive – Tablet
-------------------------------------------------------------- */

@media (max-width: 600px) {

    :root {
        --font-size-project-title: 2.5rem;
        --font-size-h2: 2rem;
    }

    body.page .site-main,
    .site-main {
        padding-top: 5rem;
        padding-bottom: 6rem;
    }

    .page-content {
        width: calc(100vw - 2rem);
    }

    .page-header {
        margin-bottom: 3rem;
        padding: 0 1rem;
    }

    .page-title {
        font-size: var(--font-size-project-title);
    }

    .page-content p {
        max-width: none;
    }

    .content-width-720,
    .content-width-1200,
    .content-width-1600 {
        width: 100%;
        max-width: none;
    }

    .project__header {
        margin-bottom: 3rem;
        padding: 0 1rem;
    }

    .project__content {
        width: calc(100vw - 2rem);
    }

    .project__content p {
        max-width: none;
    }

    .front-page__section {
        width: calc(100vw - 2rem);
    }

    .front-page__section-title {
        font-size: var(--font-size-project-title);
    }

    .front-page__about {
        padding-bottom: 6rem;
    }

    .front-page__about-content {
        max-width: none;
    }

    .project-overview {
        width: 100%;
        padding-bottom: 6rem;
    }

    .project-overview__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .project-card,
    .project-card--featured {
        grid-column: span 1;
    }

    /* Mobile: project title below image */
    .project-card__title,
    .project-card:not(.project-card--featured) .project-card__title {
        position: static;
        width: 100%;
        margin: 0;
        padding-top: 0.5rem;
        transform: none;
        color: inherit;
        font-size: 1.2rem;
        line-height: 1.2;
        text-align: center;
        opacity: 1;
    }

    .project-card__link:hover .project-card__title,
    .project-card__link:focus-visible .project-card__title {
        opacity: 1;
    }

    .project-card__figure::after {
        display: none;
    }

    .project-card__link:hover .project-card__image,
    .project-card__link:focus-visible .project-card__image {
        transform: none;
    }

    .project-navigation__columns {
        grid-template-columns: 1fr;
        width: calc(100% - 6rem);
        gap: 3rem;
        margin-top: 5rem;
    }

    .project-pagination {
        display: none;
    }
}


/* --------------------------------------------------------------
   Responsive – Split
-------------------------------------------------------------- */

@media (max-width: 700px) {

  /* Mobile: split columns stack vertically */
.page-split .wp-block-columns {
    display: block !important;
    width: 100%;
    margin: 0;
}

.page-split .wp-block-column {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0;
}

.page-split .wp-block-column + .wp-block-column {
    margin-top: 2rem;
}