/*
Theme Name: Fotonokka
Theme URI: https://them.es/starter-fse
Author: Modaamo
Author URI: https://modaamo.fi
Description: 
Version: 1.4.1
Requires at least: 5.9
Tested up to: 6.9
Requires PHP: 7.2
License: GPL version 2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0
Text Domain: fotonokka-theme
Tags: full-site-editing, one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/

/* Don't overwrite this file. Compile "/assets/main.scss" to "/build/main.css" */

.wp-block-cover .wp-block-cover__image-background {
  object-fit: unset;
  height: auto;
}

.wp-block-cover,
.wp-block-cover-image {
  min-height: 506px;
  margin-bottom: 60px;
}

/*
 * The background image is absolutely positioned, so it never adds to the block's height:
 * the min-height above is the only thing giving the hero its size. On narrow screens that
 * fixed height is taller than the image renders, so the block takes an aspect ratio
 * instead and the image fills it. These heroes carry no inner content.
 */
@media (max-width: 900px) {
  .wp-block-cover,
  .wp-block-cover-image {
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin-bottom: clamp(24px, 6vw, 60px);
  }

  .wp-block-cover .wp-block-cover__image-background {
    height: 100%;
    object-fit: cover;
  }
}

.wp-block-post-content ul,
.entry-content ul {
  padding-inline-start: 60px;
}

@media (max-width: 781px) {
  .wp-block-post-content ul,
  .entry-content ul {
    padding-inline-start: 1.5rem;
  }
}

.wp-block-video video {
  max-height: 80vh;
  width: auto;
  height: auto;
}

.page:not(.home) .entry-content,
.page:not(.home) .wp-block-post-content {
  max-width: 1100px;
  margin: 0 auto;
}

.home h1,
.page-id-11 h1 {
  padding-top: var(--front-page-heading-top-gap, 60px);
}

.photographer-listing__names {
  margin-inline: auto;
  margin-block-start: 0;
  margin-block-end: var(
    --photographer-listing-grid-gap,
    calc(
      var(--front-page-heading-grid-gap, 120px) +
        var(--page-content-spacer, 33px)
    )
  );
  padding-top: var(--front-page-heading-top-gap, 60px);
  padding-bottom: var(
    --photographer-listing-names-padding-bottom,
    50px
  ) !important;
  padding-inline: var(--photographer-listing-names-padding-inline, 22px);
  gap: var(--photographer-listing-names-row-gap, 0.4em) 0;
}

.photographer-listing__names + .project-masonry__grid {
  margin-block-start: 0;
}

.photographer-listing .project-masonry__item {
  margin-bottom: var(--photographer-listing-card-item-gap, 2rem);
}

.photographer-listing .project-masonry__meta {
  text-align: center;
  padding-top: var(--photographer-listing-card-caption-padding-top, 20px);
  padding-bottom: var(--photographer-listing-card-caption-padding-bottom, 34px);
}

.photographer-listing .project-masonry__title {
  margin: 0;
  font-family: var(--serif-font, "Canela", serif);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 400;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
}

