/* Portrait Curve is a mobile-first contact card. Shared layout rules load
   before this file, so they cannot stretch the phone composition. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

[data-template="portrait-curve"] {
  --portrait-brand: var(--qardora-brand, #f25d52);
  --portrait-surface: var(--qardora-surface, #fff);
  --portrait-ink: var(--qardora-ink, #252525);
  position: relative;
  display: grid !important;
  width: 100% !important;
  min-height: 100svh !important;
  margin: 0 auto !important;
  grid-template-rows: 232px minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--portrait-surface) !important;
  color: var(--portrait-ink);
  font-family: Poppins, Inter, Arial, sans-serif;
  box-shadow: none !important;
}

[data-template="portrait-curve"] *,
[data-template="portrait-curve"] *::before,
[data-template="portrait-curve"] *::after { box-sizing: border-box; }

[data-template="portrait-curve"] .portrait-curve-hero {
  position: relative;
  display: grid !important;
  height: 232px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  place-items: start center;
  background: var(--portrait-brand) !important;
  isolation: isolate;
}

[data-template="portrait-curve"] .portrait-curve-company {
  z-index: 1;
  max-width: min(82vw, 28rem);
  margin: 48px 20px 0;
  color: #fff;
  font-size: clamp(1rem, 4.8vw, 1.3rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

[data-template="portrait-curve"] .portrait-curve-wave {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block !important;
  width: 100%;
  height: 96px;
}

[data-template="portrait-curve"] .portrait-curve-sheet {
  position: relative;
  display: grid !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 24px 26px !important;
  align-content: start;
  gap: 18px;
  background: var(--portrait-surface) !important;
  border: 0 !important;
  border-radius: 0 !important;
}

[data-template="portrait-curve"] .portrait-curve-sheet::before { display: none !important; }

[data-template="portrait-curve"] .portrait-curve-identity {
  position: relative;
  display: grid !important;
  min-height: 0 !important;
  margin: 8px 0 0 !important;
  justify-items: center;
  gap: 8px;
  padding: 0 !important;
  text-align: center;
}

[data-template="portrait-curve"] .portrait-curve-identity--with-avatar { margin-top: -72px !important; }

[data-template="portrait-curve"] .portrait-curve-avatar {
  display: grid;
  width: 96px;
  height: 96px;
  margin: 0 0 2px;
  place-items: center;
  overflow: hidden;
  border: 4px solid var(--portrait-surface);
  border-radius: 50%;
  background: color-mix(in srgb, var(--portrait-brand) 16%, var(--portrait-surface));
  box-shadow: 0 9px 24px #25252524;
}

[data-template="portrait-curve"] .portrait-curve-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-template="portrait-curve"] .portrait-curve-copy { max-width: min(100%, 28rem); }

[data-template="portrait-curve"] .portrait-curve-identity h1,
[data-template="portrait-curve"] .portrait-curve-identity small {
  display: block;
  margin: 0;
  color: var(--portrait-ink);
  overflow-wrap: anywhere;
}

[data-template="portrait-curve"] .portrait-curve-identity h1 {
  font: 700 clamp(1.8rem, 8.2vw, 2.3rem)/1.02 Poppins, Inter, Arial, sans-serif;
  letter-spacing: -.045em;
}

[data-template="portrait-curve"] .portrait-curve-identity small {
  margin-top: 7px;
  color: color-mix(in srgb, var(--portrait-ink) 63%, var(--portrait-surface));
  font: 500 .9rem/1.35 Poppins, Inter, Arial, sans-serif;
}

/* Keep the downloadable QR available on the public mobile card as well as
   the landscape layout. It sits beneath the identity, before contact details,
   so it remains easy to find without competing with the primary actions. */
[data-template="portrait-curve"] .portrait-curve-qr {
  display: grid !important;
  width: 76px !important;
  height: 76px !important;
  margin: 4px auto 6px;
  place-items: center;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--portrait-brand) 48%, transparent);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px #2525251f;
}

[data-template="portrait-curve"] .portrait-curve-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

[data-template="portrait-curve"] .portrait-curve-contacts {
  display: grid !important;
  width: min(100%, 380px);
  margin: 0 auto !important;
  gap: 9px !important;
  padding: 0 !important;
  background: transparent !important;
}

[data-template="portrait-curve"] .portrait-curve-contacts > a {
  display: grid !important;
  min-height: 34px !important;
  grid-template-columns: 23px minmax(0, auto) !important;
  justify-content: center;
  gap: 10px !important;
  align-items: center !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--portrait-ink) !important;
  font: 500 .94rem/1.35 Poppins, Inter, Arial, sans-serif !important;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

[data-template="portrait-curve"] .portrait-curve-contacts > a:hover {
  color: var(--portrait-brand) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

[data-template="portrait-curve"] .portrait-curve-contacts svg {
  width: 23px !important;
  height: 23px !important;
  margin: 0 !important;
  fill: var(--portrait-brand) !important;
  stroke: none !important;
}

[data-template="portrait-curve"] .portrait-curve-social {
  display: flex !important;
  min-height: 0 !important;
  margin: 0 !important;
  justify-content: center;
  gap: 16px;
  padding: 2px 0 0 !important;
}

[data-template="portrait-curve"] .portrait-curve-social:empty { display: none !important; }

[data-template="portrait-curve"] .portrait-curve-social a {
  display: grid !important;
  width: 38px !important;
  height: 38px !important;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--portrait-brand) 40%, transparent) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--portrait-brand) !important;
  text-decoration: none;
}

