/* SSA website: shared styles.
   Most layout and typography lives inline in each page (exported from the design).
   This file adds the site-wide basics, photo slots and the mobile menu. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #F5F1E8; color: #15241D; -webkit-font-smoothing: antialiased; }
a { color: #15241D; text-decoration: none; }
a:hover { color: #8C6420; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid #8C6420; outline-offset: 3px; }

/* ---------- Photo slots ----------
   Every placeholder carries data-photo="/assets/images/<folder>/<name>" (no extension).
   site.js looks for <name>.jpg, then .webp, .jpeg, .png. When found, the photo
   fills the slot and the placeholder label disappears. */
[data-photo] { transition: opacity .4s ease; }
[data-photo].has-photo {
  background-image: var(--photo) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
[data-photo][data-overlay].has-photo {
  background-image: linear-gradient(180deg, rgba(21, 36, 29, 0.30) 0%, rgba(21, 36, 29, 0.80) 100%), var(--photo) !important;
}
.has-photo .ph-label { display: none !important; }

/* ---------- Header and mobile menu ---------- */
.nav-toggle {
  display: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #1E3B2F;
  background: transparent;
  color: #1E3B2F;
  font: 600 13px/1 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .site-nav {
    display: none !important;
    width: 100%;
    flex-direction: column;
    gap: 0 !important;
    border-top: 1px solid #D8D0BF;
  }
  .site-nav.open { display: flex !important; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid #E6DFD0 !important; }
}

/* ---------- Tablets and phones ---------- */
@media (max-width: 960px) {
  /* Stat and value columns stack or wrap: keep them on the page's left edge, no dividers */
  .stat-col { padding-left: 0 !important; padding-right: 20px !important; border-right: 0 !important; flex-basis: 140px !important; }
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  /* Page containers: 20px side margins instead of 32px */
  [style*="max-width: 1240px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-column: span 2"] { grid-column: span 2 !important; }
  .stat-col { flex-basis: 100% !important; padding-right: 0 !important; border-bottom: 1px solid rgba(128, 128, 112, 0.25); }
  .stat-col:last-child { border-bottom: 0; }
  a[style*="position: fixed"] { right: 16px !important; bottom: 16px !important; }
  /* Partner portrait grids: two per row instead of one full-screen portrait at a time */
  li[style*="flex: 1 1 200px"][style*="flex-direction: column"] { flex: 0 0 calc(50% - 12px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Foundation programme cards: headings reserve two lines so the text below lines up across cards */
@media (max-width: 760px) { .prog-title { min-height: 0 !important; } }

/* ---------- Portfolio and fund logos ----------
   Logos sit in greyscale so the wall reads as one set, and come into full colour
   as the card lifts on hover. On touch screens (no hover) they show in colour. */
.logo-box { height: 68px; display: flex; align-items: center; margin-bottom: 10px; }
.brand-logo {
  display: block; width: auto; height: 44px; max-width: 180px;
  object-fit: contain; object-position: left center;
  filter: grayscale(1); opacity: 0.65;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.pf-card, .lp-card { position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; }
.pf-card:hover {
  transform: translateY(-4px); z-index: 1; background-color: #FFFFFF !important;
  box-shadow: 0 16px 36px rgba(26, 56, 45, 0.08), inset 0 0 0 1px rgba(140, 100, 32, 0.35);
}
.lp-card:hover { transform: translateY(-4px); }
.pf-card:hover .brand-logo, .lp-card:hover .brand-logo { filter: none; opacity: 1; }
@media (hover: none) { .brand-logo { filter: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pf-card:hover, .lp-card:hover { transform: none; } }

/* Fund (LP) logos: one height for all, left-aligned on a common line */
.lp-card .logo-box { height: 56px; }
.lp-card { flex: 1 1 170px !important; }
.lp-card .brand-logo { height: 44px !important; max-width: 160px; }