/* Portfolio Feature Page - Premium Editorial Layout */

/* ========================================
   SECTIONS CONTAINER
   ======================================== */
.portfolio_sectionsContainer__aFHAB {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ========================================
   FEATURE SECTION - Full Width Alternating
   ======================================== */
.portfolio_featureSection__Bjwj0 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 5rem 3rem;
  max-width: 1200px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.portfolio_featureSectionVisible__d6rp0 {
  opacity: 1;
  transform: translateY(0);
}

/* Alternating backgrounds */
.portfolio_featureSection__Bjwj0:nth-child(odd) {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.portfolio_featureSection__Bjwj0:nth-child(even) {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

/* Reverse layout for odd-indexed sections (2nd, 4th) */
.portfolio_featureSectionReversed__4T0Kz .portfolio_contentSide__g_16n {
  order: 2;
}

.portfolio_featureSectionReversed__4T0Kz .portfolio_visualSide__B1tpB {
  order: 1;
}

/* ========================================
   CONTENT SIDE (Text)
   ======================================== */
.portfolio_contentSide__g_16n {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.portfolio_sectionLabel__E_0pW {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent, #d97706);
}

.portfolio_sectionLabel__E_0pW::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--accent, #d97706);
  border-radius: 1px;
}

.portfolio_sectionTitle__gAzEn {
  font-size: 2.25rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.portfolio_sectionDescription__n1Y5_ {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #475569;
}

.portfolio_benefitsList__HRYK3 {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 0.5rem;
}

.portfolio_benefitItem___6nJN {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: #334155;
  line-height: 1.5;
}

.portfolio_benefitIcon__02gm1 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: linear-gradient(135deg, var(--accent-light, #FED7AA) 0%, var(--accent, #d97706) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.portfolio_benefitIcon__02gm1 svg {
  width: 11px;
  height: 11px;
  color: white;
}

/* ========================================
   VISUAL SIDE (Diagram)
   ======================================== */
.portfolio_visualSide__B1tpB {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.portfolio_visualWrapper__iCvte {
  position: relative;
  width: 100%;
  max-width: 420px;
}

/* Subtle glow behind the visual */
.portfolio_visualWrapper__iCvte::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    ellipse at center,
    var(--accent-glow, rgba(217, 119, 6, 0.08)) 0%,
    transparent 70%
  );
  border-radius: 24px;
  z-index: 0;
}

.portfolio_visualCard__L5gss {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  z-index: 1;
  transition: transform 400ms ease, box-shadow 400ms ease;
}

.portfolio_featureSection__Bjwj0:hover .portfolio_visualCard__L5gss {
  transform: translateY(-4px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.06),
    0 16px 32px rgba(0, 0, 0, 0.06);
}

.portfolio_visualCardHeader__j6d2Q {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(
    135deg,
    var(--accent, #d97706) 0%,
    var(--accent-dark, #b45309) 100%
  );
}

.portfolio_headerIcon__qJDmn {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio_headerIcon__qJDmn svg {
  width: 16px;
  height: 16px;
  color: white;
}

.portfolio_visualCardTitle__2cc6b {
  font-size: 13px;
  font-weight: 600;
  color: white;
  letter-spacing: 0.02em;
}

.portfolio_visualCardBody__i9GZ3 {
  padding: 16px 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

/* ========================================
   CARD CONTENT (Inside Visual Card)
   ======================================== */
.portfolio_cardContent__G36S6 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ========================================
   OVERVIEW GRID (Portfolio Overview)
   ======================================== */
.portfolio_overviewGrid__4nqf1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.portfolio_overviewItem__muPR0 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.portfolio_overviewLabel__5xZ1p {
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.portfolio_overviewValue__FPclj {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

.portfolio_roleBadge__M1uxb {
  font-size: 10px;
  font-weight: 700;
  color: white;
  background: #7c3aed;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}

/* P&L Stats Row */
.portfolio_plStats__AhTAh {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.portfolio_plItem__cMrmv {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 6px;
  text-align: center;
}

.portfolio_plLabel__N2r0w {
  font-size: 9px;
  font-weight: 500;
  color: #64748b;
}

.portfolio_plValueGreen__XzipV {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
}

.portfolio_plValueBlue__1dvZ8 {
  font-size: 12px;
  font-weight: 700;
  color: #2196f3;
}

/* ========================================
   ASSET TABLE
   ======================================== */
.portfolio_assetTable__NVlhU {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.portfolio_assetTableHeader__7C9LI {
  display: grid;
  grid-template-columns: 70px 1fr 70px 70px;
  gap: 6px;
  padding: 8px 10px;
  background: #f1f5f9;
  border-radius: 8px 8px 0 0;
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.portfolio_assetTableRow__tcZQx {
  display: grid;
  grid-template-columns: 70px 1fr 70px 70px;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid #e2e8f0;
  align-items: center;
}

.portfolio_assetTableRow__tcZQx:last-child {
  border-bottom: none;
}

.portfolio_assetCoin___xI7P {
  display: flex;
  align-items: center;
  gap: 6px;
}

.portfolio_coinIcon__5Dep0 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.portfolio_assetName__vXdFs {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
}

.portfolio_assetBalanceCol__WcVtA {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.portfolio_assetBalance__dAi7A {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
}

.portfolio_assetValue__9y9n6 {
  font-size: 9px;
  color: #64748b;
}

.portfolio_assetFlowCol__r2pyf {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.portfolio_flowIn__DOLmi {
  font-size: 10px;
  font-weight: 600;
  color: #059669;
}

.portfolio_flowOut__yB0P3 {
  font-size: 10px;
  font-weight: 600;
  color: #ea5050;
}

.portfolio_assetPnLCol__FJY2t {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.portfolio_pnlProfit__lX5IO {
  font-size: 10px;
  font-weight: 600;
  color: #059669;
}

.portfolio_pnlLoss__id_aN {
  font-size: 10px;
  font-weight: 600;
  color: #ea5050;
}

/* ========================================
   MEMBERS / ROLES
   ======================================== */
.portfolio_rolesGrid__pq7mu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.portfolio_roleCard__N3tfE {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.portfolio_roleHeader__6GWan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.portfolio_roleAvatar__d7rJx {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio_roleIcon___Njvx {
  width: 14px;
  height: 14px;
}

.portfolio_roleBadgeSmall__o0keu {
  font-size: 8px;
  font-weight: 700;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
}

.portfolio_roleDesc__lekbk {
  font-size: 9px;
  color: #64748b;
  text-align: center;
}

/* Members Table */
.portfolio_membersTable__0S_sj {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.portfolio_membersTableHeader__GVqma {
  display: grid;
  grid-template-columns: 1fr 70px 50px 60px;
  gap: 6px;
  padding: 8px 10px;
  background: #f1f5f9;
  border-radius: 8px 8px 0 0;
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
}

.portfolio_membersTableRow__u0uRU {
  display: grid;
  grid-template-columns: 1fr 70px 50px 60px;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid #e2e8f0;
  align-items: center;
}

.portfolio_membersTableRow__u0uRU:last-child {
  border-bottom: none;
}

.portfolio_memberInfo__9rEmV {
  display: flex;
  align-items: center;
  gap: 8px;
}

.portfolio_memberAvatarSmall__H6Wci {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: white;
}

.portfolio_memberName__81M2e {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
}

.portfolio_memberStat__X7Ls5 {
  font-size: 11px;
  color: #334155;
  text-align: center;
}

.portfolio_memberStatGreen__n8iSa {
  font-size: 11px;
  font-weight: 600;
  color: #059669;
  text-align: center;
}

/* ========================================
   PLANS TABLE
   ======================================== */
.portfolio_plansTable__KTGRD {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 12px;
}

.portfolio_plansTableHeader__xeaF8 {
  display: grid;
  grid-template-columns: 1fr 50px 60px 60px;
  gap: 6px;
  padding: 8px 10px;
  background: #f1f5f9;
  border-radius: 8px 8px 0 0;
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
}

.portfolio_plansTableRow__nhq4J {
  display: grid;
  grid-template-columns: 1fr 50px 60px 60px;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid #e2e8f0;
  align-items: center;
}

.portfolio_plansTableRow__nhq4J:last-child {
  border-bottom: none;
}

.portfolio_plansTableRowActive__iT9ml {
  background: #fffbeb;
}

.portfolio_planName__FIBAR {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
}

.portfolio_planCell__rfeAy {
  font-size: 11px;
  color: #334155;
  text-align: center;
}

.portfolio_planWinRate__nPzT4 {
  font-size: 11px;
  font-weight: 600;
  color: #059669;
  text-align: center;
}

/* Checklist Preview */
.portfolio_checklistPreview__jF4Wd {
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.portfolio_checklistLabel__a5My7 {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: block;
}

.portfolio_checklistItems__wdPl4 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.portfolio_checkItem__lm6SG {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #334155;
}

.portfolio_checkboxChecked__aE3ln {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio_checkboxEmpty__7HpRb {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #cbd5e1;
  background: white;
}

/* ========================================
   PATTERNS TABLE
   ======================================== */
.portfolio_patternsTable__NSQdr {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.portfolio_patternsTableHeader__kkL2K {
  display: grid;
  grid-template-columns: 1fr 55px 55px 60px;
  gap: 6px;
  padding: 8px 10px;
  background: #f1f5f9;
  border-radius: 8px 8px 0 0;
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
}

.portfolio_patternsTableRow__2DxMa {
  display: grid;
  grid-template-columns: 1fr 55px 55px 60px;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  align-items: center;
}

.portfolio_patternsTableRow__2DxMa:last-child {
  border-bottom: none;
}

.portfolio_patternName__C5yyT {
  font-size: 10px;
  font-weight: 600;
  color: #1e293b;
}

.portfolio_patternBadge__k9lIy {
  font-size: 8px;
  font-weight: 600;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;
}

.portfolio_patternWinRateGreen__hDg0b {
  font-size: 10px;
  font-weight: 600;
  color: #059669;
  text-align: center;
}

.portfolio_patternWinRateRed__qUOb8 {
  font-size: 10px;
  font-weight: 600;
  color: #ea5050;
  text-align: center;
}

/* ========================================
   TRANSACTIONS TABLE
   ======================================== */
.portfolio_txTable__ksBSp {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.portfolio_txTableHeader__REDtW {
  display: grid;
  grid-template-columns: 70px 1fr 1fr 60px;
  gap: 6px;
  padding: 8px 10px;
  background: #f1f5f9;
  border-radius: 8px 8px 0 0;
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
}

.portfolio_txTableRow__4El5M {
  display: grid;
  grid-template-columns: 70px 1fr 1fr 60px;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid #e2e8f0;
  align-items: center;
}

.portfolio_txTableRow__4El5M:last-child {
  border-bottom: none;
}

.portfolio_txTypeBadge___HEGj {
  font-size: 8px;
  font-weight: 700;
  color: white;
  padding: 3px 6px;
  border-radius: 4px;
  text-align: center;
}

.portfolio_txIncoming__qVnGt {
  font-size: 10px;
  font-weight: 600;
  color: #059669;
}

.portfolio_txOutgoing__llOxD {
  font-size: 10px;
  font-weight: 600;
  color: #ea5050;
}

.portfolio_txNeutral__98l35 {
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
}

.portfolio_txDate__wwahJ {
  font-size: 10px;
  color: #64748b;
}

/* ========================================
   SECTION DIVIDER
   ======================================== */
.portfolio_sectionDivider__MhC__ {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #e2e8f0 20%,
    #e2e8f0 80%,
    transparent 100%
  );
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 1024px) {
  .portfolio_featureSection__Bjwj0 {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 4rem 2rem;
    text-align: center;
  }

  .portfolio_featureSectionReversed__4T0Kz .portfolio_contentSide__g_16n,
  .portfolio_featureSectionReversed__4T0Kz .portfolio_visualSide__B1tpB {
    order: unset;
  }

  .portfolio_contentSide__g_16n {
    align-items: center;
  }

  .portfolio_sectionTitle__gAzEn {
    font-size: 1.875rem;
  }

  .portfolio_benefitsList__HRYK3 {
    align-items: flex-start;
    text-align: left;
    max-width: 400px;
  }

  .portfolio_visualWrapper__iCvte {
    max-width: 380px;
  }
}

@media (max-width: 640px) {
  .portfolio_featureSection__Bjwj0 {
    padding: 3rem 1.25rem;
    gap: 2rem;
  }

  .portfolio_sectionTitle__gAzEn {
    font-size: 1.5rem;
  }

  .portfolio_sectionDescription__n1Y5_ {
    font-size: 0.9375rem;
  }

  .portfolio_benefitItem___6nJN {
    font-size: 0.875rem;
  }

  .portfolio_visualWrapper__iCvte {
    max-width: 100%;
  }

  .portfolio_overviewGrid__4nqf1 {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .portfolio_plStats__AhTAh {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }

  .portfolio_rolesGrid__pq7mu {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .portfolio_assetTableHeader__7C9LI,
  .portfolio_assetTableRow__tcZQx {
    grid-template-columns: 60px 1fr 60px 60px;
    gap: 4px;
    padding: 8px;
  }

  .portfolio_membersTableHeader__GVqma,
  .portfolio_membersTableRow__u0uRU {
    grid-template-columns: 1fr 60px 40px 50px;
    gap: 4px;
    padding: 8px;
  }

  .portfolio_plansTableHeader__xeaF8,
  .portfolio_plansTableRow__nhq4J {
    grid-template-columns: 1fr 45px 50px 50px;
    gap: 4px;
    padding: 8px;
  }

  .portfolio_patternsTableHeader__kkL2K,
  .portfolio_patternsTableRow__2DxMa {
    grid-template-columns: 1fr 50px 50px 50px;
    gap: 4px;
    padding: 6px 8px;
  }

  .portfolio_txTableHeader__REDtW,
  .portfolio_txTableRow__4El5M {
    grid-template-columns: 60px 1fr 1fr 50px;
    gap: 4px;
    padding: 8px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .portfolio_featureSection__Bjwj0 {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .portfolio_visualCard__L5gss {
    transition: none;
  }

  .portfolio_featureSection__Bjwj0:hover .portfolio_visualCard__L5gss {
    transform: none;
  }
}