/* ==========================================================================
   pages.css — styles for the additional pages (profile, contact, thank-you,
   404, category, location & landing pages). Loaded after styles.css.
   Does not modify any existing rule.
   ========================================================================== */

/* --- Profile page --- */
.profile { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
@media (min-width: 900px) { .profile { grid-template-columns: 300px minmax(0,1fr); align-items: start; } }
.profile__card {
  border: 1px solid var(--teal-line); border-radius: var(--radius-lg);
  background: var(--mist); overflow: hidden; text-align: center;
}
@media (min-width: 900px) { .profile__card { position: sticky; top: 120px; } }
.profile__photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; display: block; }
.profile__card-body { padding: var(--space-l); }
.profile__card-body h2 { font-size: var(--step-1); margin: 0 0 0.2rem; }
.profile__role { color: var(--teal-deep); font-weight: 600; margin: 0 0 0.3rem; }
.profile__creds { font-size: 0.85rem; color: var(--grey-body); margin: 0 0 var(--space-m); letter-spacing: 0.02em; }
.profile__body h2 { font-size: var(--step-2); margin: var(--space-l) 0 var(--space-s); }
.profile__body p { line-height: 1.75; margin: 0 0 var(--space-m); color: var(--ink); }
.profile__body ul { line-height: 1.7; margin: 0 0 var(--space-m) 1.2rem; color: var(--ink); }
.profile__body li { margin-bottom: 0.4rem; }

/* --- Contact page --- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-detail { display: flex; gap: var(--space-m); align-items: flex-start; margin-bottom: var(--space-l); }
.contact-detail svg { width: 26px; height: 26px; color: var(--teal-deep); flex: none; margin-top: 0.15rem; }
.contact-detail h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.contact-detail p, .contact-detail address { margin: 0; font-style: normal; color: var(--grey-body); line-height: 1.6; }
.contact-detail a { color: var(--navy); font-weight: 600; }

/* --- Thank-you / 404 centred pages --- */
.center-page { text-align: center; max-width: 620px; margin-inline: auto; }
.center-page__icon {
  width: 72px; height: 72px; margin: 0 auto var(--space-l);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--teal-soft); color: var(--teal-deep); border: 1px solid var(--teal-line);
}
.center-page__icon svg { width: 36px; height: 36px; }
.center-page .btn-row { justify-content: center; }
.next-steps { list-style: none; margin: var(--space-l) auto; padding: 0; max-width: 460px; text-align: left; display: grid; gap: var(--space-s); }
.next-steps li { display: flex; gap: 0.7rem; align-items: flex-start; }
.next-steps li svg { width: 22px; height: 22px; color: var(--teal-deep); flex: none; margin-top: 0.1rem; }
.quicklinks { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: var(--space-l); }
.quicklinks a {
  padding: 0.5rem 1rem; border: 1px solid var(--teal-line); border-radius: 999px;
  text-decoration: none; color: var(--navy); font-weight: 600; font-size: 0.9rem;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.quicklinks a:hover { background: var(--mist); border-color: var(--teal); }

/* --- Category archive --- */
.cat-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--space-l) 0; }
.cat-nav a {
  padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--teal-line);
  text-decoration: none; color: var(--navy); font-size: 0.9rem; font-weight: 600;
  background: var(--white); transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.cat-nav a:hover { border-color: var(--teal); }
.cat-nav a[aria-current="page"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.cat-nav a .count { opacity: 0.6; font-weight: 500; }
.res-card__img { aspect-ratio: 16/9; width: 100%; object-fit: cover; background: var(--mist); display: block; }

/* --- Location / landing: trust row --- */
.trust-row { display: grid; grid-template-columns: 1fr; gap: var(--space-m); margin-top: var(--space-l); }
@media (min-width: 640px) { .trust-row { grid-template-columns: repeat(3, 1fr); } }
.trust-row__item { display: flex; gap: 0.7rem; align-items: flex-start; }
.trust-row__item svg { width: 24px; height: 24px; color: var(--teal-deep); flex: none; margin-top: 0.1rem; }
.trust-row__item strong { display: block; color: var(--navy); }
.trust-row__item span { font-size: 0.92rem; color: var(--grey-body); }

/* Reviews placeholder notice (visible, so the client can see where reviews go) */
.reviews-placeholder {
  border: 1px dashed var(--teal-line); border-radius: var(--radius);
  padding: var(--space-l); text-align: center; color: var(--grey-body);
  background: var(--mist);
}

/* Contact: offices shown as a card grid below the form */
.contact-grid--offices { grid-template-columns: 1fr !important; margin-top: var(--space-l); }
.contact-grid--offices > div {
  display: grid; gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.contact-grid--offices .contact-detail {
  margin: 0; padding: var(--space-m); border: 1px solid var(--rule); border-radius: 14px; background: var(--white);
}

.contact-book .split { align-items: start; }
.contact-book .split > :first-child { padding-top: var(--space-l); }
.contact-quick { margin-top: var(--space-l); }
.contact-quick .contact-detail { margin-bottom: var(--space-m); }
.contact-grid--offices > div { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.contact-grid--offices a { overflow-wrap: anywhere; }