/* portfolio.html overrides */

/* Flyout — smart above/below placement (set in portfolio_v1.js) */
.profile-stats__flyout--below {
  top: calc(100% + 0.4rem);
  bottom: auto;
}

.profile-stats__flyout--above {
  top: auto;
  bottom: calc(100% + 0.4rem);
}

.profile-stats__flyout--below:not(.is-open) {
  transform: translateY(-4px);
}

.profile-stats__flyout--above:not(.is-open) {
  transform: translateY(4px);
}

.profile-stats__flyout.is-measuring {
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  max-height: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .profile-stats__flyout-wrap:hover .profile-stats__flyout--below,
  .profile-stats__flyout-wrap:focus-within .profile-stats__flyout--below,
  .profile-stats__flyout--below.is-open {
    transform: translateY(0);
  }

  .profile-stats__flyout-wrap:hover .profile-stats__flyout--above,
  .profile-stats__flyout-wrap:focus-within .profile-stats__flyout--above,
  .profile-stats__flyout--above.is-open {
    transform: translateY(0);
  }
}

.profile-stats__flyout--below.is-open,
.profile-stats__flyout--above.is-open {
  transform: translateY(0);
}

/* Awards flyout — fit narrow profile column and phone screens */
.profile-stats__item--flyout:has(.profile-stats__flyout--awards) .profile-stats__flyout-wrap {
  position: static;
}

