/* ========================================
   Lazio Card Component
   ========================================
   Unified card element with variant presets.
   Nestable: structured controls + drag-drop children.
   Phase 1: feature, dark, stat, callout, source
   ======================================== */

/* ----------------------------------------
   Builder scaffolding: hide from flex layout
   ---------------------------------------- */
.lazio-card > .brx-nestable-children-placeholder,
.lazio-card > .brx-nestable-children {
  display: none;
}

/* ----------------------------------------
   Base card
   ---------------------------------------- */
.lazio-card {
  --card-bg: var(--white-background, #ffffff);
  --card-border: 1px solid rgba(142, 140, 139, 0.3);
  --card-shadow: none;
  --card-padding: 1.5em;
  --card-radius: 0;
  --card-gap: 1em;
  --card-transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Text defaults — use theme variables so dark mode flips automatically */
  --card-title-color: var(--lazio-black, #1C1917);
  --card-body-color: var(--lazio-slate-light, #78716C);
  --card-meta-color: var(--lazio-slate-light, #78716C);
  --card-icon-color: var(--lazio-orange, #F97316);

  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: var(--card-padding);
  background-color: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--card-radius);
  transition: var(--card-transition);
  text-decoration: none;
  color: inherit;
  height: 100%;
  text-align: left;
}

/* ----------------------------------------
   Media zone
   ---------------------------------------- */
.lazio-card__media {
  flex-shrink: 0;
  color: var(--card-icon-color);
}

.lazio-card__media img,
.lazio-card__media svg {
  display: block;
  height: auto;
}

.lazio-card__media--icon i,
.lazio-card__media--icon svg {
  font-size: inherit;
}

/* ----------------------------------------
   Content zone
   ---------------------------------------- */
.lazio-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  flex: 1;
}

.lazio-card__title {
  margin: 0;
  color: var(--card-title-color);
  text-align: left;
}

.lazio-card__body {
  margin: 0;
  color: var(--card-body-color);
  text-align: left;
  line-height: 1.6;
}

.lazio-card__meta {
  margin: 0;
  color: var(--card-meta-color);
  font-size: 0.875em;
}

.lazio-card__value {
  margin: 0;
  font-weight: 700;
}

/* ========================================
   Variant: Feature
   Icon + title + body, orange offset shadow
   ======================================== */
.lazio-card--feature {
  --card-shadow: 5px 5px var(--lazio-orange, #F97316);
}

/* ========================================
   Variant: Dark
   Icon + title + body, dark background.
   Hardcoded colors — stays dark in both modes.
   ======================================== */
.lazio-card--dark {
  --card-bg: #1C1917;
  --card-border: none;
  --card-shadow: none;
  --card-title-color: #fff7ed;
  --card-body-color: rgba(255, 247, 237, 0.75);
  --card-meta-color: rgba(255, 247, 237, 0.6);
}

/* ========================================
   Variant: Stat
   Transparent — floats on parent background.
   Big value + label + meta. Impact Container pattern.
   ======================================== */
.lazio-card--stat {
  --card-bg: transparent;
  --card-border: none;
  --card-shadow: none;
  --card-title-color: #FFF7ED;
  --card-meta-color: rgba(255, 247, 237, 0.6);
  text-align: center;
  padding: 1em 0;
}

.lazio-card--stat .lazio-card__value {
  font-family: 'Poppins', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--lazio-orange, #F97316);
}

.lazio-card--stat .lazio-card__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--card-title-color);
  text-align: center;
}

.lazio-card--stat .lazio-card__meta {
  color: var(--card-meta-color);
}

/* ========================================
   Variant: Source
   Horizontal layout, icon left, left border
   ======================================== */
.lazio-card--source {
  flex-direction: row;
  flex-wrap: wrap;
  --card-gap: 1.25em;
  --card-shadow: none;
  border-left: 5px solid var(--lazio-orange, #F97316);
}

.lazio-card--source > .brxe-lazio-pill-list {
  flex-basis: 100%;
}

.lazio-card--source .lazio-card__media {
  display: flex;
  align-items: flex-start;
  padding-top: 0.15em;
}

/* ========================================
   Variant: Quote
   Pull quote / impact container. Dark bg,
   left orange accent bar, large cream text.
   ======================================== */
.lazio-card--quote {
  --card-bg: #1C1917;
  --card-border: none;
  --card-shadow: none;
  --card-title-color: #fff7ed;
  --card-body-color: rgba(255, 247, 237, 0.75);
  --card-gap: 0;
  --card-padding: 0.8em 1.5em 0.8em 2em;
  border-left: 5px solid var(--lazio-orange, #F97316);
  height: auto;
}

.lazio-card--quote .lazio-card__title {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: var(--text-xl, 1.5rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  text-transform: none;
}

@media (max-width: 768px) {
  .lazio-card--quote {
    --card-padding: 0.8em 1em 0.8em 1em;
  }

  .lazio-card--quote .lazio-card__title {
    font-size: var(--text-l, 1.25rem);
  }
}

/* ========================================
   Hover presets
   ======================================== */
.lazio-card--hover-lift:hover {
  transform: translateY(-10px);
}

.lazio-card--hover-lift-shadow:hover {
  transform: translateY(-10px);
  box-shadow: 5px 5px var(--lazio-orange, #F97316);
}

/* When feature already has shadow, intensify on hover */
.lazio-card--feature.lazio-card--hover-lift:hover {
  box-shadow: 8px 8px var(--lazio-orange, #F97316);
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
  .lazio-card--source {
    flex-direction: column;
  }
}


/* ========================================
   Variant: Numbered HIW (How It Works)
   Dark card with big background number,
   icon + title row. Hardcoded colors so
   dark mode cannot flip them.
   ======================================== */
.lazio-card--numbered-hiw {
  --card-bg: #1C1917;
  --card-border: 1px solid rgba(255, 247, 237, 0.3);
  --card-shadow: 5px 5px #F97316;
  --card-title-color: rgba(251, 150, 80, 0.75);
  --card-body-color: rgba(255, 247, 237, 0.75);
  --card-icon-color: rgba(251, 150, 80, 0.75);
  position: relative;
  overflow: hidden;
  --card-padding: 35px;
  justify-content: space-between;
  height: auto;
  flex: 1 1 0%;
  min-width: 0;
}

/* Big background number */
.lazio-card__number {
  position: absolute;
  right: 0;
  top: 100px;
  font-size: 300px;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 400;
  color: rgba(198, 198, 197, 0.1);
  pointer-events: none;
  user-select: none;
}

/* Header row: icon + title side by side */
.lazio-card__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
  position: relative;
  z-index: 1;
}

.lazio-card--numbered-hiw .lazio-card__header .lazio-card__title {
  color: rgba(251, 150, 80, 0.75);
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: var(--text-xl, 1.5rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.lazio-card--numbered-hiw .lazio-card__content {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .lazio-card--numbered-hiw {
    flex-basis: 100%;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .lazio-card--numbered-hiw {
    min-width: 0;
    flex-basis: 100%;
  }

  .lazio-card--numbered-hiw .lazio-card__header .lazio-card__title {
    white-space: normal;
  }

  .lazio-card__number {
    font-size: 200px;
  }
}

/* Builder fix: ensure parent block uses correct layout for numbered-hiw cards.
   Specificity (0,2,0) beats .brxe-block default (0,1,0) in all contexts. */
.brxe-block:has(> .lazio-card--numbered-hiw),
.brxe-div:has(> .lazio-card--numbered-hiw) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 2em;
}

/* ----------------------------------------
   Numbered HIW: Light theme
   White bg, iron border, orange ghost number,
   orange title, italic slate body.
   ---------------------------------------- */
.lazio-card--numbered-hiw.lazio-card--theme-light {
  --card-bg: var(--cream, #FFF7ED);
  --card-border: 1px solid rgba(28, 25, 23, 0.3);
  --card-title-color: var(--lazio-orange, #F97316);
  --card-body-color: var(--lazio-slate-light, #78716C);
  --card-icon-color: var(--lazio-orange, #F97316);
}

.lazio-card--numbered-hiw.lazio-card--theme-light .lazio-card__number {
  color: rgba(249, 115, 22, 0.15);
}

.lazio-card--numbered-hiw.lazio-card--theme-light .lazio-card__header .lazio-card__title {
  color: var(--lazio-orange, #F97316);
}

.lazio-card--numbered-hiw.lazio-card--theme-light .lazio-card__body {
  font-style: italic;
  color: var(--lazio-slate-light, #78716C);
}

/* ----------------------------------------
   Numbered HIW: Horizontal layout
   Two-column grid: number+title left, body right.
   ---------------------------------------- */
.lazio-card--numbered-hiw.lazio-card--layout-horizontal {
  display: grid;
  grid-template-columns: minmax(250px, 375px) 1fr;
  align-items: center;
}

/* Hide builder scaffolding from grid layout */
.lazio-card--layout-horizontal > .brx-nestable-children-placeholder,
.lazio-card--layout-horizontal > .brx-nestable-children {
  display: none;
}

.lazio-card--numbered-hiw.lazio-card--layout-horizontal .lazio-card__number {
  right: auto;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 200px;
}

.lazio-card--numbered-hiw.lazio-card--layout-horizontal .lazio-card__header {
  grid-column: 1;
  grid-row: 1;
}

.lazio-card--numbered-hiw.lazio-card--layout-horizontal .lazio-card__content {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

/* ----------------------------------------
   Numbered HIW: Responsive
   Horizontal collapses to stacked at 768px.
   ---------------------------------------- */
@media (max-width: 768px) {
  .lazio-card--numbered-hiw.lazio-card--layout-horizontal {
    grid-template-columns: 1fr;
  }

  .lazio-card--numbered-hiw.lazio-card--layout-horizontal .lazio-card__number {
    font-size: 150px;
    right: 0;
    left: auto;
    top: 100px;
    transform: none;
  }

  .lazio-card--numbered-hiw.lazio-card--layout-horizontal .lazio-card__header {
    grid-column: 1;
    grid-row: auto;
  }

  .lazio-card--numbered-hiw.lazio-card--layout-horizontal .lazio-card__content {
    grid-column: 1;
    grid-row: auto;
  }
}


/* ========================================
   Variant: Needs
   Category header (icon + h5) + nestable
   children. Iron-opacity bg, whisper-gray
   border, orange hover shadow.
   ======================================== */
.lazio-card--needs {
  --card-bg: var(--iron-t-3, rgba(198, 198, 197, 0.1));
  --card-border: 1px solid var(--whisper-gray, #e5e7eb);
  --card-shadow: none;
  --card-padding: 30px;
  --card-gap: 0;
  justify-content: space-between;
}

.lazio-card--needs:hover {
  box-shadow: 5px 5px var(--lazio-orange, #F97316);
  background-color: var(--white, #ffffff);
}

/* Header: icon + category label */
.lazio-card__needs-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
  margin-bottom: 30px;
}

.lazio-card__needs-category {
  margin: 0;
  color: var(--iron, #1C1917);
}


/* ========================================
   Variant: Guarantee
   Centered promise card with tab badge,
   eyebrow, heading, divider, body quote,
   circular icon frame.
   ======================================== */
.lazio-card--guarantee {
  --card-border: none;
  --card-shadow: 0 0 50px -20px rgba(251, 150, 80, 0.75);
  --card-padding: 0 80px 80px;
  --card-gap: 50px;
  --card-bg: var(--cream, #FFF7ED);
  width: 90%;
  max-width: 900px;
  position: relative;
  border-top: 10px solid var(--lazio-orange, #F97316);
  border-right: 1px solid var(--lazio-black, #1C1917);
  border-bottom: 1px solid var(--lazio-black, #1C1917);
  border-left: 1px solid var(--lazio-black, #1C1917);
  align-items: center;
  align-self: center;
  text-align: center;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Tab badge — overlaps the orange top border */
.lazio-card__tab {
  background-color: var(--lazio-black, #1C1917);
  padding: 10px 50px;
  margin-top: -37px;
}

.lazio-card__tab span {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--cream, #FFF7ED);
  letter-spacing: 0.2em;
  font-size: var(--text-s, 1.13rem);
  line-height: 1.3em;
}

/* Guarantee meta / eyebrow */
.lazio-card--guarantee .lazio-card__meta {
  color: var(--lazio-orange, #F97316);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--text-s, 1.13rem);
  line-height: 1.3em;
}

/* Guarantee title */
.lazio-card--guarantee .lazio-card__title {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: var(--text-2xl, 2rem);
  color: var(--iron, #1C1917);
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

/* Divider */
.lazio-card__divider {
  width: 50px;
  border: none;
  border-top: 1px solid var(--whisper-gray, #E5E7EB);
  margin: 0;
  padding: 0;
  height: 0;
}

/* Guarantee body — italic quote */
.lazio-card--guarantee .lazio-card__body {
  font-style: italic;
  color: var(--slate-gray, #767676);
  font-size: var(--text-ml, 1.125rem);
  line-height: 1.4;
  width: 85%;
  text-align: center;
  margin: 0 auto;
}

/* Guarantee media — circular frame */
.lazio-card__media-frame {
  border: 1px solid var(--whisper-gray, #E5E7EB);
  border-radius: 50%;
  padding: 10px;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lazio-card__media-frame .lazio-card__media {
  color: var(--lazio-orange, #F97316);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.lazio-card__media-frame .lazio-card__media i {
  font-size: 48px;
  line-height: 1;
  display: block;
}

.lazio-card__media-frame .lazio-card__media img,
.lazio-card__media-frame .lazio-card__media svg {
  width: 60px;
  height: 60px;
}

/* ---- Guarantee responsive ---- */
@media (max-width: 768px) {
  .lazio-card--guarantee {
    --card-padding: 40px 40px 40px;
    --card-gap: 40px;
  }

  .lazio-card--guarantee .lazio-card__title {
    font-size: var(--text-l, 1.25rem);
  }

  .lazio-card--guarantee .lazio-card__body {
    font-size: var(--text-m, 1rem);
    width: 100%;
  }

  .lazio-card__tab {
    padding: 8px 35px;
    margin-top: -75px;
  }
}

@media (max-width: 480px) {
  .lazio-card--guarantee {
    --card-padding: 0 20px 20px;
    --card-gap: 30px;
    width: 100%;
  }
}


/* ========================================
   Variant: Team Member
   Photo + role + name + divider + bio +
   LinkedIn link. Grayscale-to-color hover.
   ======================================== */
.lazio-card--team {
  --card-bg: var(--cream, #FFF7ED);
  --card-border: 1px solid #E5E7EB;
  --card-shadow: none;
  --card-padding: 0;
  --card-gap: 0;
  overflow: hidden;
  transition: var(--card-transition);
}

.lazio-card--team:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(28, 25, 23, 0.12);
}

/* Photo container */
.lazio-card__photo {
  overflow: hidden;
  margin: 0;
  line-height: 0;
}

.lazio-card__photo-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.6s ease, transform 0.6s ease;
  display: block;
}

.lazio-card--team:hover .lazio-card__photo-img {
  filter: grayscale(0%);
  transform: scale(1.03);
}

/* Team content area */
.lazio-card__team-content {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  padding: 40px;
  flex: 1;
}

/* Role eyebrow — font properties inherited from global h5 (Poppins, var(--text-s), uppercase, 600) */
.lazio-card__role {
  margin: 0;
  color: var(--lazio-orange, #F97316);
}

/* Orange divider — animates on hover */
.lazio-card__divider--team {
  width: 50px;
  border: none;
  border-top: 3px solid var(--lazio-orange, #F97316);
  margin: 0.5em 0;
  padding: 0;
  height: 0;
  transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.lazio-card--team:hover .lazio-card__divider--team {
  width: 150px;
}

/* LinkedIn link */
.lazio-card__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--lazio-orange, #F97316);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  margin-top: 0.5em;
  transition: opacity 0.3s ease;
}

.lazio-card__linkedin:hover {
  opacity: 0.7;
}

.lazio-card__linkedin svg {
  flex-shrink: 0;
}

/* Stretched-link pattern — name <a> covers entire card, LinkedIn sits above */
.lazio-card--team .lazio-card__stretched-link {
  position: static;
  text-decoration: none;
  color: inherit;
}

.lazio-card--team .lazio-card__stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lazio-card--team .lazio-card__linkedin {
  position: relative;
  z-index: 2;
}

/* ---- Team responsive ---- */
@media (max-width: 768px) {
  .lazio-card__team-content {
    padding: 30px;
  }
}


/* ========================================
   Dark Mode — Site-level overrides
   ======================================== */

/* Numbered HIW light → flip to dark appearance */
:root[data-brx-theme="dark"] .lazio-card--numbered-hiw.lazio-card--theme-light {
  --card-bg: #1C1917;
  --card-border: 1px solid rgba(255, 247, 237, 0.3);
  --card-title-color: rgba(251, 150, 80, 0.75);
  --card-body-color: rgba(255, 247, 237, 0.75);
  --card-icon-color: rgba(251, 150, 80, 0.75);
}

:root[data-brx-theme="dark"] .lazio-card--numbered-hiw.lazio-card--theme-light .lazio-card__number {
  color: rgba(198, 198, 197, 0.1);
}

:root[data-brx-theme="dark"] .lazio-card--numbered-hiw.lazio-card--theme-light .lazio-card__header .lazio-card__title {
  color: rgba(251, 150, 80, 0.75);
}

:root[data-brx-theme="dark"] .lazio-card--numbered-hiw.lazio-card--theme-light .lazio-card__body {
  color: rgba(255, 247, 237, 0.75);
  font-style: normal;
}

/* Dark-background cards: protect nested Bricks children from dark-mode text flip.
   Bricks per-element dark colors (e.g. iron #1C1917) become invisible on iron bg. */
:root[data-brx-theme="dark"] .lazio-card--dark,
:root[data-brx-theme="dark"] .lazio-card--numbered-hiw:not(.lazio-card--theme-light) {
  color: rgba(255, 247, 237, 0.75);
}

:root[data-brx-theme="dark"] :is(.lazio-card--dark, .lazio-card--numbered-hiw:not(.lazio-card--theme-light)) :is(.brxe-text-basic, .brxe-heading, .brxe-text, .brxe-icon) {
  color: inherit !important;
}