/* === About Split Card (clean) === */
:root{
  --bg:#0b0b0b;
  --card:#ffffff;
  --snow:#ffffff;
  --radius:14px;
  --shadow:0 12px 30px rgba(0,0,0,.12);
}

.about-split{ background:var(--bg); padding:clamp(2rem,6vw,5rem) 0; }

/* Row */
.about-split__inner{
  max-width:1200px; margin:0 auto;
  padding:0 clamp(1rem,3vw,2rem);
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:clamp(1rem,3vw,2rem);
  align-items:start;
}
/* Single-column variant (when image is inline) */
.about-split__inner--single{ grid-template-columns:1fr; }

/* Card */
.about-split__text{
  background:rgba(15,0,0,.9);
  color:var(--snow);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(1.25rem,3vw,3rem);
  display:block; /* allow floats inside */
  line-height:1.7;
}
.about-split__text.is-square{ aspect-ratio:1/1; }
.about-split__text h2{
  color:var(--snow);
  font-size:clamp(2rem,4vw,3.25rem);
  line-height:1.1; margin:0 0 .25em;
}
.about-split__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.5rem; }
.about-split__text .about-split__cta{
  padding:.7rem 1rem; border-radius:999px; border:1px solid #ddd;
  color:inherit; text-decoration:none;
}

/* --- Inline portrait that text wraps around --- */
.about-portrait{
  width:min(38%,260px); height:auto;
  border-radius:12px; display:block;
  /* makes wrap follow rounded corners in supporting browsers */
  shape-outside: inset(0 round 12px);
}
.about-portrait--left  { float:left;  margin:0 10px 10px 0; }
.about-portrait--right { float:right; margin:0 1px 1px 1px; }

/* Clear floats at the end of the card */
.about-split__text::after{ content:""; display:block; clear:both; }

/* --- Legacy media column (kept for sections still using it) --- */
.about-split__media{ border-radius:var(--radius); overflow:hidden; display:block; }
.about-split__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Responsive */
@media (max-width:900px){
  .about-split__inner{ grid-template-columns:1fr; }
  .about-split__text.is-square{ aspect-ratio:auto; }
}
@media (max-width:700px){
  /* On phones, stop wrapping: place image above text */
  .about-portrait{
    float:none; margin:0 auto 1rem; max-width:min(80%,320px);
    shape-outside:auto;
  }
}

/* Optional dark-mode base */
@media (prefers-color-scheme:dark){
  .about-split{ background:#000; }
}



/* Base image that text wraps around */
.about-portrait{
  /* must be floated for shape-outside to work */
  float:right;                 /* default side; use --left for the other */
  display:block;
  width:min(38%, 260px);       /* give it an explicit width */
  height:auto;                 /* img has intrinsic height; OK */
  border-radius:12px;

  /* 10px breathing room around the silhouette */
  shape-margin: 10px;

  /* Use the PNG’s transparency as the wrap shape */
  -webkit-shape-outside: var(--shape-url); /* Safari */
  shape-outside: var(--shape-url);

  /* Tune how opaque a pixel must be to “count” (0..1) */
  shape-image-threshold:.45;

  /* Rectangle fallback when CSS Shapes aren’t supported */
  margin:0 0 10px 10px;
}

/* Left/right variants */
.about-portrait--left{
  float:left;
  margin: 0 10px 1px 0;        /* keep the 10px gap on the text side */
}
.about-portrait--right{
  float:right;
  margin:0 0 1px 10px;
}

/* Mobile: stop fancy wrapping and stack image above text */
@media (max-width:700px){
  .about-portrait{
    float:none;
    display:block;
    margin:0 auto 1rem;
    -webkit-shape-outside:none;
    shape-outside:none;
  }
}



.about-split__text { padding: 1.25rem 2rem 1rem; }   /* smaller bottom padding */
.about-split__text > :last-child { margin-bottom: 0; }