/* aboutme.css — page-specific styles for About Me page */
/* Re-uses CSS variables from global style.css:
   --primary-color, --secondary-color, --accent-color, --muted, --white
*/

.about-page { background: var(--accent-color); color: var(--secondary-color); }

/* containers */
.container {  margin: 0 auto; padding: 0 6%; }

/* HERO */
.about-hero { padding: 2.2rem 0 1.6rem; }
.about-hero-grid {
  display: grid;
  margin: 0 40px;
  grid-template-columns: 420px 1fr;
  gap: 1.4rem;
  align-items: center;
}
.about-hero-photo {
  border-radius: 14px; /* rounded rectangle */
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.06);
  background: linear-gradient(180deg, #f9fff9, #fff);
}
.about-hero-photo img { width:100%; height:100%; object-fit:cover; display:block; }

/* hero content */
.about-hero-content h1 { font-size: 1.9rem; margin-bottom: .3rem; color: var(--secondary-color);}
.about-tagline { font-weight:600; color: var(--primary-color); margin-bottom: .6rem; }
.about-intro { color:#444; line-height:1.7; margin-bottom: .8rem; }

.about-cta-row { display:flex; gap:.9rem; align-items:center; margin-top:.6rem; }
.btn-primary { background: linear-gradient(180deg,var(--primary-color), #4cae4c); color:#fff; padding:10px 14px; border-radius:10px; border:0; font-weight:700; box-shadow: 0 12px 30px rgba(76,174,76,0.12); cursor:pointer; }
.btn-primary:hover { transform: translateY(-3px); }
.btn-ghost { display:inline-block; padding:10px 12px; border-radius:10px; border:1px solid rgba(44,62,80,0.06); color:var(--secondary-color); text-decoration:none; }

/* SECTIONS */
.about-section { padding: 1.6rem 0; background: transparent; }
.about-section h2 { color: var(--secondary-color); margin-bottom:.6rem; font-size:1.5rem; }
.muted { color: var(--muted); margin-bottom:.6rem; }

/* Education grid */
.edu-grid { display:grid; gap:1rem; grid-template-columns: 1fr 1fr; }
.edu-card { background: var(--white); padding:1rem; border-radius:10px; box-shadow: 0 12px 30px rgba(0,0,0,0.04); }

/* Clinical */
.clinical-card { background: var(--white); padding:1rem; border-radius:10px; box-shadow: 0 12px 30px rgba(0,0,0,0.04); }

/* Approach grid */
.approach-grid { display:grid; gap: .9rem; grid-template-columns: repeat(2, 1fr); margin-top:.6rem; }
.approach-card { background: var(--white); padding: .9rem; border-radius:10px; box-shadow: 0 10px 26px rgba(0,0,0,0.04); }
.approach-card h4 { color: var(--primary-color); margin-bottom:.35rem; }

/* Journey steps */
.journey-steps { display:grid; gap:.9rem; grid-template-columns: repeat(3, 1fr); margin-top:.6rem; }
.step { display:flex; gap:.9rem; align-items:flex-start; background: var(--white); padding:.9rem; border-radius:10px; box-shadow: 0 10px 26px rgba(0,0,0,0.04); }
.step-num { width:50px; height:50px; border-radius:50%; background: var(--primary-color); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-top:2px; }

/* approach summary */
.approach-summary { margin-top: .8rem; color:#444; line-height:1.6; }

/* reveal helper for page (used by aboutme.js) */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 520ms cubic-bezier(.2,.9,.2,1), transform 520ms cubic-bezier(.2,.9,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* RESPONSIVE */
@media (max-width: 980px) {
  .about-hero-grid { grid-template-columns: 1fr; text-align:center; }
  .about-hero-photo { max-width: 520px; margin: 0 auto; }
  .edu-grid { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr; }
  .journey-steps { grid-template-columns: 1fr; }
  .about-hero-content h1 { font-size: 1.5rem; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; transform: none !important; opacity: 1 !important; }
}



/* Certificates slider (horizontal) */
.certs-section { padding: 1.6rem 0 2.2rem; }
.certs-section .container { margin: 0 auto; padding: 0 6%; }
#certs-title{
text-align: center;
}

.cert-slider {
  display: flex;
  justify-content: center;
  gap: 2rem;
  overflow-x: auto;
  padding: 12px 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.cert-slider::-webkit-scrollbar { height: 8px; }
.cert-slider::-webkit-scrollbar-thumb { background: rgba(44,62,80,0.12); border-radius: 999px; }

/* Card */
.cert-card {
  flex: 0 0 320px; /* desktop width */
  scroll-snap-align: start;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  min-height: 120px;
}
.cert-thumb { width:110px; height:150px; border-radius: 8px; overflow:hidden; background:#f7faf7; display:flex; align-items:center; justify-content:center; }
.cert-thumb img { width:100%; height:100%; object-fit:fill; display:block; }

/* meta */
.cert-meta strong { display:block; color:var(--secondary-color); margin-bottom:6px; font-size:0.99rem; }
.cert-meta small { display:block; color:var(--muted); font-size:0.85rem; margin-bottom:8px; }
.cert-actions { display:flex; gap:8px; }

/* view button */
.btn-view {
  background: linear-gradient(180deg,var(--primary-color), #4cae4c);
  color:#fff;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  font-weight:700;
  cursor: pointer;
}
.btn-view:hover { transform: translateY(-3px); }

/* Responsive card sizing */
@media (max-width: 920px) {
  .cert-card { flex: 0 0 84%; grid-template-columns: 1fr; min-height: 140px; }
  .cert-thumb { width:100%; height:220px; border-radius:10px; }
  .cert-meta { padding: 8px 0 0; }
}

/* Modal / Lightbox */
.cert-modal { position: fixed; inset: 0; display:none; align-items:center; justify-content:center; z-index:3000; }
.cert-modal.open { display:flex; }
.cert-modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.6); }
.cert-modal-panel {
  position:relative;
  width: 300px;
  aspect-ratio: 9/16;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  transform: translateY(8px);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .28s ease;
  background: #000;
}
.cert-modal.open .cert-modal-panel { transform: translateY(0); opacity:1; }

/* content inside modal takes full area */
.cert-modal-content { width:auto; height:auto; display:flex; align-items:center; justify-content:center; padding: 20px; margin-top: 40px;}
.cert-modal-content img, .cert-modal-content iframe, .cert-modal-content embed {
  width:100%; height:100%; object-fit:cover; display:block; border:0;
}

/* close */
.cert-modal-close {
  position:absolute; right:10px; top:10px; z-index:10; background: rgba(255,255,255,0.1); color:red; border:0; width:38px; height:38px; border-radius:50%; font-size:24px; cursor:pointer; font-weight: bold;
}
.cert-modal-close:focus { outline:3px solid rgba(92,184,92,0.28); outline-offset:2px; }

/* reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  .cert-modal-panel { transition: none; transform:none; opacity:1; }
}

@media (max-width:1000px) {
  .cert-slider{
    flex-direction: column;
  }
}