/* ht_text_historypic.css */
:root{
  --ink:#0b0b0f;
  --muted:#475569;
  --line:#e5e7eb;
  --accent:#2563eb;
  --panel:#ffffff;
  --easing:cubic-bezier(.2,.7,.2,1);
}

body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;
}

/* Full-width module wrapper */
.module-wrap{width:100%;}

.module{
  display:grid;
  grid-template-columns: 1fr 1fr; /* 50/50 */
  min-height:460px;               /* give room so the image can cover */
}

/* Image side (left): no padding/margins, full cover */
.media-col{
  position:relative;
  overflow:hidden;
  margin:0;
  padding:0;
}

.cover-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;               /* fully cover the area */
  object-position:50% 0%;         /* align to TOP so any overflow hides at the bottom */
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* Text side (right) */
.text-col{
  background:var(--panel);
  display:flex;
  align-items:center;
  border-radius: 20px !important;
}

.text-inner{
  width:100%;
  max-width:680px;
  padding:clamp(20px,5vw,72px);
  margin-right:auto; /* since it's on the RIGHT, keep content near the center seam */
}

.eyebrow{
  margin:0 0 .35rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.82rem;
  color:#6b7280;
}

h2{
  margin:.1rem 0 .25rem;
  font-size:clamp(1.8rem,3.5vw,2.6rem);
  line-height:1.08;
  letter-spacing:-.015em;
}

.subhead{
  margin:0 0 .5rem;
  font-weight:700;
  color:#111827;
  font-size:clamp(1.05rem,2.2vw,1.25rem);
}

.short-line{
  width:78px;
  height:3px;
  background:var(--accent);
  border-radius:2px;
  margin:.4rem 0 1rem;
}

.desc{
  margin:0 0 1.2rem;
  max-width:60ch;
  color:var(--muted);
  font-size:clamp(1rem,2vw,1.06rem);
}

/* Button at base of description */
.btn-solid{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.2rem;
  border-radius:999px;
  font-weight:800;
  color:#fff;
  background:var(--accent);
  border:1px solid transparent;
  transition:transform .15s var(--easing), box-shadow .15s var(--easing), background .2s var(--easing);
  box-shadow:0 6px 14px rgba(37,99,235,.18);
  text-decoration:none;
}

.btn-solid:hover{
  color:#ffffff;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(37,99,235,.25);
}

.btn-solid:focus-visible{
  outline:2px solid rgba(37,99,235,.35);
  outline-offset:4px;
}

/* Responsive stacking: on mobile, put the image first and make it full-bleed */
@media (max-width:900px){
  .module{
    grid-template-columns: 1fr;
    min-height:unset;
  }

  .media-col{
    order:1;
    height:48vh;
    min-height:260px;
    /* full-bleed trick: stretch to viewport edges regardless of parent padding */
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }

  .text-col{ order:2; }
  .text-inner{ margin-right:0; }
}