/*
  Styles for the About, Resources, and Contact pages.
  Reuses .container/.section/.stack/.on-dark/.btn/.section-heading from layout.css
  and the shared header/footer from site-shell.css. Nothing here duplicates home.css.
*/

/* ---------- Page hero (About / Resources / Contact) ---------- */

.page-hero {
  padding-block: clamp(var(--space-12), 7vw, var(--space-20)) clamp(var(--space-8), 5vw, var(--space-12));
}

.page-hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.page-hero__eyebrow {
  display: inline-block;
  margin-block-end: var(--space-4);
  padding: var(--space-1) var(--space-3);
  color: var(--color-graphite);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-soft-gray);
  border-radius: var(--radius-sm);
}

.page-hero__title {
  max-width: 16ch;
  font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing: -0.01em;
}

.page-hero__body {
  max-width: 42ch;
  margin-block-start: var(--space-4);
  color: var(--color-slate);
  font-size: var(--font-size-lg);
}

.page-hero__art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 15rem;
  padding: var(--space-6);
  background: var(--color-soft-gray);
  border-radius: var(--radius-md);
}

.page-hero__art img {
  width: 100%;
  max-width: 16rem;
  height: auto;
}

@media (min-width: 64rem) {
  .page-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .page-hero__art { min-height: 22rem; }
}

/*
  Full-bleed scene illustrations (Bookkeeping, Compliance Filing, Tax Services).
  Their teal field is part of the artwork (limbs and objects run off or blend into it),
  so it cannot be removed. Instead of sitting as a small rectangle inside the gray panel
  built for cut-out figures, the image itself becomes the panel: no gray frame, no padding,
  aspect ratio preserved (nothing is cropped or stretched), same corner radius, and capped
  at the footprint of the standard panel (31rem wide, about 22rem tall).
  Declared after the min-height media query above so these overrides win.
*/
.page-hero__art--scene {
  min-height: 0;
  padding: 0;
  background: none;
}

.page-hero__art--scene img {
  max-width: min(100%, 31rem);
  border-radius: var(--radius-md);
}

/* Portrait scene: limited by height instead of width, matching the Sales Tax panel (25.625rem). */
.page-hero__art--scene-tall img {
  width: auto;
  max-height: 25.625rem;
}

/* ---------- Generic content section (headings + body copy) ---------- */

.content-section { padding-block: clamp(var(--space-10), 6vw, var(--space-16)); }
.content-section--soft { background: var(--color-soft-gray); }

.content-section__body {
  max-width: var(--container-reading);
  color: var(--color-slate);
  font-size: var(--font-size-md);
}

.content-section__body > * + * { margin-block-start: var(--space-4); }

/* ---------- Audience list (About page, text-first, not the homepage cards) ---------- */

.audience-list {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.audience-list__item {
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--color-ink);
}

.audience-list__item h3 {
  margin-block-end: var(--space-1);
  font-size: var(--font-size-md);
}

.audience-list__item p {
  max-width: none;
  color: var(--color-slate);
  font-size: var(--font-size-sm);
}

@media (min-width: 48rem) {
  .audience-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
}

@media (min-width: 64rem) {
  .audience-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- How-we-help list (About page) ---------- */

.help-list {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.help-list__item {
  padding: var(--space-5);
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.help-list__item h3 {
  margin-block-end: var(--space-1);
  font-size: var(--font-size-md);
}

.help-list__item p {
  max-width: none;
  color: var(--color-slate);
  font-size: var(--font-size-sm);
}

@media (min-width: 48rem) {
  .help-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Services links (About page "Services Connection") ---------- */

.services-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.services-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
}

.services-links a:hover { background: var(--color-soft-gray); }

/* ---------- Resource card (Resources page) ---------- */

.resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.resource-card__icon {
  flex: none;
  width: 4rem;
  height: 4rem;
}

.resource-card__title { margin-block-end: var(--space-2); font-size: var(--font-size-lg); }

.resource-card__meta {
  margin-block-end: var(--space-4);
  color: var(--color-slate);
  font-size: var(--font-size-sm);
}

.resource-card__body { max-width: none; color: var(--color-slate); margin-block-end: var(--space-6); }

@media (min-width: 48rem) {
  .resource-card { flex-direction: row; align-items: flex-start; }
}

.resource-note {
  max-width: var(--container-reading);
  margin-block-start: var(--space-6);
  color: var(--color-slate);
  font-size: var(--font-size-sm);
}

/* ---------- Contact methods ---------- */

.contact-methods {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-methods__item {
  min-width: 0;
  padding: var(--space-5);
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.contact-methods__label {
  display: block;
  margin-block-end: var(--space-1);
  color: var(--color-slate);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-methods__value {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.contact-methods__value:hover { text-decoration: underline; }

@media (min-width: 48rem) {
  .contact-methods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Consultation form ---------- */

.consult-form {
  display: grid;
  gap: var(--space-5);
  max-width: 36rem;
}

.form-field { display: grid; gap: var(--space-2); }

.form-field label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.form-field input,
.form-field select,
.form-field textarea {
  min-height: 2.75rem;
  padding: var(--space-3);
  color: var(--color-ink);
  font: inherit;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-graphite);
  border-radius: var(--radius-sm);
}

.form-field textarea { min-height: 7rem; resize: vertical; }

.form-field input:invalid:not(:placeholder-shown),
.form-field select:invalid,
.form-field textarea:invalid:not(:placeholder-shown) {
  border-color: var(--color-ink);
}

.form-note {
  margin-block-start: var(--space-2);
  color: var(--color-slate);
  font-size: var(--font-size-xs);
}

.form-status {
  margin-block-start: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  background: var(--color-soft-gray);
  border-radius: var(--radius-sm);
}

.form-status[hidden] { display: none; }

/* ---------- Breadcrumb (individual service pages) ---------- */

.breadcrumb {
  padding-block: var(--space-4);
  border-block-end: var(--border-width) solid var(--border-color);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-slate);
  font-size: var(--font-size-xs);
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-inline-start: var(--space-2);
  color: var(--color-gray);
}

.breadcrumb a { color: var(--color-slate); }
.breadcrumb a:hover { color: var(--color-ink); }
.breadcrumb [aria-current="page"] { color: var(--color-ink); font-weight: var(--font-weight-semibold); }

/* ---------- Process steps (individual service pages) ---------- */

.process-steps {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: process-step;
}

.process-steps li {
  position: relative;
  padding-inline-start: var(--space-12);
}

.process-steps li::before {
  counter-increment: process-step;
  content: counter(process-step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  background: var(--color-ink);
  border-radius: 50%;
}

.process-steps h3 {
  margin-block-end: var(--space-1);
  font-size: var(--font-size-md);
}

.process-steps p {
  max-width: none;
  color: var(--color-slate);
  font-size: var(--font-size-sm);
}

@media (min-width: 48rem) {
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
}

/* ---------- FAQ (individual service pages) ---------- */

.faq-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  max-width: var(--container-reading);
}

.faq-item {
  padding: var(--space-2) var(--space-5);
  background: var(--color-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--motion-fast) var(--motion-ease);
}

.faq-item[open] summary::after { transform: rotate(225deg); }

.faq-item p {
  max-width: none;
  margin: 0 0 var(--space-4);
  color: var(--color-slate);
  font-size: var(--font-size-sm);
}

/* ---------- Simple CTA sections (About / Resources closing CTAs) ---------- */

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.section--dark .section-heading__sub,
.section--dark p { color: var(--color-gray); }