/* =========================================================
   THEME TOKENS (brand palette + Bootstrap sync)
   ========================================================= */
:root {
  /* Brand colors */
  --rich-black: #011627;
  --baby-powder: #fdfffc;
  --light-sea-green: #2ec4b6;
  --red-pantone: #e71d36;
  --orange-peel: #ff9f1c;

  /* Shadows */
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);

  /* Bootstrap variable sync to match theme */
  --bs-body-color: var(--baby-powder);
  --bs-body-bg: var(--rich-black);
  --bs-primary: var(--light-sea-green);
  --bs-primary-rgb: 46, 196, 182; /* #2ec4b6 */
  --bs-danger: var(--red-pantone);
}

/* =========================================================
   BASE (page scaffold, type, links)
   ========================================================= */
html, body { height: 100%; }

body {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;

  /* center the card in the viewport */
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;

  /* background gradient using tokens */
  background: linear-gradient(
    180deg,
    rgb(from var(--rich-black) r g b / 0.9),
    rgb(from var(--light-sea-green) r g b / 0.6)
  );
}

/* outer section breathing room */
section { padding: 3rem 0; }

/* headings & links */
h1, h2, h3, h4, h5, h6 { color: var(--baby-powder); }
h3, .h3 { margin-bottom: 1rem; }

a {
  color: var(--light-sea-green);
  text-decoration: none;
}
a:hover {
  color: color-mix(in srgb, var(--light-sea-green) 85%, black);
}

/* keyboard focus visibility on dark bg */
a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--light-sea-green) 70%, white);
  outline-offset: 2px;
}

/* =========================================================
   CARD LAYOUT (the rounded container)
   - mobile: vertical stack
   - desktop (md+): two columns
   ========================================================= */
.wrap {
  background: linear-gradient(
    180deg,
    rgb(from var(--rich-black) r g b / 0.96),
    rgb(from var(--rich-black) r g b / 0.88)
  );
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;

  display: flex;
  flex-direction: column; /* stack on mobile */
  min-height: 520px;      /* visual presence */
}

@media (min-width: 768px) {
  .wrap {
    flex-direction: row;  /* side-by-side on md+ */
    align-items: stretch;
  }
}

/* =========================================================
   PANELS (left: info, right: profile)
   ========================================================= */
.info-wrap,
.profile-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centered by default (desktop uses this) */
  flex: 1 1 100%;
  padding: 2rem;           /* also have Bootstrap padding in HTML */
}

/* desktop widths (you chose 60/40 split) */
@media (min-width: 768px) {
  .info-wrap   { flex: 0 0 60%; max-width: 60%; }
  .profile-wrap{ flex: 0 0 40%; max-width: 40%; }
}

/* INFO (dark side) — fills card height on mobile */
.info-wrap {
  background: linear-gradient(
    180deg,
    rgb(from var(--rich-black) r g b / 0.85),
    rgb(from var(--rich-black) r g b / 0.7)
  );
  color: var(--baby-powder);
  position: relative;

  /* mobile: make the panel stretch and push socials to bottom */
  justify-content: space-between;
  min-height: 100%;
  flex: 1;
}

/* desktop: center content vertically again */
@media (min-width: 768px) {
  .info-wrap { justify-content: center; }
}

/* subtle divider on desktop (left edge of info panel) */
@media (min-width: 768px) {
  .info-wrap::before {
    content: "";
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 0;
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.07) 15%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.07) 85%,
      transparent 100%
    );
  }
}

/* PROFILE (teal glow side) */
.profile-wrap {
  background: linear-gradient(
    180deg,
    rgb(from var(--light-sea-green) r g b / 0.14),
    rgb(from var(--rich-black) r g b / 0)
  );
  justify-content: center;
  text-align: center;
}

/* =========================================================
   COMPONENTS — Profile image & Social icons
   ========================================================= */

/* circular profile image with fixed size across breakpoints */
.profile {
  inline-size: clamp(225px, 60%, 225px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid var(--baby-powder);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  margin-inline: auto;
}
.profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* social icons */
.social-media .social-icon {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: #0c1d2c;
  border: 1px solid #16334b;
  color: var(--baby-powder);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.social-media .social-icon + .social-icon { margin-left: .5rem; }
.social-media .social-icon:hover {
  transform: translateY(-1px);
  background: var(--light-sea-green);
  color: var(--rich-black);
}

.social-media { gap: .5rem; margin-top: 1.25rem !important; }

/* =========================================================
   NAME BLOCK — Name → horizontal line → title
   ========================================================= */
.card-name {
  font-size: clamp(1.6rem, 2.2vw, 1.6rem);
  font-weight: 700;
  color: var(--light-sea-green);
  letter-spacing: 0.2px;
}

/* orange underline bar */
.name-rule {
  height: 3px;
  width: 100%;
  background-color: var(--orange-peel);
  margin: .35rem 0 .6rem;
  border-radius: 2px;
}

.card-title {
  color: var(--baby-powder);
  font-weight: 500;
  line-height: 1.35;
  margin-top: 0;
}
.card-title a {
  color: var(--baby-powder);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.card-title a:hover { color: var(--light-sea-green); }

/* =========================================================
   CONTACT LIST
   ========================================================= */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-list li {
  display: flex;
  gap: .5rem;
  white-space: nowrap;
}
.contact-list a {
  color: var(--baby-powder);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-list a:hover { color: var(--light-sea-green); }