/* Journal page specific styles - built atop base.css */
.page-hero { padding-block: var(--space-16) var(--space-14); background: linear-gradient(135deg, rgba(20,184,166,0.08), rgba(217,70,239,0.08)); }
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-10); align-items: center; }
.hero-copy p { color: var(--gray-700); }
.hero-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

.section { padding-block: var(--space-16); }
.alt-surface { background: var(--gray-50); }

.media-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: center; }
.media-copy p { color: var(--gray-700); }
.media-figure { order: 2; }
.media-copy { order: 1; }
.img-frame { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.intro-row { display: flex; gap: var(--space-3); margin-block-end: var(--space-5); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-3) var(--space-4); }
.cta-group { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-3); }

/* Size table */
.size-table-wrap { overflow-x: auto; }
.size-table { width: 100%; border-collapse: collapse; }
.size-table th, .size-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.size-table thead th { background: var(--gray-100); font-weight: 700; }

/* Reviews */
.reviews .review { display: flex; flex-direction: column; gap: var(--space-2); }
.stars { color: var(--color-warning); font-weight: 800; letter-spacing: .06em; }

/* FAQ */
.faq { display: grid; gap: var(--space-5); }
.faq-toggle { align-self: start; }
.faq-list { display: grid; gap: var(--space-3); }
details { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
summary { cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: 700; outline: none; list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] summary { border-bottom: 1px solid var(--color-border); background: var(--gray-50); }
.details-body { padding: var(--space-4) var(--space-5); color: var(--gray-700); }

.final-cta { background: linear-gradient(135deg, rgba(255,212,0,0.15), rgba(20,184,166,0.12)); }

/* Responsive */
@media (max-width: 980px) {
  .hero-grid, .media-grid { grid-template-columns: 1fr; }
  .media-figure { order: 1; }
  .media-copy { order: 2; }
}