/* ==========================================================================
   Evergreen Dream Home — blog & generated pages
   --------------------------------------------------------------------------
   Loaded only by the PHP-rendered pages (blog index, posts, custom pages).
   It leans on the tokens and primitives already in style.css and adds only
   what an article needs: a readable measure, prose rhythm, and the card grid.
   ========================================================================== */

/* ---------------------------------------------------------------- listing */
.bloglist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 30px;
}
@media (max-width: 700px) { .bloglist { grid-template-columns: 1fr; gap: 24px; } }

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s;
}
.pcard:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(0, 0, 0, .55); }

.pcard__media { display: block; overflow: hidden; background: var(--sand); aspect-ratio: 16 / 10; }
.pcard__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.pcard:hover .pcard__media img { transform: scale(1.045); }

.pcard__bd { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.pcard__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .66rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 13px;
}
.pcard__meta time { color: var(--muted); letter-spacing: .14em; }
/* The separator is a pseudo-element on the date rather than its own span, so
   it wraps together with the date. As a separate flex item it would be left
   stranded at the end of a line whenever the meta row broke - which it does
   on the featured card and on every phone. */
.pcard__meta > time:not(:first-child)::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .45; margin-right: 10px;
}

.pcard h3 {
  font-family: var(--f-display, "Cinzel", serif);
  font-size: 1.2rem; line-height: 1.34; margin-bottom: 11px;
}
.pcard h3 a { color: inherit; transition: color .2s; }
.pcard h3 a:hover { color: var(--gold); }
.pcard p { color: var(--body); font-size: .93rem; line-height: 1.68; flex: 1; }
.pcard__more {
  display: inline-flex; align-items: center; gap: .5em;
  margin-top: 17px; font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
}
.pcard__more svg { width: 15px; height: 15px; transition: transform .25s; }
.pcard:hover .pcard__more svg { transform: translateX(4px); }

/* ---------------------------------------------------------- featured card
   The newest post on page one runs full width as a side-by-side. A blog
   starts life with three or four articles, and a plain equal grid of three
   reads as an unfinished page; leading with one gives the row a subject and
   makes the remainder look deliberate rather than sparse. */
.pcard--feat { grid-column: 1 / -1; }
@media (min-width: 860px) {
  .pcard--feat { flex-direction: row; align-items: stretch; }
  .pcard--feat .pcard__media { flex: 0 0 54%; aspect-ratio: auto; min-height: 340px; }
  .pcard--feat .pcard__bd { padding: 38px 44px; justify-content: center; }
  .pcard--feat h3 { font-size: clamp(1.4rem, 2.1vw, 1.86rem); line-height: 1.26; margin-bottom: 15px; }
  .pcard--feat p { font-size: 1.02rem; line-height: 1.72; flex: 0 1 auto; }
  .pcard--feat .pcard__meta { margin-bottom: 16px; }
  .pcard--feat .pcard__more { margin-top: 24px; }
}
.pcard__flag {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); background: var(--gold, #d5a83f);
  padding: 5px 11px; border-radius: 2px; margin-right: 4px;
}

/* ------------------------------------------------------------ article head */
.phead { text-align: center; max-width: 860px; margin: 0 auto; }
.phead__meta {
  display: flex; align-items: center; justify-content: center;
  gap: 11px; flex-wrap: wrap;
  font-size: .68rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold, #d5a83f); margin-bottom: 20px;
}
.phead__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.phead h1 { margin-bottom: 18px; }
.phead__lede {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.24rem; line-height: 1.68; font-style: italic;
  color: rgba(255, 255, 255, .74); max-width: 680px; margin: 0 auto;
}

.phero {
  max-width: 1080px; margin: -60px auto 0; position: relative; z-index: 2;
  padding-inline: var(--gut, 22px);
}
.phero img {
  width: 100%; display: block; border-radius: 2px;
  box-shadow: 0 30px 76px rgba(0, 0, 0, .66);
}
.phero figcaption {
  text-align: center; font-size: .78rem; color: var(--muted);
  padding-top: 11px; font-style: italic;
}

/* ------------------------------------------------------------------ prose
   A single measure for body copy. 68ch is the widest a serif paragraph stays
   comfortable at this size; the headings and figures break out wider. */
.prose { max-width: 68ch; margin: 0 auto; }
.prose > * + * { margin-top: 1.35em; }

