/* =============================================================
   Spartan Agency — Info page layouts (2026)
   Shared shell for the three audience-oriented content pages:

     .tx-services-page     -> Management Services (owners)
     .tx-application-page  -> Application Requirements (prospects)
     .tx-tenant-page       -> Current Tenant (residents)
     .tx-about-page        -> About Us (everyone)

   Each page uses the same rhythm:

     Intro    Eyebrow + H1 + lede + optional CTA row
     Body     Named sections (columns, lists, forms) at content width
     CTA      Bottom band with primary + secondary buttons

   All three inherit the section-container width from `.section--light`
   / `.section--bone` when the parent section carries those hooks. This
   file only styles the internal rhythm; the outer background is set
   by the section utility on the surrounding <section> tag.
   ============================================================= */

/* -- Shared shell -------------------------------------------------- */
.tx-services-page,
.tx-application-page,
.tx-tenant-page,
.tx-about-page {
  background: var(--surface-content);
  color: var(--text);
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
}

.tx-services-page > .wp-block-group,
.tx-application-page > .wp-block-group,
.tx-tenant-page > .wp-block-group,
.tx-about-page > .wp-block-group,
.tx-about-page > .tx-fb-teaser {
  max-width: var(--max-w, 1100px);
  margin-inline: auto;
}

/* -- Intro (shared) ----------------------------------------------- */
.tx-services-page__intro,
.tx-application-page__intro,
.tx-tenant-page__intro,
.tx-about-page__intro {
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.tx-services-page__intro h1,
.tx-application-page__intro h1,
.tx-tenant-page__intro h1,
.tx-about-page__intro h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  color: var(--charcoal-2);
  margin: 0.5rem 0 1rem;
}

.tx-services-page__lede,
.tx-about-page__lede,
.tx-application-page__intro > .wp-block-paragraph,
.tx-tenant-page__intro > .wp-block-paragraph,
.tx-services-page__intro .wp-block-paragraph:not(.tx-eyebrow),
.tx-application-page__intro p:not(.tx-eyebrow),
.tx-tenant-page__intro p:not(.tx-eyebrow) {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: var(--text);
  max-width: 64ch;
  margin: 0 0 1.25rem;
}

/* -- Body sections ------------------------------------------------- */
.tx-services-page__grid,
.tx-services-page__cta,
.tx-application-page__list,
.tx-application-page__criteria,
.tx-application-page__cta,
.tx-tenant-page__tasks,
.tx-tenant-page__form,
.tx-tenant-page__faq,
.tx-about-page__story,
.tx-about-page__what,
.tx-about-page__why,
.tx-about-page__cta {
  padding-block: clamp(2rem, 4vw, 3rem);
}

.tx-services-page__grid h2,
.tx-application-page__list h2,
.tx-application-page__criteria h2,
.tx-tenant-page__faq h2,
.tx-tenant-page__form h2,
.tx-about-page__story h2,
.tx-about-page__what h2,
.tx-about-page__why h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--charcoal-2);
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

/* Column card headings -------------------------------------------- */
.tx-services-page__grid h3,
.tx-tenant-page__tasks h2, /* task cards follow the H1 directly, so they are H2s */
.tx-tenant-page__tasks h3,
.tx-tenant-page__faq h3,
.tx-about-page__what h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--charcoal-2);
  margin: 0 0 0.5rem;
}

.tx-services-page__grid p,
.tx-tenant-page__tasks p,
.tx-tenant-page__faq p,
.tx-about-page__what p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 1rem;
}

/* -- About: story prose + "what we do" tiles + "why" ledger -------- */
.tx-about-page__story p {
  max-width: 68ch;
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.tx-about-page__what .wp-block-column {
  background: var(--bone);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border-radius: var(--r-sm);
  border-top: 4px solid var(--brand-primary);
}

.tx-about-page__why ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s-3);
}

.tx-about-page__why li {
  padding: var(--s-3) var(--s-4);
  border-left: 4px solid var(--brand-primary);
  background: var(--bone);
  border-radius: var(--r-sm);
  line-height: 1.5;
}

.tx-about-page__why li strong {
  color: var(--charcoal-2);
}

.tx-about-page__cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--r-md, 6px);
  background: var(--surface-dark);
  color: var(--text-on-dark);
}

.tx-about-page__cta h2 {
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 1rem;
}

.tx-about-page__cta p {
  color: var(--on-charcoal-muted, rgba(255, 255, 255, 0.85));
  max-width: 64ch;
  margin: 0 0 1.5rem;
}

/* -- Application checklist ---------------------------------------- */
.tx-application-page__checklist {
  list-style: decimal-leading-zero inside;
  padding: 0;
  margin: 0 0 1.5rem;
  counter-reset: application-item;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.tx-application-page__checklist li {
  padding: var(--s-3) var(--s-4);
  background: var(--bone);
  border-left: 4px solid var(--brand-primary);
  border-radius: var(--r-sm);
  line-height: 1.5;
}

.tx-application-page__checklist li strong {
  color: var(--charcoal-2);
}

.tx-application-page__criteria ul {
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}

.tx-application-page__criteria li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

/* -- Tenant task tiles -------------------------------------------- */
.tx-tenant-page__tasks .wp-block-column {
  background: var(--bone);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
}

.tx-tenant-page__tasks .wp-block-column .wp-block-buttons {
  margin-top: auto;
}

/* -- Tenant maintenance form -------------------------------------- */
.tx-tenant-page__form {
  background: var(--bone);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-md, 6px);
  margin-block: clamp(2rem, 4vw, 3rem);
}

/* Field styling lives in plugins/contact-form-7.css so the same
   rules cover the Contact page, this form, and the accessibility
   barrier report. */

/* -- CTA sections ------------------------------------------------- */
.tx-services-page__cta,
.tx-application-page__cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--r-md, 6px);
}

.tx-services-page__cta {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.tx-services-page__cta h2 {
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 1rem;
}

.tx-services-page__cta p {
  color: var(--on-charcoal-muted, rgba(255, 255, 255, 0.85));
  margin: 0 0 1.5rem;
}