/* ═══════════════════════════════════════════
   DESIGN TOKENS
   Palette: Deep navy · Electric teal · Slate
═══════════════════════════════════════════ */
:root {
  /* Core palette */
  --navy:          #0a0f1e;
  --navy-mid:      #0d1525;
  --navy-panel:    #111827;
  --navy-border:   rgba(110,231,247,0.10);

  --teal:          #6ee7f7;       /* electric cyan — primary accent */
  --teal-dim:      rgba(110,231,247,0.08);
  --teal-glow:     rgba(110,231,247,0.25);

  --slate:         #94a3b8;
  --white:         #f1f5f9;
  --white-dim:     rgba(241,245,249,0.55);

  /* Link accent fills */
  --phone-fill:    #10b981;       /* emerald */
  --fb-fill:       #2563eb;       /* blue */
  --ig-a:          #f59e0b;
  --ig-b:          #ec4899;
  --yt-fill:       #ef4444;       /* red */
  --web-fill:      #6ee7f7;       /* teal — matches brand */

  /* Typography */
  --font-display:  'Syne', sans-serif;
  --font-body:     'Outfit', sans-serif;
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }

body {
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--white);

  /* Ambient gradient mesh */
  background-image:
    radial-gradient(ellipse 70% 55% at 15% 10%,  rgba(110,231,247,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 90%,  rgba(37, 99,235,.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%,  rgba(236,72,153,.04) 0%, transparent 60%);
}

/* ═══════════════════════════════════════════
   PAGE SHELL
═══════════════════════════════════════════ */

/* Only enforce full viewport height on desktop */
@media (min-width: 768px) {
  .min-vh-md-100 { min-height: 100vh; }
}

.page-shell {
  /* no forced height on mobile — card sizes itself */
}

/* ═══════════════════════════════════════════
   CARD ROOT
═══════════════════════════════════════════ */
.card-root {
  max-width: 960px;
  background: var(--navy-mid);
  border-radius: 20px;
  border: 1px solid var(--navy-border);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(110,231,247,.05),
    0 40px 100px rgba(0,0,0,.7),
    0  4px  20px rgba(0,0,0,.4);
  animation: cardIn 0.65s var(--ease) both;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(36px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ═══════════════════════════════════════════
   LEFT / TOP — PHOTO PANEL
═══════════════════════════════════════════ */
.photo-panel {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── Logo bar ── */
.logo-wrap {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
}

.logo-img {
  max-height: 52px;
  width: auto;
  display: block;
}

/* ── Photo frame ── */
.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy-panel);
}

/* Desktop: full panel height (fills the row) */
@media (min-width: 768px) {
  .photo-frame {
    aspect-ratio: unset;
    position: absolute;
    inset: 0;
    top: 0;
  }

  .photo-panel {
    min-height: 680px;
  }
}

.profile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.8s var(--ease);
}

.photo-frame:hover .profile-photo {
  transform: scale(1.04);
}

/* Gradient overlay */
.photo-gradient {
  position: absolute;
  inset: 0;
  /* Mobile: fade bottom for name overlay */
  background: linear-gradient(
    to bottom,
    rgba(10,15,30,0)    0%,
    rgba(10,15,30,0.15) 40%,
    rgba(10,15,30,0.88) 78%,
    rgba(10,15,30,1)   100%
  );
}

/* Desktop: also fade right edge so it blends into info panel */
@media (min-width: 768px) {
  .photo-gradient {
    background:
      linear-gradient(to right,  transparent 60%, var(--navy-mid) 100%),
      linear-gradient(to bottom, rgba(10,15,30,0) 30%, rgba(10,15,30,0.5) 100%);
  }
}

/* ── Mobile identity (overlaid on photo) ── */
.photo-identity {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.5rem 1.25rem;
}

/* ═══════════════════════════════════════════
   SHARED IDENTITY ELEMENTS
   (used in both mobile overlay & desktop block)
═══════════════════════════════════════════ */
.label-tag {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.35rem;
}

.full-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.company-tag {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--white-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   RIGHT / BOTTOM — INFO PANEL
═══════════════════════════════════════════ */
.info-panel {
  padding: 0;
  border-left: 1px solid var(--navy-border);
}

/* ── Desktop identity block ── */
.identity-block {
  padding: 2.5rem 2rem 1.5rem;
  border-bottom: 1px solid var(--navy-border);
  animation: fadeUp 0.5s 0.2s var(--ease) both;
}

/* ── Section rule ── */
.section-rule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  animation: fadeUp 0.5s 0.3s var(--ease) both;
}

.rule-line {
  flex: 1;
  height: 1px;
  background: var(--navy-border);
}

.rule-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--slate);
  white-space: nowrap;
}

/* ─────────────────────────────────────────
   LINK ROWS
───────────────────────────────────────── */
.links-nav {
  display: flex;
  flex-direction: column;
  animation: fadeUp 0.5s 0.38s var(--ease) both;
}

.link-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  color: var(--white);
  border-top: 1px solid var(--navy-border);
  position: relative;
  overflow: hidden;
  transition: color 0.25s ease;
  cursor: pointer;
}

