/* ============================================================
   about.css
   Page-specific styles for /about/advisers/ (index + display)
   and /about/partners/ (index + display).
   Relies on utilities.min.css, main.min.css and specialist.min.css
   being loaded first — component classes reused from those files:
   .page-hero, .breadcrumbs, .spec-search-bar, .spec-results-count,
   .spec-no-results, .spec-hero, .town-body, .info-hours-grid,
   .hours-card, .body-text.
   Append-only: new rules go at the end of this file.
   ============================================================ */

/* ── Adviser tile (listing grid) ───────────────────────────── */
.adviser-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.adviser-tile {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--ease-mid), transform var(--ease-mid), border-color var(--ease-mid);
}
.adviser-tile:hover {
  border-color: var(--pink);
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.adviser-tile__img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--purple-pale);
}
.adviser-tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease-slow);
}
.adviser-tile:hover .adviser-tile__img img { transform: scale(1.05); }

.adviser-tile__body {
  padding: 22px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adviser-tile__name {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 19px;
  color: var(--purple);
  line-height: 1.25;
}
.adviser-tile__desc {
  font-size: 13.5px;
  color: var(--ink-mid);
  line-height: 1.65;
  flex: 1;
}
.adviser-tile__cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--pink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  transition: gap var(--ease);
}
.adviser-tile:hover .adviser-tile__cta { gap: 10px; }

/* ── Adviser display page — hero photo override ─────────────── */
/* Base .spec-hero__image-wrap is a 340px rounded-xl rectangle;
   advisers get a circular headshot instead. */
.adviser-hero__photo {
  width: 220px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  flex-shrink: 0;
}
.adviser-hero__photo img { border-radius: 50%; }

/* ── Adviser display page — social row (image icons, not an icon font) ── */
.adviser-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.adviser-social a {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pink-pale);
  transition: background var(--ease), transform var(--ease);
}
.adviser-social a:hover {
  background: var(--pink);
  transform: translateY(-2px);
}
.adviser-social a img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ── Hero-to-content spacing (scoped override) ───────────────── */
/* .page-hero / .spec-search-section are shared components with fairly
   generous padding built for taller hero content (title + sub + stats).
   These pages have less above the stats row, so tighten the gap —
   safe to override here since about.css only loads on /about/advisers/. */
.page-hero { padding-bottom: 48px; }
.page-hero::after { height: 40px; }
.spec-search-section { padding-top: 48px; }

/* ── Responsive (advisers) ───────────────────────────────────── */
@media (max-width: 1300px) {
  .adviser-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .adviser-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .adviser-hero__photo { width: 180px; }
}
@media (max-width: 640px) {
  .adviser-grid { grid-template-columns: 1fr; }
  .adviser-hero__photo { display: none; }
}

/* ============================================================
   PARTNERS  (/about/partners/ — index + display)
   Reuses .page-hero, .breadcrumbs, .spec-search-bar,
   .spec-results-count, .spec-no-results, .spec-hero, .town-body,
   .info-hours-grid, .hours-card, .body-text — same as advisers above.
   ============================================================ */

/* ── Partner tile (listing grid) ───────────────────────────── */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.partner-tile {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--ease-mid), transform var(--ease-mid), border-color var(--ease-mid);
}
.partner-tile:hover {
  border-color: var(--pink);
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.partner-tile__img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--purple-pale);
}
.partner-tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease-slow);
}
.partner-tile:hover .partner-tile__img img { transform: scale(1.05); }

.partner-tile__body {
  padding: 22px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.partner-tile__name {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 19px;
  color: var(--purple);
  line-height: 1.25;
}
.partner-tile__desc {
  font-size: 13.5px;
  color: var(--ink-mid);
  line-height: 1.65;
  flex: 1;
}
.partner-tile__cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--pink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  transition: gap var(--ease);
}
.partner-tile:hover .partner-tile__cta { gap: 10px; }

/* ── Partner display page — hero photo override ──────────────── */
/* Base .spec-hero__image-wrap is a 340px rounded-xl rectangle sized
   for a portrait photo; partners reuse it at a slightly wider ratio,
   full-bleed cover, same as the adviser hero photo. */
.partner-hero__photo {
  width: 400px;
  height: 281px;
  border-radius: var(--r-xl);
  flex-shrink: 0;
}
.partner-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Partner display page — social row (image icons, not an icon font) ── */
.partner-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.partner-social a {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pink-pale);
  transition: background var(--ease), transform var(--ease);
}
.partner-social a:hover {
  background: var(--pink);
  transform: translateY(-2px);
}
.partner-social a img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ── Responsive (partners) ───────────────────────────────────── */
@media (max-width: 1300px) {
  .partner-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .partner-hero__photo { width: 220px; }
}
@media (max-width: 640px) {
  .partner-grid { grid-template-columns: 1fr; }
  .partner-hero__photo { display: none; }
}