/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: var(--color-accent);
  color: var(--surface-page);
  border: none;
  border-radius: 999px;
  padding: var(--space-xs) var(--space-l);
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.btn:hover, .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--color-accent) 60%, transparent);
  color: var(--surface-page);
}
.btn--ghost {
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--color-accent);
  color: var(--surface-page);
}

/* Cards (used by both sample-card and testimonial-card patterns) */
.card {
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-m);
  padding: var(--space-l);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

/* Featured-image thumbnail, bled to the card's edges via negative margin
   so it sits flush under the accent border and above the padded text. */
.card__thumb {
  display: block;
  margin: calc(var(--space-l) * -1) calc(var(--space-l) * -1) var(--space-m);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tag {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--surface-inverse);
  background: var(--color-accent-soft);
  border-radius: 999px;
  padding: 0.2em 0.75em;
  margin-bottom: var(--space-xs);
}
.tag--turquoise {
  background: var(--color-accent-2);
  color: var(--surface-page);
}
.tag--gold {
  background: var(--color-accent-soft);
}

/* Sample cards (Writing & Editing Samples archive) */
.sample-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-l);
}
.sample-card h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-2xs);
}
.sample-card p {
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--text-body) 78%, transparent);
  margin-bottom: 0;
}

/* Single sample page — full-width hero alternative to the floated cover,
   chosen per-post via the "Featured Image Layout" meta box. Sits as a
   sibling above .entry-header so it spans the full .container width
   rather than being constrained to the narrower prose column. */
.sample-single__hero {
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: var(--radius-m);
  margin-bottom: var(--space-l);
}
.sample-single__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 30rem) {
  .sample-single__hero {
    aspect-ratio: 4 / 3;
  }
}

/* Single sample page — floated so the tag/title/excerpt wrap beside the
   cover instead of it sitting in its own row above them. */
.sample-single__thumb {
  float: left;
  max-width: 15rem;
  margin: 0 var(--space-l) var(--space-m) 0;
  border-radius: var(--radius-s);
  overflow: hidden;
  box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--color-ink) 45%, transparent);
}
@media (max-width: 30rem) {
  .sample-single__thumb {
    float: none;
    max-width: 12rem;
  }
}
.sample-single__thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.sample-single__meta {
  clear: both;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  padding-top: var(--space-s);
}

/* Testimonials */
.testimonial {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-m);
  align-items: start;
  margin-bottom: var(--space-l);
}
.testimonial img {
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
  object-fit: cover;
}
.testimonial blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
}
.testimonial cite {
  display: block;
  margin-top: var(--space-2xs);
  font-style: normal;
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--text-body) 70%, transparent);
}
@media (max-width: 30rem) {
  .testimonial { grid-template-columns: 1fr; }
}

/* PDF sample modal */
.pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-m);
  background: color-mix(in srgb, var(--color-ink) 70%, transparent);
}
.pdf-modal.is-open { display: flex; }
.pdf-modal__frame {
  background: var(--surface-page);
  border-radius: var(--radius-m);
  overflow: hidden;
  width: min(60rem, 100%);
  height: min(42rem, 90vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.5);
}
.pdf-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-m);
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.pdf-modal__bar strong { font-family: var(--font-display); }
.pdf-modal__close {
  background: none;
  border: none;
  color: var(--text-inverse);
  font-size: var(--step-1);
  cursor: pointer;
  line-height: 1;
  padding: var(--space-2xs);
}
.pdf-modal__frame iframe {
  flex: 1;
  border: none;
  width: 100%;
}