/* css styles */
/* Hero row: keep image and text centered vertically */
.hero .row {
  min-height: 80vh;
  display: flex;
  align-items: center;   /* vertically align both halves */
}

/* Shared hero layout */
.hero .row {
  min-height: 80vh;
  display: flex;
  align-items: center;
  /* control space between text and image via gutter, not margins */
  --bs-gutter-x: 3rem;     /* adjust horizontal space between columns */
}

/* Right column image */
.hero img {
  max-width: 400px;        /* unified default size */
  height: auto;
  display: block;
  margin: 0;
  margin-left: 80px;
  margin-right: 80px;
  border-radius: 8px;
}

/* Left column text */
.hero-text {
  text-align: left;
  margin: 0;
  margin-left: 80px;/* let the grid/gutter do the spacing */
}




.tile-card {
  border-radius: 10px;                  /* slightly smaller corners */
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,.05); /* lighter shadow */
  transition: transform .18s ease, box-shadow .18s ease;
  max-width: 300px;                     /* optional: narrower cards */
  margin: 0 auto;                       /* center in column */
}

.tile-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.tile-card .card-img-top {
  width: 100%;
  height: 180px;
  object-fit: fill;
}
.tile-card .card-title {
  font-size: 2 rem;       /* smaller text */
  font-weight: 500;         /* lighter weight */
  margin: 0;                /* remove extra margins */
  color: #333;              /* softer dark color */
}

.tile-card .card-body {
  padding: 0.4rem 0.5rem;   /* tighter spacing */
  text-align: center;       /* center all text inside */
}

.bg-gold {
  background-color: #FFD700; /* classic gold hex */
  color: #000;               /* dark text for contrast */
}

.accordion-button {
  font-weight: 600;
}
.accordion-button:not(.collapsed) {
  background-color: #f8f9fa; /* subtle highlight when open */
  color: #000;
}

.accordion-body {
  padding: 0.4rem 0.5rem;
}


/* Teaching page only: make hero images bigger */
.teaching-hero img {
  max-width: 500px;   /* adjust size as you like */
}


/* =========================
   MOBILE: stack hero columns
   ========================= */
@media (max-width: 767.98px) {
  .hero .row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    
  }

  /* Photo first */
  .hero .col-md-6.text-center {
    order: -1;
    width: 100%;
    margin-bottom: 0rem;
    margin-top: 1rem;
  }

  /* Text second */
  .hero .col-md-6 .hero-text {
    order: 1;
    width: 100%;
    margin: 0rem;
    text-align: center;
    margin-top: 0rem;
  }

  /* Move buttons to the bottom (after text) */
  .hero .hero-text p:has(.btn) {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
  }
   .hero .hero-text p:has(.btn) .btn {
    flex: 0 0 auto;
  }

  /* Keep the hero image nicely sized */
  .hero img {
    max-width: 280px;
    margin: 0 auto;
  }
}
@media (max-width: 767.98px) {
  /* Center only the H1 inside hero-text */
  .hero .hero-text h1 {
    text-align: center;
  }
}

/* =========================
   MOBILE: hide photo subtext
   ========================= */
@media (max-width: 767.98px) {
  .hero .text-center .text-muted {
    display: none;
  }
}


@media (max-width: 767.98px){
  .hero .row{display:flex;flex-direction:column;padding:0 1rem}
  .hero .row>[class*="col-"]:nth-child(2){order:-1;text-align:center} /* photo first */
  .hero .row>[class*="col-"]:nth-child(1){order:1}                   /* text after */
  .hero .hero-text{margin:0 auto;text-align:left}
}


.accordion-text {
  text-align: left;
  margin: 0;
  margin-left: 80px;/* let the grid/gutter do the spacing */
}

@media (max-width: 767.98px) {
  .accordion-text{margin: 0 auto; text-align: center}