/* ======================================================
   PORTFOLIO HEADER (browser view)
   ====================================================== */

.portfolio-head{
  padding: 0.5rem !important;
}

/* Title row always first */
.portfolio-title-row{
  margin-top: .25rem;
}

.portfolio-title{
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Subrow wrapper (badges + actions) */
.portfolio-subrow{
  margin-top: .50rem;
}

/* Badges group */
.portfolio-badges{
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:wrap;
  min-width:0;
}

.portfolio-badges .badge{
  display:inline-flex;
  align-items:center;
  line-height:1;
  padding-top:.28rem;
  padding-bottom:.28rem;
}

/* Actions wrapper */
.portfolio-actions{
  min-width:0;
}

/* ======================================================
   ACTION PILLS
   ====================================================== */

.portfolio-action-row{
  display:flex;
  align-items:center;
  gap:0.45rem;
  flex-wrap:wrap;
  justify-content:flex-start; /* default for mid screens */
  margin-top: .45rem;         /* gives separation when stacked */
}

.portfolio-action-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.4rem;

  font-size:0.74rem;
  font-weight:700;

  padding:0.30rem 0.64rem;
  line-height:1;

  border-radius:9999px;
  border:1px solid rgba(15,23,42,.22);

  background:rgba(15,23,42,.06);
  color:#334155;

  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;

  box-shadow:0 1px 2px rgba(15,23,42,.06);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.portfolio-action-pill i{
  font-size:0.82rem;
  opacity:0.95;
  flex-shrink:0;
}

.portfolio-action-pill:hover,
.portfolio-action-pill:focus-visible{
  background:rgba(15,23,42,.10);
  border-color:rgba(15,23,42,.32);
  color:#0f172a;
  box-shadow:0 2px 6px rgba(15,23,42,.12);
}

details .portfolio-action-pill{ list-style:none; }
details .portfolio-action-pill::-webkit-details-marker{ display:none; }
details .portfolio-action-pill::marker{ content:""; }


/* ======================================================
   MOBILE: FORCE 3 BUTTONS INTO ONE ROW (.portfolio-action-row--3)
   ====================================================== */

@media (max-width: 576px){
  .portfolio-action-row--3{
    flex-wrap:nowrap;
    gap:0.35rem;
    justify-content:space-between;
    width:100%;
    margin-top: 0; /* mobile already spaced by mt-2 in HTML */
  }

  .portfolio-action-row--3 > button,
  .portfolio-action-row--3 > a,
  .portfolio-action-row--3 > .portfolio-about{
    flex:1 1 0;
    min-width:0;
  }

  .portfolio-action-row--3 > .portfolio-about{ display:flex; }
  .portfolio-action-row--3 > .portfolio-about > summary{ width:100%; }

  .portfolio-action-row--3 .portfolio-action-pill{
    width:100%;
    padding:0.30rem 0.48rem;
    font-size:0.72rem;
    gap:0.32rem;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (max-width: 360px){
  .portfolio-action-row--3{ gap:0.28rem; }
  .portfolio-action-row--3 .portfolio-action-pill{
    font-size:0.68rem;
    padding:0.28rem 0.42rem;
  }
}


/* ======================================================
   BREAKPOINT BEHAVIOR FOR YOUR md+ BLOCK
   md..lg-1: STACKED (badges row, then actions row)
   lg+: INLINE (badges left, actions right) UNDER TITLE
   ====================================================== */

/* md..lg-1 (768–991.98): stacked */
@media (min-width: 768px) and (max-width: 991.98px){
  .portfolio-subrow{
    display:block;
  }

  .portfolio-actions{
    margin-top: 0; /* spacing handled by .portfolio-action-row margin-top */
  }

  .portfolio-action-row{
    justify-content:flex-start;
  }
}

/* lg+ (>= 992): badges left / actions right on same row */
@media (min-width: 577px){
  .portfolio-subrow{
    display:flex;
    align-items:center;            /* vertical align */
    justify-content:space-between; /* badges left, actions right */
    gap:.75rem;
  }

  .portfolio-actions{
    margin-left:auto;
  }

  .portfolio-action-row{
    margin-top:0;                  /* remove stacked spacing */
    justify-content:flex-end;
    flex-wrap:nowrap;
    white-space:nowrap;
  }

  .portfolio-badges{
    flex-wrap:nowrap;
    white-space:nowrap;
  }
}



/* ======================================================
   SHARE CARD — EXPORT ONLY
   ====================================================== */

/* Global export hygiene */
body.export{
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;

  /* Defaults (overridden by presets) */
  --share-w: 400px;
  --share-h: 400px;
  --share-gx: .5rem;
  --share-gy: .35rem;
}
body.export *{
  animation: none !important;
  transition: none !important;
}

/* Clamp outer containers so nothing adds space */
body.export .main-content,
body.export .container,
body.export .container-fluid{
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* Preset overrides (match your PRESETS keys exactly) */
body.export[data-preset="x_reddit_landscape"] { --share-w: 450px; --share-h: 320px; }
body.export[data-preset="x_instagram_post"]   { --share-w: 400px; --share-h: 500px; }
body.export[data-preset="instagram_story"]    { --share-w: 400px; --share-h: 711px; }
body.export[data-preset="square"]             { --share-w: 400px; --share-h: 400px; }

/* Share card canvas */
body.export #share-card{
  --share-inset-x: calc(2px + (var(--share-gx) * 0.5));

  display: flex !important;
  flex-direction: column !important;

  position: relative !important;

  width: var(--share-w) !important;
  height: var(--share-h) !important;
  min-width: var(--share-w) !important;
  min-height: var(--share-h) !important;

  margin: 0 auto !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #111;
  box-shadow: none !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

/* Inside the card: controlled gutters (Bootstrap rows/cols) */
body.export #share-card .row{
  --bs-gutter-x: var(--share-gx) !important;
  --bs-gutter-y: var(--share-gy) !important;
}
body.export #share-card .col,
body.export #share-card [class*="col-"]{
  padding-left:  calc(var(--bs-gutter-x) * .5) !important;
  padding-right: calc(var(--bs-gutter-x) * .5) !important;
}

/* Neutralize inner containers so they don't re-add padding/max-width */
body.export #share-card .container,
body.export #share-card .container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Reduce Bootstrap spacing inside export */
body.export #share-card .mb-3{ margin-bottom: .35rem !important; }
body.export #share-card .mb-2{ margin-bottom: .25rem !important; }
body.export #share-card .mb-1{ margin-bottom: .15rem !important; }

/* Hide UI chrome in export */
body.export .btn-action,
body.export [data-bs-toggle="modal"],
body.export .feedback-floating,
body.export .alert-container,
body.export .sidenav,
body.export .modal,
body.export .navbar,
body.export .footer{
  display: none !important;
}

/* Image/canvas hygiene scoped to export card */
body.export #share-card img{
  max-width: 100%;
  height: auto;
  display: block;
}
body.export #share-card canvas{
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* Unstick sticky bits inside the card */
body.export #share-card .sticky-top,
body.export #share-card .position-sticky{
  position: static !important;
  top: auto !important;
}

