/*
Theme Name: Photo Notes
Theme URI: https://photonotes.jp/
Author: Ryo
Description: A quiet, photography-first block theme for photo notes. Latest-post hero, journal-friendly typography, wide photography and restrained editorial spacing.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: photo-notes
*/

:root {
  --pn-ink: #242321;
  --pn-muted: #76726c;
  --pn-line: #dedbd4;
  --pn-paper: #fffefb;
  --pn-background: #faf9f6;
  --pn-shadow: 0 18px 50px rgba(32, 29, 25, 0.06);
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(36, 35, 33, 0.12);
}

/* Header */
.pn-site-header {
  border-bottom: 1px solid transparent;
}

.pn-site-header .wp-block-site-title {
  margin: 0;
  line-height: 1;
}

.pn-site-header .wp-block-site-title a {
  text-decoration: none;
}

.pn-site-header .wp-block-site-tagline {
  margin-top: 0.45rem;
}

.pn-site-header .wp-block-navigation a {
  text-decoration: none;
}

.pn-site-header .wp-block-navigation-item__content {
  position: relative;
}

.pn-site-header .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -0.38rem;
  height: 1px;
  background: currentColor;
  transition: right 180ms ease;
}

.pn-site-header .wp-block-navigation-item__content:hover::after,
.pn-site-header .current-menu-item > .wp-block-navigation-item__content::after {
  right: 0;
}

/* Home */
.pn-hero {
  margin-top: 0;
}

.pn-hero .wp-block-post-template,
.pn-hero .wp-block-post-template > li {
  margin: 0;
  padding: 0;
}

.pn-hero .wp-block-post-featured-image {
  margin: 0;
}

.pn-hero .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.6;
  object-fit: cover;
}

.pn-hero-meta {
  padding-top: clamp(1.2rem, 2vw, 1.9rem);
}

.pn-hero-title a,
.pn-post-card-title a,
.pn-photo-card-title a {
  text-decoration: none;
}

.pn-home-intro {
  padding-top: clamp(2.8rem, 6vw, 5rem);
  padding-bottom: clamp(2.8rem, 6vw, 5rem);
}

.pn-home-intro p {
  max-width: 760px;
}

.pn-section-rule {
  border-top: 1px solid var(--pn-line);
  padding-top: 1.25rem;
}

.pn-post-card-grid .wp-block-post-template {
  gap: clamp(1.6rem, 3vw, 2.6rem);
}

.pn-post-card .wp-block-post-featured-image {
  margin-bottom: 1.15rem;
  overflow: hidden;
}

.pn-post-card .wp-block-post-featured-image img,
.pn-photo-card .wp-block-post-featured-image img {
  transition: transform 300ms ease, opacity 300ms ease;
}

.pn-post-card:hover .wp-block-post-featured-image img,
.pn-photo-card:hover .wp-block-post-featured-image img {
  transform: scale(1.012);
  opacity: 0.96;
}

.pn-post-card .wp-block-post-excerpt__excerpt {
  margin-top: 0.75rem;
}

.pn-post-card .wp-block-post-excerpt__more-text {
  margin-top: 1rem;
}

.pn-post-card .wp-block-post-excerpt__more-link {
  font-size: 0.82rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Single post */
.pn-single-header {
  padding-top: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: clamp(1.8rem, 3vw, 3rem);
}

.pn-single-meta {
  gap: 0.85rem;
}

.pn-single-meta,
.pn-single-meta a {
  color: var(--pn-muted);
  text-decoration: none;
}

.pn-single-hero {
  margin-top: 0;
  margin-bottom: clamp(2.5rem, 5vw, 4.8rem);
}

.pn-single-hero img {
  width: 100%;
  max-height: 760px;
  object-fit: cover;
}

.pn-single-content {
  padding-bottom: clamp(2.8rem, 6vw, 5.2rem);
}

.pn-single-content > p,
.pn-single-content > ul,
.pn-single-content > ol,
.pn-single-content > blockquote {
  margin-top: 0;
  margin-bottom: 1.65em;
}

.pn-single-content > h2,
.pn-single-content > h3 {
  margin-top: 2.5em;
  margin-bottom: 1em;
}

.pn-single-content > .wp-block-image:not(.alignwide):not(.alignfull) {
  margin-top: 2.2rem;
  margin-bottom: 2.2rem;
}

/* Let end-of-post galleries breathe beyond the reading column. */
.single .pn-single-content > .wp-block-gallery,
.single .pn-single-content > .wp-block-image.alignwide,
.single .pn-single-content > .wp-block-columns.alignwide {
  width: min(1080px, calc(100vw - 40px));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: clamp(2.2rem, 5vw, 4rem);
  margin-bottom: clamp(2.2rem, 5vw, 4rem);
}

.single .pn-single-content > .wp-block-gallery img {
  width: 100%;
}

.wp-block-image figcaption,
.wp-block-gallery figcaption {
  color: var(--pn-muted);
  font-size: 0.76rem;
  line-height: 1.6;
}

.pn-post-nav {
  border-top: 1px solid var(--pn-line);
  padding-top: 1.35rem;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.pn-post-nav a {
  text-decoration: none;
}

/* Journal archive */
.pn-archive {
  padding-top: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: clamp(4rem, 7vw, 7rem);
}

.pn-archive-list .wp-block-post-template {
  gap: 0;
}

.pn-archive-card {
  border-top: 1px solid var(--pn-line);
  padding: clamp(1.7rem, 3vw, 2.6rem) 0;
}

.pn-archive-card .wp-block-post-featured-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Photos */
.pn-photo-grid .wp-block-post-template {
  gap: 1.15rem;
}

.pn-photo-card .wp-block-post-featured-image {
  margin-bottom: 0.65rem;
  overflow: hidden;
}

.pn-photo-card .wp-block-post-featured-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Footer */
.pn-site-footer {
  border-top: 1px solid var(--pn-line);
}

.pn-site-footer a {
  text-decoration: none;
}

/* Utility / native blocks */
.wp-block-separator {
  border-color: var(--pn-line);
  opacity: 1;
}

.wp-block-query-pagination a {
  text-decoration: none;
}

.wp-block-post-date {
  color: var(--pn-muted);
}

@media (max-width: 900px) {
  .pn-site-header .pn-header-inner {
    align-items: flex-start !important;
  }

  .pn-post-card-grid .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pn-photo-grid .wp-block-post-template {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .pn-site-header {
    padding-top: 1.35rem !important;
    padding-bottom: 1.35rem !important;
  }

  .pn-site-header .pn-header-inner {
    align-items: center !important;
  }

  .pn-site-header .wp-block-site-title {
    font-size: 1.75rem !important;
  }

  .pn-site-header .wp-block-site-tagline {
    font-size: 0.63rem !important;
  }

  .pn-hero .wp-block-post-featured-image img {
    aspect-ratio: 4 / 3;
  }

  .pn-home-intro {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .pn-post-card-grid .wp-block-post-template,
  .pn-photo-grid .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }

  .pn-post-card .wp-block-post-featured-image img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  .pn-single-header {
    padding-top: 2rem;
    padding-bottom: 1.4rem;
  }

  .pn-single-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .pn-single-hero img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .single .pn-single-content > .wp-block-gallery,
  .single .pn-single-content > .wp-block-image.alignwide,
  .single .pn-single-content > .wp-block-columns.alignwide {
    width: calc(100vw - 28px);
  }

  .pn-archive-card > .wp-block-columns {
    gap: 1.1rem !important;
  }
}