/* ================================
   Signature Programs (Flex-only)
   ================================ */

/* Page context */
body.sigprograms.home-page { position: relative; }

/* Full-bleed background image (longhand props only) */
body.sigprograms::before{
  content:"";
  position:fixed; top:0; left:0; right:0; bottom:0;
  background-image:url("/images/HalawaBay.jpg");
  background-repeat:no-repeat;
  background-position:left top;
  background-size:cover;
  z-index:-1;
}

/* Intro panel */
.sigprograms-intro{
  max-width:800px; margin:2rem auto; padding:1.5rem;
  background:#fff; opacity:.8; border:2px solid #000; border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.1); box-sizing:border-box;
}
.sigprograms-intro h2,.sigprograms-intro h3{ color:#967BB6; text-align:center; }
.sigprograms-intro h1{ color:#000; font-weight:normal; text-align:left; }

@media (max-width:768px){
  .sigprograms-intro{
    width:90vw; max-width:400px; font-size:1.3rem;
    margin-left:0; margin-right:auto; text-align:left;
  }
}

/* Container */
.sigprograms-container{
  max-width:1280px; margin:0 auto; padding:0 20px; overflow:visible;
}

/* ======= FLEX GRID (no CSS Grid) ======= */
/* Cards wrap, with consistent spacing via margins (gap-free for old parsers) */
.sigprograms-grid{
  display:flex; flex-wrap:wrap; align-items:stretch;
  margin:-0.75rem;          /* creates visual gap with child margins */
  overflow:visible;
}
/* Treat any direct child (card or wrapper) as a flex item */
.sigprograms-grid > *{
  box-sizing:border-box;
  margin:0.75rem;
  flex:1 1 300px;           /* ≈ min 300px; auto-fit feel */
  max-width:calc(100% - 1.5rem);
}

/* If you want strict column counts instead of auto-fit, uncomment this set:
@media (min-width:1200px){ .sigprograms-grid > *{ flex:0 0 calc(25% - 1.5rem);} }  /* 4 cols */
@media (min-width:768px) and (max-width:1199px){ .sigprograms-grid > *{ flex:0 0 calc(50% - 1.5rem);} } /* 2 cols */
@media (max-width:767px){ .sigprograms-grid > *{ flex:0 0 calc(100% - 1.5rem);} }  /* 1 col */
*/

/* List-style row layout (if used) */
.sigprograms-item{
  display:flex; align-items:center; gap:1rem;
  padding:.75rem; background:#f9f9f9; border-radius:8px; transition:background-color .2s;
}
.sigprograms-item:hover{ background:#eef2f5; }
.sigprograms-item img{ width:80px; height:80px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.sigprograms-item a{ font-size:1.1rem; font-weight:500; color:#003366; text-decoration:none; }
.sigprograms-item a:hover{ text-decoration:underline; }

/* Cards */
.sigprograms-card{
  position:relative; background:#fff; border:2px solid #000; border-radius:12px;
  text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.1); opacity:.9;
  transform-origin:center; transition:transform 200ms ease, box-shadow 200ms ease; will-change:transform;
  width:100%; /* ensure card fills its flex item */
}
.sigprograms-card img{
  display:block; width:100%; height:175px; object-fit:cover; object-position:top;
}
.sigprograms-card h3{
  margin:0; padding:1rem; font-size:1rem; background:#f8f8f8;
}

/* Optional width limiter per card */
.card-wrapper{ max-width:350px; margin:0 auto; }

/* Hover/focus “pop” — hard-coded values (no CSS vars) */
.sigprograms-card:hover,
.sigprograms-card:focus-within{
  transform:scale(1.25); z-index:20; box-shadow:0 12px 28px rgba(0,0,0,.18);
}
/* Adjust scale on narrower screens */
@media (max-width:900px){
  .sigprograms-card:hover,
  .sigprograms-card:focus-within{ transform:scale(1.4); }
}
@media (max-width:600px){
  .sigprograms-card:hover,
  .sigprograms-card:focus-within{ transform:scale(1.25); }
}

/* Team block (flex version) */
.team-heading{ text-align:center; font-size:2rem; margin-bottom:2rem; }

.team-grid{
  display:flex; flex-wrap:wrap; align-items:stretch;
  margin:-1rem;
}
.team-grid > .team-member{
  box-sizing:border-box; margin:1rem; flex:1 1 200px; max-width:calc(100% - 2rem);
  text-align:center;
}
.team-member img{
  width:100%; max-width:200px; height:auto;
  border:2px solid #000; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.team-member p{ margin-top:.5rem; font-size:1rem; color:#000; }

/* File icon normalization */
.file-icon{
  width:32px !important; height:32px !important; margin:0 !important;
  display:inline-block !important; object-fit:contain;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .sigprograms-card{ transition:none; }
  .sigprograms-card:hover,.sigprograms-card:focus-within{ transform:none; }
}