/* ===================== Main Programs – match screenshot ===================== */

/* Design tokens */
:root{
  --eco-blue:#4197CB;
  --eco-ink:#0b2f55;
  --eco-gray:#4b5563;
  --panel:#eaf4fb;
  --card:#fff;
  --grid:#e8edf3;
  --shadow:0 12px 24px rgba(13,38,76,.10);

  --font-family-base:'Karla-Regular';
  --font-size-base:16px;
  --font-weight-regular:300;
  --line-height-base:1.65;
  --letter-spacing-body:.02em;
  --letter-spacing-heading:.04em;
}

@font-face{
  font-family:'Karla-Regular';
  src:url('../fonts/Karla-Regular.ttf') format('opentype');
  font-weight:200;
  font-style:normal;
  font-display:swap;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:var(--font-family-base);
  font-size:var(--font-size-base);
  font-weight:var(--font-weight-regular);
  color:var(--eco-gray);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--line-height-base);
  letter-spacing:var(--letter-spacing-body);
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-family-base);
  font-weight:var(--font-weight-regular);
  letter-spacing:var(--letter-spacing-heading);
  line-height:1.25;
}


/* -------- Section frame -------- */
.programs_pg{ position:relative; overflow:hidden; }
.programs_wrap{ position:relative; isolation:isolate; }

/* Left pale-blue band (same height as the section) */
.programs_wrap::before{
  content:"";
  position:absolute;
  inset:0 50% 0 0;          /* left half */
  background:var(--panel);
  z-index:-1;
  pointer-events:none;
}

/* Grid + key proportions (photo height like the screenshot) */
.programs_container{
  --hero-h: clamp(440px, 56vh, 520px);  /* <= tune here if needed */
  width:min(1180px,92vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr 1fr;     /* left a bit wider */
  gap:24px 32px;
  align-items:center;                   /* centers left vs right */
  padding:28px 0 36px;
  min-height:var(--hero-h);
}

/* Keep the left block vertically centered and offset a bit from the edge */
.programs_left{
  align-self:center;
  padding-left:18px;                    /* slight inset like the mock */
}

/* -------- Left column content -------- */
.pg_title{
  margin:0 0 18px;
  font-weight:300;
  color:var(--eco-blue);
  font-size:clamp(34px,5.2vw,56px);     /* large title like image */
  letter-spacing:var(--letter-spacing-body);
}

/* Narrow white card */
.pg_panel{
  width:clamp(280px, 42vw, 360px);      /* narrow like the screenshot */
  background:var(--card);
  border:1px solid var(--grid);
  border-radius:8px;
  box-shadow:var(--shadow);
  padding:10px;
}

/* List rows */
.pg_item{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  padding:14px 12px;
  color:inherit; text-decoration:none;
  border-radius:8px;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.pg_item + .pg_item{ border-top:1px solid var(--grid); }

.pg_name{ display:block; color:#3a4a60; font-weight:300; font-size:1.06rem; }
.pg_sub { display:block; color:#8a96a8; font-size:.9rem; margin-top:4px; }

/* Chevron (light grey like the screenshot) */
.pg_chev{
  width:22px; height:22px; display:grid; place-items:center;
  background: currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/18px 18px;
          mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/18px 18px;
  color:#bcc3ce;
}

.pg_item:hover{ background:#f9fbfe; transform:translateY(-1px); box-shadow:0 10px 22px rgba(13,38,76,.12); }
.pg_item:hover .pg_chev{ color:#9ea7b4; }
.is-disabled{ cursor:default; opacity:.75; background:#fafbfe; }
.is-disabled:hover{ transform:none; box-shadow:none; }

/* -------- Right photo (NOT full screen) -------- */
.programs_photo{
  margin:0;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 18px 36px rgba(13,38,76,.14);
  height:var(--hero-h);
}
.programs_photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;           /* keeps faces nicely framed */
  display:block;
}

/* -------- Responsive -------- */
@media (max-width:1024px){
  .programs_container{
    grid-template-columns:1fr;
    gap:18px;
    min-height:auto;
    align-items:start;
  }
  .programs_wrap::before{ inset:auto auto 50% 0; } /* blue behind top half */
  .programs_left{ padding-left:0; }
  .pg_panel{ width:100%; max-width:560px; }
  .programs_photo{ height:auto; }
  .programs_photo img{ height:auto; }
}

@media (max-width:640px){
  .pg_title{ font-size:clamp(28px,8vw,40px); }
  .pg_item{ padding:12px 10px; }
}