/* Avoid selection highlights in export */
body.export #share-card,
body.export #share-card *{
  user-select: none;
}

/* Tight row padding rhythm inside share-card */
body.export #share-card .share-metrics-row{
  padding: 2px 2px 1px 2px;
  margin: 0 !important;
}
body.export #share-card > .row:not(.share-metrics-row){
  padding: 1px 2px 10px 2px;
  margin: 0 !important;
}

/* EXPORT: FLEX HEIGHT ALLOCATION */
body.export #share-card .export-brand{ flex: 0 0 auto !important; }
body.export #share-card .share-metrics-row{ flex: 0 0 auto !important; }
body.export #share-card .share-chart-row{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Chart container fills remaining space */
body.export #share-card .share-chart-row > .col{
  height: 100% !important;
  min-height: 0 !important;
}
body.export #share-card .share-chart-row .card{
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.export #share-card .share-chart-row .card-body{
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body.export #share-card .share-chart-row .chart{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
}
body.export #share-card .share-chart-row canvas{
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Export-only brand strip */
#share-card .export-brand{ display: none; }
body.export #share-card .export-brand{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: #0f172a;
  color: #fff;
}

/* Font Awesome integrity */
body.export #share-card .fa,
body.export #share-card .fas,
body.export #share-card .fa-solid{
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
body.export #share-card .far{
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
}
body.export #share-card .fab{
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* Ensure icons show (no clipping) */
body.export #share-card .icon-broker i,
body.export #share-card .icon-manual i{
  line-height: 1;
  font-size: 0.7rem;
  color: inherit;
}

/* Export: Title + Credibility Rows */
body.export #share-card .share-title-row{
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding-left: var(--share-inset-x) !important;
  padding-right: var(--share-inset-x) !important;
  padding-top: 5px;
  padding-bottom: 0;
}

body.export #share-card .share-title{
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
  line-height: 1.12;
  font-size: 1.15rem;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.export .share-cred-row{
  flex: 0 0 auto !important;
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: nowrap;

  padding-left: var(--share-inset-x) !important;
  padding-right: var(--share-inset-x) !important;

  margin: 0 !important;
}

body.export .share-cred-meta{
  font-size: .70rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.export .share-cred-row .ss-badge{
  font-size: .64rem;
  padding: .26rem .50rem;
}

/* Print safeguard */
@media print{
  html, body{ margin: 0 !important; padding: 0 !important; }
  .navbar, .sidenav, .footer, .modal, .alert-container{ display: none !important; }
}

/* ======================================================
   TRUST LOGO BELT (homepage)
   ====================================================== */

.logo-belt-mask{
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.logo-belt{
  display: inline-flex;
  gap: 2rem;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: belt-scroll 20s linear infinite;
}

.logo-belt .trust-logo{
  filter: grayscale(1) brightness(0.9);
  opacity: 0.85;
  transition: opacity .15s ease, filter .15s ease;
  max-height: 28px;
  max-width: 160px;
}

.logo-belt .trust-logo:hover{
  opacity: 1;
  filter: grayscale(0) brightness(1);
}

@keyframes belt-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .logo-belt{ animation: none; }
}

@media (max-width: 576px){
  .logo-belt .trust-logo{ max-height: 24px; }
}

/* ======================================================
   ULTRA-WIDE SCREEN CAP (LEFT aligned)
   ====================================================== */

@media (min-width: 1400px){
  .container-fluid.py-1.px-1{
    max-width: 1500px;
    margin-left: 0;
    margin-right: auto;
  }
}