.photographer-listing .photographer-listing__role {
  margin: 5px 0 0;
  font-family: var(--main-font, "Graphik", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

.person-listing .person-listing__info {
  align-items: center;
  text-align: center;
}

.person-listing .person-listing__name {
  font-family: var(--serif-font, "Canela", serif);
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 6px;
}

.person-listing .person-listing__role,
.person-listing .person-listing__phone,
.person-listing .person-listing__email,
.person-listing .person-listing__bio-btn {
  font-family: var(--main-font, "Graphik", sans-serif);
  font-size: 16px;
  line-height: 18px;
  font-weight: 400;
}

.person-listing .person-listing__bio-btn {
  align-self: center;
}

.project-archive-page > .wp-block-heading,
.project-archive-page > h1 {
  padding-top: var(--front-page-heading-top-gap, 60px);
  margin-block-end: var(
    --photographer-listing-grid-gap,
    calc(
      var(--front-page-heading-grid-gap, 120px) +
        var(--page-content-spacer, 33px)
    )
  );
  margin-inline: auto;
  max-width: var(--wp--style--global--content-size, 900px);
  text-align: center;
}

.project-archive-page > .wp-block-heading + .wp-block-fotonokka-project-archive,
.project-archive-page > h1 + .wp-block-fotonokka-project-archive,
.project-archive-page > .wp-block-fotonokka-project-archive {
  margin-block-start: 0;
}

.project-archive-page .project-archive {
  padding-top: 0;
}

.team-persons img {
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-bottom: 24px;
  display: block;
}

.project-masonry__grid {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline-start: 0 !important;
  padding-left: var(--wp--style--root--padding-left) !important;
}

.project-archive-page .project-masonry__grid,
.photographer-listing-page .project-masonry__grid,
body.home .project-masonry__grid,
.front-page .project-masonry__grid {
  max-width: none;
  margin-inline: 0;
  padding-left: var(--page-edge-padding, 22px) !important;
  padding-inline-start: var(--page-edge-padding, 22px) !important;
  padding-right: var(--page-edge-padding, 22px);
}

body.home .wp-block-fotonokka-project-masonry .project-masonry__grid,
.front-page .wp-block-fotonokka-project-masonry .project-masonry__grid {
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  padding-right: 0;
}

body.home .wp-block-post-content > .wp-block-fotonokka-project-masonry,
.front-page .wp-block-post-content > .wp-block-fotonokka-project-masonry,
body.home .entry-content > .wp-block-fotonokka-project-masonry,
.front-page .entry-content > .wp-block-fotonokka-project-masonry {
  margin-block-start: 0;
}

.project-view {
  max-width: 1100px;
}

.project-navigation {
  display: none;
}

.project-archive {
  padding-left: 0;
}

/*
 * The rule above drops the global left padding so the masonry grid can set its own inset.
 * On the photographer pages the title and the tab navigation are siblings of that grid,
 * and once the viewport is narrower than their max-width they end up flush against the
 * screen edge. Give the padding back here and drop the grid's own so it isn't doubled.
 */
.project-archive--photographer {
  padding-left: var(--wp--style--root--padding-left);
}

.project-archive--photographer .project-masonry__grid {
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
}

.project-archive .wp-block-query-title {
  text-align: center;
  margin-bottom: 70px;
}

.project-tabs__button {
  display: none;
}

footer.site-footer {
  margin-top: 50px;
}

.wp-block-button .wp-block-button__link {
  display: inline-block;
  padding: 0.6rem 1.8rem;
  border: 1.5px solid #111;
  background: transparent;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.01em;
  color: inherit;
  text-decoration: none;
  border-radius: 0;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
  background: #111;
  color: #fff;
  outline: none;
}

.wp-block-button .wp-block-button__link.wp-element-button {
  background-color: transparent !important;
  color: inherit !important;
}

.wp-block-button .wp-block-button__link.wp-element-button:hover,
.wp-block-button .wp-block-button__link.wp-element-button:focus-visible {
  background-color: #111 !important;
  color: #fff !important;
}

/* Perussisältö: enemmän tilaa ennen H2-väliotsikkoa. Poikkeus: .is-style-process-step (Prosessi-sivu). */
.entry-content h2,
.entry-content .wp-block-heading[data-level="2"],
.wp-block-post-content h2,
.wp-block-post-content .wp-block-heading[data-level="2"] {
  margin-block-start: var(--content-h2-spacing-top, 3rem);
  font-size: var(
    --content-h2-font-size,
    var(--wp--preset--font-size--medium, 16px)
  );
  line-height: var(
    --content-h2-line-height,
    var(--wp--custom--typography--line-height--body, 1.7)
  );
}

.entry-content .is-style-process-step h2,
.entry-content .is-style-process-step .wp-block-heading[data-level="2"],
.wp-block-post-content .is-style-process-step h2,
.wp-block-post-content
  .is-style-process-step
  .wp-block-heading[data-level="2"] {
  margin-block-start: var(--process-step-h2-spacing-top, 0);
  font-size: 28px;
  line-height: var(--wp--custom--typography--line-height--heading, 1.3);
}