/* First row has no top border (section-rule handles it) */
.link-row:first-child { border-top: none; }

/* Slide-fill background */
.link-row::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-101%);
  transition: transform 0.4s var(--ease);
  z-index: 0;
}

.link-row:hover::before { transform: translateX(0); }
.link-row:hover         { color: #fff; }

#lnk-phone::before { background: linear-gradient(90deg, #065f46, var(--phone-fill)); }
#lnk-wa::before    { background: linear-gradient(90deg, #064e2b, #25d366); }
#lnk-fb::before    { background: var(--fb-fill); }
#lnk-li::before    { background: linear-gradient(90deg, #003f72, #0a66c2); }
#lnk-cv::before    { background: linear-gradient(90deg, #1e3a5f, #3b82f6); }
#lnk-web::before   { background: linear-gradient(90deg, rgba(110,231,247,.15), rgba(110,231,247,.30)); }

/* Website row: teal accent at rest */
#lnk-web            { color: var(--teal); }
#lnk-web:hover      { color: var(--teal); }

/* Icon */
.lnk-icon {
  position: relative;
  z-index: 1;
  font-size: 1.15rem;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--teal-dim);
  transition: transform 0.3s var(--ease), background 0.25s ease;
}

#lnk-phone .lnk-icon { color: var(--phone-fill); }
#lnk-wa    .lnk-icon { color: #25d366; }
#lnk-fb    .lnk-icon { color: #60a5fa; }
#lnk-li    .lnk-icon { color: #0a66c2; }
#lnk-cv    .lnk-icon { color: #3b82f6; }
#lnk-web   .lnk-icon { color: var(--teal); }

.link-row:hover .lnk-icon {
  transform: scale(1.12);
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Text stack */
.lnk-text {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.lnk-label {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.lnk-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--slate);
  letter-spacing: 0.02em;
  transition: color 0.25s ease;
}

.link-row:hover .lnk-sub { color: rgba(255,255,255,0.7); }

/* Arrow */
.lnk-arrow {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  opacity: 0.2;
  transition: opacity 0.25s ease, transform 0.3s var(--ease);
  flex-shrink: 0;
}

.link-row:hover .lnk-arrow {
  opacity: 1;
  transform: translate(3px, -3px);
}

/* ═══════════════════════════════════════════
   EMAIL ROW
═══════════════════════════════════════════ */
#lnk-email .lnk-icon { color: #a78bfa; }
#lnk-email::before   { background: linear-gradient(90deg, #3b0764, #7c3aed); }

/* ═══════════════════════════════════════════
   FOOTER STRIP
═══════════════════════════════════════════ */
.card-footer-strip {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 2rem 1.25rem;
  border-top: 1px solid var(--navy-border);
  margin-top: auto;
  animation: fadeUp 0.5s 0.6s var(--ease) both;
}

.footer-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--phone-fill);
  flex-shrink: 0;
  animation: pulse 2.2s infinite;
}

@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(16,185,129,.5); }
  50%     { box-shadow: 0 0 0 6px rgba(16,185,129,0);  }
}

.status-text {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--slate);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Action buttons ── */
.footer-actions {
  display: flex;
  gap: 0.6rem;
}

.footer-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 0.75rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease, filter 0.2s ease;
  position: relative;
  overflow: hidden;
}

.footer-btn i { font-size: 0.95rem; flex-shrink: 0; }

.footer-btn:hover  { transform: translateY(-2px); filter: brightness(1.12); }
.footer-btn:active { transform: translateY(0) scale(0.97); }

/* Send Email — violet */
.btn-email {
  background: linear-gradient(135deg, #4c1d95, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 16px rgba(124,58,237,.3);
}
.btn-email:hover {
  color: #fff;
  box-shadow: 0 8px 24px rgba(124,58,237,.5);
}

/* Save Contact — teal ghost */
.btn-vcard {
  background: var(--teal-dim);
  color: var(--teal);
  border: 1px solid rgba(110,231,247,.2) !important;
  box-shadow: 0 4px 16px rgba(110,231,247,.08);
}
.btn-vcard:hover {
  background: var(--teal);
  color: var(--navy);
  box-shadow: 0 8px 24px rgba(110,231,247,.3);
}

/* ═══════════════════════════════════════════
   MOBILE OVERRIDES
═══════════════════════════════════════════ */
@media (max-width: 767px) {
  .card-root         { border-radius: 16px; max-width: 420px; }
  .info-panel        { border-left: none; border-top: 1px solid var(--navy-border); }
  .link-row          { padding: 0.75rem 1.25rem; }
  .section-rule      { padding: 0.65rem 1.25rem; }
  .card-footer-strip { padding: 0.75rem 1.25rem 1rem; }
  .lnk-icon          { width: 1.7rem; height: 1.7rem; font-size: 0.95rem; }
  .photo-identity    { padding: 1rem 1.25rem 0.9rem; }
  .footer-btn        { font-size: 0.72rem; padding: 0.6rem 0.5rem; }
}

@media (max-width: 380px) {
  .full-name  { font-size: 1.8rem; }
  .lnk-sub    { display: none; }
}

/* ═══════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}