/* ============================================================
   BV DIGITALI – Asotech Business Card
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap');

:root {
  --orange:  #F07D00;
  --dark:    #3A3633;
  --darker:  #2E2E2E;
  --white:   #FFFFFF;
  --gray:    #AAAAAA;
  --radius:  12px;
  --btn-radius: 8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  background: var(--darker);
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

@media (max-width: 480px) {
  html, body {
    padding: 8px 1%;
	width:100%;
  }
}

/* ── CARD ── */
.card {
  background: var(--dark);
  border-radius: var(--radius);
  width: 100%;
  max-width: 380px;
  overflow: visible;           /* permette alla foto di uscire dall'header */
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  position: relative;
  animation: fadeUp .5s ease both;
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── HEADER ── */
.card__header {
  background: var(--orange);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 32px 24px 72px;     /* 72px di spazio sotto per la foto */
  text-align: center;
  position: relative;
}

.card__logo-link {
  display: inline-block;
  line-height: 0;
}

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

/* ── FOTO ── */
.card__photo-wrap {
  position: absolute;           /* fuori dal flusso, sovrapposta */
  left: 50%;
  transform: translateX(-50%);
  top: 110px;                   /* altezza header circa */
  z-index: 10;
}

.card__photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--dark);
  background: var(--darker);
  display: block;
}

/* ── BODY ── */
.card__body {
  padding: 70px 28px 32px;      /* 70px top per lasciare spazio alla foto */
  text-align: center;
}

.card__name {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}

.card__role {
  font-size: .9rem;
  font-weight: 400;
  color: var(--gray);
  margin-bottom: 32px;
  letter-spacing: .03em;
}

/* ── BUTTONS ── */
.card__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

.btn {
  display: block;
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--btn-radius);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  transition: filter .2s, transform .15s;
}

.btn--orange {
  background: var(--orange);
  color: var(--white);
}

.btn--orange:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.btn--orange:active {
  transform: translateY(0);
  filter: brightness(.95);
}

/* ── SOCIAL ICONS ── */
.card__social {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.card__social a {
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s, transform .2s;
}

.card__social a:hover {
  color: var(--orange);
  transform: translateY(-3px);
}

.card__social svg {
  width: 28px;
  height: 28px;
}

/* ── ERRORE ── */
.error-msg {
  color: var(--gray);
  text-align: center;
  max-width: 360px;
  font-size: .9rem;
  line-height: 1.6;
  padding: 20px;
}
.error-msg code {
  color: var(--orange);
}

/* ── RESPONSIVE ── */
@media (max-width: 420px) {
  .logo-text { font-size: 2rem; }
  .card__name { font-size: 1.5rem; }
  .card {
    max-width: 100%;
    border-radius: 8px;
  }
}