/* Journal (blog) — previously styled entirely with inline style="" attrs
   and no dedicated stylesheet at all, despite a real, fully-built
   BlogPost model/view layer (categories, featured post, related posts,
   real Article + breadcrumb structured data) behind it. This is the
   frontend catching up to backend work that was already done. */

.journal-hero { padding: 64px 48px 8px; text-align: center; }
.journal-hero .eyebrow { color: var(--color-gold-accent); font-size: 12px; letter-spacing: .25em; font-weight: 600; margin-bottom: 14px; }
.journal-hero h1 { font-family: var(--font-serif); font-size: clamp(30px, 4vw, 40px); margin: 0 0 30px; font-weight: 600; }

.journal-filters { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.journal-filter {
  padding: 9px 18px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid #ddd;
  color: var(--color-text-dark-dim-2);
  background: var(--color-white);
  transition: all .2s ease;
}
.journal-filter:hover { border-color: var(--color-charcoal-primary); color: var(--color-text-dark); }
.journal-filter.is-active { background: var(--color-charcoal-primary); border-color: var(--color-charcoal-primary); color: var(--color-beige-light); }

.journal-featured {
  display: grid; grid-template-columns: 1.1fr 1fr;
  background: var(--color-white);
  border-radius: var(--radius-collection-card);
  overflow: hidden;
  box-shadow: var(--shadow-card-resting-light);
  transition: transform .3s ease, box-shadow .3s ease;
}
.journal-featured:hover { box-shadow: var(--shadow-card-hover-light); }
.journal-featured__media { position: relative; min-height: 320px; background: var(--color-beige-light); overflow: hidden; }
.journal-featured__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.journal-featured:hover .journal-featured__media img { transform: scale(1.04); }
.journal-featured__media:not(:has(img))::before {
  content: "AK"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 72px; color: var(--color-brown-leather); opacity: .12;
}
.journal-featured__body { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.journal-featured__meta { color: var(--color-gold-hover); font-size: 11px; font-weight: 700; letter-spacing: .08em; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.journal-featured__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.journal-featured__title { font-family: var(--font-serif); font-size: 26px; line-height: 1.25; margin: 0 0 14px; }
.journal-featured__excerpt { color: var(--color-text-dark-dim); font-size: 14.5px; line-height: 1.75; }
.journal-featured__cta { margin-top: 22px; color: var(--color-brown-leather); font-size: 12px; font-weight: 700; letter-spacing: .05em; display: inline-flex; align-items: center; gap: 6px; }
.journal-featured:hover .journal-featured__cta { color: var(--color-charcoal-primary); }
@media (max-width: 767px) { .journal-featured { grid-template-columns: 1fr; } .journal-featured__media { min-height: 220px; } .journal-featured__body { padding: 30px 24px; } }

/* Real bug found and fixed (2026-08-22 QA pass): minmax(280px, 1fr) with
   no floor against the container broke on the empty-journal state at
   320px -- .journal-grid's own content width there is 224px, narrower
   than the 280px minimum, so the grid item (and the page) overflowed
   horizontally by a real, confirmed 8px. min(280px, 100%) only changes
   anything when the container is already narrower than 280px -- can't
   affect any wider/desktop layout. */
.journal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 28px; }
.journal-card { display: block; border-radius: var(--radius-card); overflow: hidden; background: var(--color-white); box-shadow: var(--shadow-card-resting-light); transition: transform .3s ease, box-shadow .3s ease; }
.journal-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover-light); }
.journal-card__media { position: relative; height: 200px; background: var(--color-beige-light); overflow: hidden; }
.journal-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.journal-card:hover .journal-card__media img { transform: scale(1.05); }
.journal-card__media:not(:has(img))::before {
  content: "AK"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 48px; color: var(--color-brown-leather); opacity: .14;
}
.journal-card__body { padding: 22px; }
.journal-card__meta { color: var(--color-gold-hover); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.journal-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.journal-card__title { font-family: var(--font-serif); font-size: 17px; line-height: 1.3; margin-bottom: 10px; color: var(--color-text-dark); }
.journal-card__excerpt { color: var(--color-text-dark-dim-2); font-size: 13px; line-height: 1.6; }

.journal-article__cover { position: relative; height: 420px; background: var(--color-beige-light); overflow: hidden; }
.journal-article__cover img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .journal-article__cover { height: 240px; } }
.journal-article__meta { color: var(--color-gold-hover); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.journal-article__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.journal-article__title { font-family: var(--font-serif); font-size: clamp(26px, 4vw, 36px); line-height: 1.2; margin: 0 0 32px; font-weight: 600; }
.journal-article__body { color: var(--color-text-dark-dim); font-size: 16px; line-height: 1.9; }
.journal-article__body p { margin: 0 0 22px; }

.journal-related h2 { font-family: var(--font-serif); font-size: 22px; margin-bottom: 24px; }
.journal-empty { grid-column: 1/-1; text-align: center; padding: 60px 0; color: var(--color-text-dark-dim-2); font-size: 14px; }