[data-template="portrait-curve"] .portrait-curve-social a:hover,
[data-template="portrait-curve"] .portrait-curve-social a:focus-visible {
  background: var(--portrait-brand) !important;
  color: #fff !important;
  outline: none;
}

[data-template="portrait-curve"] .portrait-curve-social svg { width: 20px !important; height: 20px !important; fill: currentColor !important; stroke: none !important; }

[data-template="portrait-curve"] .portrait-curve-actions {
  display: grid !important;
  width: 100%;
  min-height: 68px !important;
  margin: 0 !important;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border: 0 !important;
  background: var(--portrait-brand) !important;
  color: #fff;
}

[data-template="portrait-curve"] .portrait-curve-actions > a,
[data-template="portrait-curve"] .portrait-curve-actions > button {
  display: inline-flex !important;
  min-height: 0 !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font: 600 .84rem/1 Poppins, Inter, Arial, sans-serif;
  text-decoration: none;
}

[data-template="portrait-curve"] .portrait-curve-actions > a + button { border-left: 1px solid #ffffff4a !important; }
[data-template="portrait-curve"] .portrait-curve-actions > a:hover,
[data-template="portrait-curve"] .portrait-curve-actions > a:focus-visible,
[data-template="portrait-curve"] .portrait-curve-actions > button:hover,
[data-template="portrait-curve"] .portrait-curve-actions > button:focus-visible { background: #00000014 !important; outline: none; }
[data-template="portrait-curve"] .portrait-curve-actions svg { width: 20px !important; height: 20px !important; fill: currentColor !important; stroke: none !important; }

[data-template="portrait-curve"] > .template-powered-by,
[data-template="portrait-curve"] > .public-card-home,
[data-template="portrait-curve"] > .public-card-language { display: none !important; }

@media (max-width: 759px) {
  body.public-card-classic:has([data-template="portrait-curve"]) {
    display: block !important;
    padding: 0 !important;
    background: var(--portrait-surface, #fff) !important;
  }
}

@media (min-width: 760px) {
  body.public-card-classic:has([data-template="portrait-curve"]) {
    display: grid !important;
    min-height: 100svh;
    place-items: center;
    padding: 32px !important;
    background: color-mix(in srgb, var(--qardora-page, #252525) 88%, #fff) !important;
  }

  [data-template="portrait-curve"] {
    width: min(1120px, calc(100vw - 64px)) !important;
    min-height: min(620px, calc(100svh - 64px)) !important;
    height: min(680px, calc(100svh - 64px)) !important;
    grid-template-rows: 238px minmax(0, 1fr) 74px;
    border-radius: 22px;
    box-shadow: 0 28px 70px #00000033 !important;
  }

  [data-template="portrait-curve"] .portrait-curve-company { margin-top: 55px; font-size: 1.35rem; }
  [data-template="portrait-curve"] .portrait-curve-hero { height: 238px !important; }
  [data-template="portrait-curve"] .portrait-curve-sheet { padding: 0 48px 24px !important; align-content: center; gap: 16px; }
  [data-template="portrait-curve"] .portrait-curve-identity { margin-top: 12px !important; }
  [data-template="portrait-curve"] .portrait-curve-identity--with-avatar { margin-top: -82px !important; }
  [data-template="portrait-curve"] .portrait-curve-avatar { width: 104px; height: 104px; }
  [data-template="portrait-curve"] .portrait-curve-identity h1 { font-size: 2.45rem; }
  [data-template="portrait-curve"] .portrait-curve-contacts { width: min(100%, 460px); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px !important; row-gap: 10px !important; }
  [data-template="portrait-curve"] .portrait-curve-contacts > a { font-size: .9rem !important; }
  [data-template="portrait-curve"] .portrait-curve-social { padding-top: 3px !important; }
  [data-template="portrait-curve"] .portrait-curve-qr {
    position: absolute;
    bottom: -62px;
    left: max(24px, calc(50% - 520px));
    display: grid !important;
    width: 92px !important;
    height: 92px !important;
    place-items: center;
    padding: 5px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px #25252526;
  }
  [data-template="portrait-curve"] .portrait-curve-qr img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
  [data-template="portrait-curve"] .portrait-curve-actions { min-height: 74px !important; padding-left: 146px; grid-template-columns: minmax(160px, 230px) minmax(160px, 230px); justify-content: center; }
}

@media (max-width: 380px) {
  [data-template="portrait-curve"] { grid-template-rows: 210px minmax(0, 1fr) auto; }
  [data-template="portrait-curve"] .portrait-curve-hero { height: 210px !important; }
  [data-template="portrait-curve"] .portrait-curve-company { margin-top: 39px; }
  [data-template="portrait-curve"] .portrait-curve-identity--with-avatar { margin-top: -62px !important; }
  [data-template="portrait-curve"] .portrait-curve-avatar { width: 82px; height: 82px; }
  [data-template="portrait-curve"] .portrait-curve-sheet { gap: 12px; padding-right: 18px !important; padding-bottom: 16px !important; padding-left: 18px !important; }
  [data-template="portrait-curve"] .portrait-curve-contacts { gap: 5px !important; }
  [data-template="portrait-curve"] .portrait-curve-social a { width: 34px !important; height: 34px !important; }
  [data-template="portrait-curve"] .portrait-curve-qr { width: 66px !important; height: 66px !important; }
  [data-template="portrait-curve"] .portrait-curve-actions { min-height: 60px !important; }
}