.profile-stats__flyout--awards {
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.profile-stats__flyout--awards .profile-stats__flyout-list li {
  max-width: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media (min-width: 900px) {
  .layout--hero .profile-card:has(.profile-stats__item--flyout.is-open),
  .layout--hero .profile-card:has(.profile-stats__flyout-wrap:hover),
  .layout--hero .profile-card:has(.profile-stats__flyout-wrap:focus-within) {
    overflow: visible;
  }

  .layout--hero .profile-card__body,
  .layout--hero .profile-card__panel {
    overflow: visible;
  }

  /* Override book layout default (always-above) — JS sets side per viewport */
  .layout--hero .profile-stats__item--flyout .profile-stats__flyout--below {
    top: calc(100% + 0.4rem);
    bottom: auto;
    transform: translateY(-4px);
  }

  .layout--hero .profile-stats__item--flyout .profile-stats__flyout--above {
    top: auto;
    bottom: calc(100% + 0.4rem);
    transform: translateY(4px);
  }

  .layout--hero .profile-stats__item--flyout .profile-stats__flyout--below.is-open,
  .layout--hero
    .profile-stats__item--flyout
    .profile-stats__flyout-wrap:hover
    .profile-stats__flyout--below,
  .layout--hero
    .profile-stats__item--flyout
    .profile-stats__flyout-wrap:focus-within
    .profile-stats__flyout--below,
  .layout--hero .profile-stats__item--flyout .profile-stats__flyout--above.is-open,
  .layout--hero
    .profile-stats__item--flyout
    .profile-stats__flyout-wrap:hover
    .profile-stats__flyout--above,
  .layout--hero
    .profile-stats__item--flyout
    .profile-stats__flyout-wrap:focus-within
    .profile-stats__flyout--above {
    transform: translateY(0);
  }
}

@media (max-width: 899px) {
  .layout--hero .profile-card__body,
  .layout--hero .profile-card__panel {
    overflow: visible;
  }

  .profile-stats__flyout--awards {
    font-size: 0.88rem;
    line-height: 1.45;
  }
}

/* portfolio.html overrides — open-book spread */

.strengths__grid--panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  --panel-grad: linear-gradient(
    to right,
    #f2f1ef 0%,
    #fbfbfb 6%,
    #ffffff 14%,
    #ffffff 100%
  );
  --panel-grad-hover: linear-gradient(
    to right,
    #ebeae7 0%,
    #f4f6f4 7%,
    #f8fbf9 15%,
    #ffffff 100%
  );
  --panel-grad-active: linear-gradient(
    to right,
    #e3e6e2 0%,
    #eef1ee 7%,
    #f3f7f4 15%,
    #f9fcfa 100%
  );
  background: var(--panel-grad);
  border-radius: var(--radius-card);
  box-shadow:
    var(--shadow),
    inset 10px 0 18px -12px rgba(42, 52, 48, 0.07);
}

.strengths__grid--panel .page-hero {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--pad-card);
  padding-bottom: calc(var(--pad-card) * 0.9);
  font-size: calc(clamp(1.85rem, 6vw, 2.25rem) + 2px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.025em;
  color: var(--green);
  box-sizing: border-box;
}

.strengths__grid--panel .strength-card {
  flex: 0 0 auto;
  min-height: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-bottom: none;
  padding: 1rem var(--pad-card);
}

.strengths__grid--panel .strength-card + .strength-card {
  margin-top: 0.65rem;
}

.strengths__grid--panel .strength-card__title {
  margin-bottom: 0.35rem;
}

.strengths__grid--panel .strength-card:last-child {
  padding-bottom: calc(var(--pad-card) * 1.35);
}

.strengths__grid--panel .strength-card:hover {
  background: var(--panel-grad-hover);
  box-shadow: none;
  transform: none;
}

.strengths__grid--panel .strength-card.is-pressed,
.strengths__grid--panel .strength-card:active {
  background: var(--panel-grad-active);
  box-shadow: none;
  transform: none !important;
}

@media (min-width: 900px) {
  .layout.layout--hero {
    grid-template-rows: 1fr;
    align-items: stretch;
    column-gap: 0 !important;
    gap: 0 !important;
    --book-gutter: 1.35rem;
    --book-radius: var(--radius-mobile-card); /* 28.8px — unified panel corners */
  }

  .strengths__grid--panel {
    border-radius: var(--book-radius) var(--book-radius) var(--book-radius) 0;
    box-shadow:
      4px 8px 32px rgba(42, 52, 48, 0.08),
      inset 6px 0 14px -10px rgba(42, 52, 48, 0.05);
  }

  .strengths__grid--panel .page-hero {
    font-size: calc(clamp(1.85rem, 1.75vw, 2.25rem) + 2px);
    line-height: 1.28;
    padding-left: calc(var(--pad-card) + var(--book-gutter));
    padding-right: var(--pad-card);
  }

  .profile-card {
    align-self: stretch;
    grid-row: 1;
    margin-top: 0;
    height: 100%;
    border-radius: var(--book-radius) 0 0 var(--book-radius);
    overflow: hidden;
    background: linear-gradient(
      to right,
      #ffffff 0%,
      #ffffff 72%,
      #f7f6f4 88%,
      #f0efed 100%
    );
    box-shadow:
      -4px 8px 32px rgba(42, 52, 48, 0.08),
      inset -6px 0 14px -10px rgba(42, 52, 48, 0.05);
  }

  .layout--hero .profile-card__banner {
    border-radius: var(--book-radius) var(--book-radius) 0 0;
  }

  .layout--hero .profile-card__body {
    position: relative;
    z-index: 1;
    margin-top: -6.5rem;
    padding: var(--pad-card);
    padding-right: calc(var(--pad-card) + var(--book-gutter));
    padding-bottom: 0;
    text-align: center;
    background: #ffffff;
    border-radius: var(--book-radius) var(--book-radius) 0 0;
    box-shadow: none;
  }

  .layout--hero .profile-card .profile-nav-card {
    margin-right: calc(-1 * (var(--pad-card) + var(--book-gutter)));
    padding-right: calc(var(--pad-card) + var(--book-gutter));
  }

  .strengths__grid.strengths__grid--panel {
    align-self: stretch;
    grid-row: 1;
    margin-top: 0;
    height: 100%;
  }

  /* Absorb extra height at the bottom of the panel — cards stay compact */
  .strengths__grid--panel::after {
    content: "";
    flex: 1 1 auto;
    min-height: 0;
  }

  .strengths__grid--panel .strength-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.85rem var(--pad-card) 0.85rem calc(var(--pad-card) + var(--book-gutter));
  }

  .strengths__grid--panel .strength-card:last-child {
    padding-bottom: calc(var(--pad-card) * 1.35);
  }

  .strengths__grid--panel .strength-card + .strength-card {
    margin-top: 0.85rem;
  }
}

@media (max-width: 899px) {
  .layout--hero .profile-card:has(.profile-stats__item--flyout.is-open),
  .layout--hero .profile-card:has(.profile-stats__flyout-wrap:hover),
  .layout--hero .profile-card:has(.profile-stats__flyout-wrap:focus-within) {
    overflow: visible;
  }

  .layout.layout--hero {
    gap: var(--gap-cards-mobile, var(--gap-cards));
  }

  .layout--hero .profile-card {
    margin-top: -4.5rem;
  }

  /* One panel on phone — flat white, no book gradient */
  .strengths__grid--panel {
    gap: 0;
    overflow: hidden;
    background: var(--card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
  }

  .strengths__grid--panel .page-hero {
    background: transparent;
    box-shadow: none;
  }

  .strengths__grid--panel .strength-card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 1rem var(--pad-card);
  }

  .strengths__grid--panel .strength-card + .strength-card {
    margin-top: 0.65rem;
  }

  .strengths__grid--panel .strength-card:hover {
    background: rgba(58, 63, 61, 0.04);
    box-shadow: none;
    transform: none;
  }

  .strengths__grid--panel .strength-card.is-pressed,
  .strengths__grid--panel .strength-card:active {
    background: rgba(58, 63, 61, 0.06);
    box-shadow: none;
    transform: none !important;
  }
}