.prose p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.16rem; line-height: 1.78; color: var(--body);
}
.prose h2 {
  font-family: var(--f-display, "Cinzel", serif);
  font-size: clamp(1.32rem, 2.3vw, 1.72rem); line-height: 1.28;
  margin-top: 2.1em; padding-top: .1em;
}
.prose h3 {
  font-family: var(--f-display, "Cinzel", serif);
  font-size: clamp(1.1rem, 1.7vw, 1.28rem); margin-top: 1.7em;
}
.prose h4 { font-size: 1.02rem; font-weight: 600; margin-top: 1.5em; letter-spacing: .02em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .7em; }

.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold-lt); }

.prose ul, .prose ol { padding-left: 1.35em; }
.prose li {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.13rem; line-height: 1.72; color: var(--body);
}
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--gold, #d5a83f); }

.prose blockquote {
  border-left: 2px solid var(--gold, #d5a83f);
  padding: .3em 0 .3em 1.5em; margin-block: 1.9em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.28rem; line-height: 1.66; font-style: italic;
  color: var(--body);
}
.prose blockquote p { font-size: inherit; font-style: inherit; }

.prose img { max-width: 100%; height: auto; display: block; border-radius: 2px; }
.prose figure { margin-block: 2em; }
.prose figcaption {
  font-size: .8rem; color: var(--muted);
  padding-top: 10px; font-style: italic; text-align: center;
}
.prose hr {
  border: 0; height: 1px; margin-block: 2.6em;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16) 30%, rgba(255, 255, 255, .16) 70%, transparent);
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em; background: rgba(255, 255, 255, .06);
  padding: .15em .45em; border-radius: 3px;
}
.prose pre {
  background: var(--ink); color: #f2efe9;
  padding: 18px 20px; border-radius: 2px; overflow-x: auto;
}
.prose pre code { background: none; padding: 0; color: inherit; }

.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th {
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}
.prose .tablewrap { overflow-x: auto; }

/* --------------------------------------------------------------- post foot */
.ptags { display: flex; gap: 8px; flex-wrap: wrap; }

/* The category filter row belongs to the grid below it, not to the banner
   above, so the two are pulled together and the section that follows drops
   most of its own top padding rather than stacking a second full gap. */
.ptags--filter { justify-content: center; gap: 9px; }
.section--after-filter { padding-top: clamp(22px, 2.6vw, 34px); }
.ptags span {
  font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 12px; border: 1px solid var(--line);
  border-radius: 20px; color: var(--muted);
}

.pnav { display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap; }
.pnav a { flex: 1; min-width: 240px; }
.pnav small {
  display: block; font-size: .64rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 7px;
}
.pnav b {
  font-family: var(--f-display, "Cinzel", serif); font-size: 1rem;
  font-weight: 700; line-height: 1.4; color: var(--char);
}
.pnav a:hover b { color: var(--gold); }
.pnav--r { text-align: right; }

/* ----------------------------------------------------------------- pager */
.bpager { display: flex; gap: 9px; justify-content: center; align-items: center; flex-wrap: wrap; }
.bpager a, .bpager span {
  min-width: 42px; height: 42px; padding: 0 13px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 2px;
  font-size: .82rem; font-weight: 500; color: var(--body);
  transition: background .2s, color .2s, border-color .2s;
}
.bpager a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.bpager .is-on { background: rgba(213, 168, 63, .14); border-color: var(--gold); color: var(--gold-lt); }
.bpager .gap { border: 0; }

/* --------------------------------------------------------------- FAQ block */
.pfaq { max-width: 68ch; margin: 0 auto; }
.pfaq details {
  border-bottom: 1px solid var(--line);
}
.pfaq summary {
  cursor: pointer; padding: 19px 40px 19px 0; position: relative;
  font-family: var(--f-display, "Cinzel", serif);
  font-size: 1rem; font-weight: 700; line-height: 1.45;
  list-style: none;
}
.pfaq summary::-webkit-details-marker { display: none; }
.pfaq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--gold, #d5a83f);
  border-bottom: 1.5px solid var(--gold, #d5a83f);
  transform: rotate(45deg); transition: transform .25s;
}
.pfaq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.pfaq .a {
  padding: 0 40px 21px 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.1rem; line-height: 1.75; color: var(--body);
}

/* --------------------------------------------------------- section spacing */
.section--post { padding-block: clamp(46px, 6vw, 84px); }
.pmeta-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; max-width: 68ch; margin: 0 auto;
  padding-top: 30px; border-top: 1px solid var(--line);
}