/**
 * bc-no-image-fix.css
 * ─────────────────────────────────────────────────────────────────────
 * When no profile photo / logo is uploaded:
 *   1. Zero empty image placeholder area on the card.
 *   2. Name, position, and company text centers automatically.
 *
 * Works for all 4 Bizniz Card templates.
 *
 * Deploy: add ONE <link> tag after all other card CSS on every page
 * that renders or previews a card (card.html, Carddesign.html,
 * create.html, live.html, dashboard.html, publish.html):
 *
 *   <link rel="stylesheet"
 *         href="css/bc-no-image-fix.css?v=20260526-no-image-center" />
 * ─────────────────────────────────────────────────────────────────────
 */


/* ══════════════════════════════════════════════════════════════════
   DESIGN 1  (biznizdesign1 / template-01)
   DOM: <section class="tpl-profile tpl-profile--no-image">
        name/title/company as direct children
   ══════════════════════════════════════════════════════════════════ */

.tpl-profile.tpl-profile--no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tpl-profile.tpl-profile--no-image .tpl-profile__name,
.tpl-profile.tpl-profile--no-image .tpl-profile__role,
.tpl-profile.tpl-profile--no-image .tpl-profile__company,
.tpl-profile.tpl-profile--no-image .tpl-profile__headline {
  text-align: center;
  width: 100%;
}


/* ══════════════════════════════════════════════════════════════════
   DESIGN 3  (biznizdesign2 / template-02)
   DOM: <header class="tpl-t02-profile-header tpl-profile
                       tpl-t02-profile-header--no-image">
          <div class="tpl-t02-header-info"> name / role / company
   The base CSS lays this out as a flex row; without the circle
   the info div inherits left-alignment and a left margin gap.
   ══════════════════════════════════════════════════════════════════ */

.tpl-t02-profile-header.tpl-t02-profile-header--no-image {
  justify-content: center;
  align-items: center;
}

.tpl-t02-profile-header.tpl-t02-profile-header--no-image .tpl-t02-header-info {
  /* Remove any left offset the flex-gap or margin from the removed circle left */
  margin-left: 0;
  text-align: center;
  width: 100%;
}

.tpl-t02-profile-header.tpl-t02-profile-header--no-image .tpl-profile__name,
.tpl-t02-profile-header.tpl-t02-profile-header--no-image .tpl-t02-name,
.tpl-t02-profile-header.tpl-t02-profile-header--no-image .tpl-t02-line,
.tpl-t02-profile-header.tpl-t02-profile-header--no-image .tpl-profile__company {
  text-align: center;
}


/* ══════════════════════════════════════════════════════════════════
   DESIGN 2  (biznizdesign1b / template-01b)   — TEXT-ONLY HERO
   DOM: <header class="tpl-t01b-hero tpl-t01b-hero--text-only">
          <div class="tpl-t01b-ci">
            <p  class="tpl-t01b-ci__company">
            <h1 class="tpl-t01b-ci__name">
            <p  class="tpl-t01b-ci__role">
            <div class="tpl-t01b-ci__extra">
   Replaces the full photo-band hero when no cover + no profile.
   Inherits the card's CSS variables for font, color, surface.
   ══════════════════════════════════════════════════════════════════ */

.tpl-t01b-hero.tpl-t01b-hero--text-only {
  /* No photo band — just enough breathing room */
  background: none;
  min-height: unset;
  padding: 2rem 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Centered identity container */
.tpl-t01b-ci {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  text-align: center;
}

/* Company — smallest, muted, above name */
.tpl-t01b-ci__company {
  margin: 0;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
  /* honour whatever colour the user chose via CSS vars */
  color: var(--tpl-t01b-bar-ink, var(--tpl-teal, #00858a));
}

/* Name — largest */
.tpl-t01b-ci__name {
  margin: 0;
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tpl-t01b-bar-ink, #0f172a);
}

/* Role / title */
.tpl-t01b-ci__role {
  margin: 0;
  font-size: 0.88em;
  font-weight: 500;
  color: var(--tpl-t01b-bar-muted, #64748b);
}

/* Accreditations / headline extras */
.tpl-t01b-ci__extra {
  margin-top: 0.4rem;
}

.tpl-t01b-ci__extra-line {
  margin: 0.1rem 0 0;
  font-size: 0.82em;
  color: var(--tpl-t01b-bar-muted, #64748b);
}


/* ══════════════════════════════════════════════════════════════════
   DESIGN 4  (biznizdesign3 / template-03  AND
              biznizdesign4 / template-04)
   DOM: <header class="bc-t3-header-section bc-t3-header-section--no-image">
          <p  class="bc-t3-profile-company">
          <h1 class="bc-t3-profile-name">
          <p  class="bc-t3-profile-title">
        (same pattern for bc-t4-*)
   The base CSS aligns these left when the logo circle sits beside them.
   Without the circle, we centre the text in the coloured header band.
   ══════════════════════════════════════════════════════════════════ */

/* T3 (Bizniz Design 3) */
.bc-t3-header-section.bc-t3-header-section--no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bc-t3-header-section--no-image .bc-t3-profile-company,
.bc-t3-header-section--no-image .bc-t3-profile-name,
.bc-t3-header-section--no-image .bc-t3-profile-title,
.bc-t3-header-section--no-image .bc-t3-header-info {
  text-align: center;
  margin-left: 0;
  width: 100%;
}

/* T4 (Bizniz Design 4) */
.bc-t4-header-section.bc-t4-header-section--no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bc-t4-header-section--no-image .bc-t4-profile-company,
.bc-t4-header-section--no-image .bc-t4-profile-name,
.bc-t4-header-section--no-image .bc-t4-profile-title,
.bc-t4-header-section--no-image .bc-t4-header-info {
  text-align: center;
  margin-left: 0;
  width: 100%;
}

/* T4 photo-header variant: when no image the identity stacks below
   the coloured band and should also be centred */
.bc-t4-header-identity-stack {
  text-align: center;
}

.bc-t4-header-identity-stack .bc-t4-header-info {
  text-align: center;
  margin-left: 0;
}

.bc-t4-header-identity-stack .bc-t4-profile-company,
.bc-t4-header-identity-stack .bc-t4-profile-name,
.bc-t4-header-identity-stack .bc-t4-profile-title {
  text-align: center;
}