/* investing-budgeting.css
   Page-specific layout and card rules that extend your styles.css
*/

:root {
    --page-gap: 20px;
    --mini-card-height: 106px; /* adjust if you want a different small-card height */
    --mini-gap: 12px;
  }
  
  /* Grid: three columns that collapse 3->2->1 */
  .three-col-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--page-gap);
    align-items: start;
    margin-top: 16px;
  }
  
  /* Column wrapper */
  .column {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .section-title {
    font-size: 2rem;
    margin: 0 0 12px;
    color: var(--dark-green);
  }

  .card-title { font-size: 1.05rem; margin: 0; color: var(--dark-green); }
  .card-meta { font-size: 0.9rem; color: #7a8481; }
  
  
  /* enforce fixed height for mini cards */
 /* Mini card (fixed height using variable) */
.mini-card {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid #d9e8e0;
    padding: 10px;
    text-decoration: none;
  
    /* enforce fixed height for mini cards */
    height: var(--mini-card-height);
    min-height: var(--mini-card-height);
    max-height: var(--mini-card-height);
    overflow: hidden;
  }
  
  
  /* keep thumbnail square and aligned */
 /* Thumbnail: account for vertical padding (10px top + 10px bottom = 20px) */
.mini-thumb {
    width: calc(var(--mini-card-height) - 20px);
    height: calc(var(--mini-card-height) - 20px);
    border-radius: 8px;
    overflow: hidden;
    background: #f3f5f4;
    flex: 0 0 calc(var(--mini-card-height) - 20px);
  }
  
  
  .mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .mini-body { display:flex; flex-direction:column; gap:6px; }
  .mini-title { font-size: 0.95rem; margin: 0; color: var(--dark-green); }
  .mini-tags { font-size: 0.85rem; color: #7a8481; }
  
  /* Tag bar chips (visual) */
  .tag-bar { display:flex; gap:12px; align-items:center; margin:12px 0 24px; flex-wrap:wrap; }
  .tag-bar input { padding:8px 10px; border-radius:8px; border:1px solid #e6eef0; min-width:220px; }
  .chips { display:flex; gap:8px; flex-wrap:wrap; }
  .chip { background:#fff; border:1px solid #e6eef0; padding:6px 10px; border-radius:999px; cursor:pointer; font-size:14px; color:#0b1220; }
  .chip.active { background:var(--mint); color:var(--dark-green); border-color:transparent; box-shadow:0 2px 8px rgba(15,157,142,0.08); }
  
  /* Responsive */
  @media (max-width: 1000px) {
    .three-col-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .three-col-grid { grid-template-columns: 1fr; }
    /* large card first on mobile: markup already places large card first in each column */
  }
  
  /* Results grid: full-width large-card layout when filtering */
#filter-results { margin-top: 12px; }
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1000px) {
  .results-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .results-grid { grid-template-columns: 1fr; }
}
.results-grid .card-link { text-decoration: none; color: inherit; }

.hidden { display: none !important; }

.hero { 
    padding-top: 18px; /* smaller top spacing */ 
    padding-bottom: 9px; /* smaller bottom spacing */ 
}

.clearTags { background: var(--light-grey); border:1px solid #e6eef0; padding:6px 10px; border-radius:999px; cursor:pointer; font-size:14px; color:#0b1220; }

/* Tighten vertical spacing for the tag-bar section */
.section--tight {
    padding-top: 10px;    /* optional: reduce top spacing */
    padding-bottom: 12px; /* smaller bottom spacing you requested */
  }
  
  /* Slightly tighter on small screens */
  @media (max-width: 720px) {
    .section--tight {
      padding-top: 0px;
      padding-bottom: 0px;
    }
  }
  
  /* Make card links look like plain cards (no blue/underline) */
.card-link {
    display: block;              /* ensure the whole card is clickable */
    color: inherit;              /* use card text color, not link color */
    text-decoration: none;       /* remove underline */
    cursor: pointer;             /* still indicate clickability */
  }
  
  /* Prevent headings inside links from inheriting browser link color */
  .card-link .card-title,
  .card-link .mini-title {
    color: var(--dark-green);
    text-decoration: none;
  }
  
  /* Remove default focus outline but keep an accessible visible focus state */
  .card-link:focus {
    outline: none;
  }
  .card-link:focus-visible {
    outline: 3px solid rgba(72, 160, 130, 0.18); /* soft mint focus ring */
    outline-offset: 4px;
    border-radius: 12px;
  }
  
  /* Hover affordance: subtle lift and shadow instead of underline */
  .card-link:hover .insights-card,
  .card-link:hover .mini-card {
    transform: translateY(-4px);
    box-shadow: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  
  /* Ensure images don't show default broken-link styling and fill their containers */
  .card-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* If you have text links inside card copy that should still look like links,
     target them explicitly (keeps inline links visible while card wrapper is neutral) */
  .card-link .inline-link {
    color: var(--dark-green);
    text-decoration: underline;
  }
  
  /* Optional: remove pointer cursor for non-clickable elements inside card */
  .card-link .no-click {
    cursor: default;
  }
  
  /* predictable sizing */
*, *::before, *::after { box-sizing: border-box; }

/* fixed card height remains as you have it */
.insights-card {
  width: 100%;
  height: calc(var(--mini-card-height) * 4 + var(--mini-gap) * 3);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #d9e8e0;
  background: var(--white);
}

.insights-card-middle {
    width: 100%;
    height: calc(var(--mini-card-height) * 3 + var(--mini-gap) * 2);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #d9e8e0;
    background: var(--white);
  }

.insights-card-small {
    width: 100%;
    height: calc(var(--mini-card-height) * 2 + var(--mini-gap) * 1);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #d9e8e0;
    background: var(--white);
  }

/* FIXED image area: integer px avoids subpixel differences */
.insights-card-image {
  height: 240px;           /* set the exact image height you want */
  flex: 0 0 240px;         /* prevents image area from growing/shrinking */
  overflow: hidden;
  background: #f5f7f6;
  position: relative;
}
.insights-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.insights-card-image-middle {
    height: 180px;           /* set the exact image height you want */
    flex: 0 0 180px;         /* prevents image area from growing/shrinking */
    overflow: hidden;
    background: #f5f7f6;
    position: relative;
  }

.insights-card-image-small {
    height: 120px;           /* set the exact image height you want */
    flex: 0 0 120px;         /* prevents image area from growing/shrinking */
    overflow: hidden;
    background: #f5f7f6;
    position: relative;
  }
.insights-card-image-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bond card: smaller image without changing other cards */
.insights-card-image-bond {
  height: 80px;
  flex: 0 0 80px;
  overflow: hidden;
  background: #f5f7f6;
  position: relative;
}
.insights-card-image-bond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* card body takes remaining space and won't push the image */
.insights-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 auto;
  overflow: hidden;
}


/* title: clamp to 2 lines to keep consistent density */
.card-title {
  margin: 0 0 8px 0;
  font-size: 1.05rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* description: clamp to 3 lines with pixel fallback */
.card-desc,
.insights-card-body .description,
.insights-card-body p {
  margin: 0;
  color: #7a8481;
  font-size: 0.95rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;           /* visible lines */
  overflow: hidden;
  text-overflow: ellipsis;
  /* fallback for non-supporting browsers */
  max-height: calc(1.4em * 3);
}

/* responsive: reduce image height and clamp lines on small screens */
@media (max-width: 720px) {
  .insights-card-image {
    height: 180px;
    flex: 0 0 180px;
  }
  .card-title { -webkit-line-clamp: 2; }
  .card-desc, .insights-card-body .description, .insights-card-body p {
    -webkit-line-clamp: 2;
    max-height: calc(1.4em * 2);
  }
}

@media (max-width: 720px) {
    /* Reduce vertical padding inside the hero copy so the title sits closer */
    .hero .hero-inner {
      padding-top: 8px;
      padding-bottom: 0px;
    }
  
    .hero .hero-copy {
      padding-right: 0; /* ensure copy uses full width when visual is hidden */
    }
  
    /* Reduce title spacing and size */
    .hero .hero-title {
      margin: 0 0 6px 0;    /* smaller bottom margin */
      font-size: 1.5rem;   /* scale down heading on mobile */
      line-height: 1.12;
    }
  
    .hero .hero-subtitle {
      margin: 0 0 10px 0;
      font-size: 0.95rem;
      line-height: 1.35;
    }
  
    /* Hide the hero visual entirely on mobile */
    .hero .hero-visual,
    .hero .hero-visual img {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      width: 0 !important;
    }
  
    /* Make hero CTA buttons smaller and tighter while keeping tappable area */
    .hero .hero-ctas .btn,
    .hero .btn {
      padding: 6px 10px !important;
      font-size: 0.9rem !important;
      line-height: 1;
      min-height: 36px;      /* keep touch target accessible */
      border-radius: 8px;
    }
  
    /* If CTAs are inline, stack them with small gaps for mobile */
    .hero .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
  }
  
  @media (max-width: 720px) {
    /* tighten the overall tag-bar spacing on mobile */
    .tag-bar {
      gap: 10px;               /* slightly smaller gap between input and chips */
      margin: 10px 0 16px;     /* reduce vertical spacing */
    }
  
    /* make the chips form three columns */
    .tag-bar .chips {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px 8px;            /* row-gap then column-gap */
      align-items: start;
    }
  
    /* scale down the visual chips only (keeps input untouched) */
    .tag-bar .chip {
      padding: 4px 5px;        /* top/bottom 4px, left/right 6px */
      font-size: 11px;         /* slightly smaller text */
      border-radius: 999px;    /* keep pill shape */
      min-height: 32px;        /* keep tappable area accessible */
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  
    /* slightly smaller active chip appearance (optional) */
    .tag-bar .chip.active {
      box-shadow: 0 1px 6px rgba(15,157,142,0.06);
    }
  
    /* if chips contain icons, scale them down */
    .tag-bar .chip svg,
    .tag-bar .chip img {
      width: 14px;
      height: 14px;
      margin-right: 6px;
      flex: 0 0 14px;
    }
  
    /* keep the search input width and padding as-is (explicitly override any global mobile rules) */
    .tag-bar input {
      min-width: 220px;        /* unchanged */
      padding: 8px 10px;       /* unchanged */
    }
  }
  
  @media (max-width: 720px) {
    /* Apply middle-card spec to insights-card on mobile */
    .insights-card {
      width: 100%;
      height: calc(var(--mini-card-height) * 3 + var(--mini-gap) * 2);
      display: flex;
      flex-direction: column;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid #d9e8e0;
      background: var(--white);
      box-sizing: border-box;
    }
  
    /* Image area: exact 180px as in your spec */
    .insights-card .insights-card-image,
    .insights-card-image-middle {
      height: 180px;
      flex: 0 0 180px;
      overflow: hidden;
      background: #f5f7f6;
      position: relative;
    }
  
    .insights-card .insights-card-image img,
    .insights-card-image-middle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Small card image on mobile */
    .insights-card-image-small {
      height: 120px;
      flex: 0 0 120px;
      overflow: hidden;
      background: #f5f7f6;
      position: relative;
    }

    /* Bond card image on mobile */
    .insights-card-image-bond {
      height: 80px;
      flex: 0 0 80px;
      overflow: hidden;
      background: #f5f7f6;
      position: relative;
    }
  
    .insights-card-image-small img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .insights-card-image-bond img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  
    /* Body fills remaining space with tighter mobile padding */
    .insights-card .insights-card-body {
      padding: 10px 12px;
      gap: 0.4rem;
      flex: 1 1 auto;
      overflow: hidden;
      box-sizing: border-box;
    }
  
    .insights-card .card-title {
      margin: 0 0 8px 0;
      font-size: 1.05rem;
      line-height: 1.15;
    }
  
    .insights-card .muted,
    .insights-card .card-desc {
      margin-top: 6px;
      font-size: 0.95rem;
      line-height: 1.35;
    }
  }
  
  @media (max-width: 720px) {
    /* Scope to Personal Wealth so other sections are unaffected */
    #personal-wealth {
      --mobile-image-h: 180px;
      --mobile-total-h: calc(var(--mini-card-height) * 3 + var(--mini-gap) * 2);
    }
  
    /* Target the marked card (anchor-wrapped or mini-card-marked) */
    #personal-wealth .large-on-mobile > .mini-card,
    #personal-wealth .large-on-mobile.mini-card,
    #personal-wealth .large-on-mobile .mini-card {
      width: 100% !important;
      height: var(--mobile-total-h) !important;
      display: flex !important;
      flex-direction: column !important;
      border-radius: 16px !important;
      overflow: hidden !important;
      border: 1px solid #d9e8e0 !important;
      background: var(--white) !important;
      box-sizing: border-box !important;
      padding: 0 !important;
    }
  
    /* Make the mini-thumb behave like insights-card-image */
    #personal-wealth .large-on-mobile .mini-thumb {
      height: var(--mobile-image-h) !important;
      flex: 0 0 var(--mobile-image-h) !important;
      overflow: hidden !important;
      background: #f5f7f6 !important;
      position: relative !important;
      width: 100% !important;
    }
    #personal-wealth .large-on-mobile .mini-thumb img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
    }
  
    /* Convert mini-body into the insights-card body */
    #personal-wealth .large-on-mobile .mini-body {
      padding: 10px 12px !important;
      gap: 0.4rem !important;
      flex: 1 1 auto !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
    }
  
    /* Title / meta sizing to match insights-card */
    #personal-wealth .large-on-mobile .mini-title {
      margin: 0 0 8px 0 !important;
      font-size: 1.05rem !important;
      line-height: 1.15 !important;
      font-weight: 600 !important;
    }
    #personal-wealth .large-on-mobile .mini-tags {
      margin-top: 6px !important;
      font-size: 0.95rem !important;
      line-height: 1.35 !important;
      color: #6b7a76 !important;
    }
  
    /* Ensure the section stacks vertically on mobile and other mini-cards remain compact */
    #personal-wealth .three-col-grid {
      grid-template-columns: 1fr !important;
      gap: 16px !important;
    }
    #personal-wealth .three-col-grid > .column {
      grid-column: 1 / -1 !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
    #personal-wealth .three-col-grid .mini-card {
      width: 100% !important;
      min-height: var(--mini-card-height) !important;
      box-sizing: border-box !important;
    }
  }
  
  @media (max-width: 720px) {
    /* ensure the large-on-mobile mini-card can grow beyond the small-card cap */
    #personal-wealth .large-on-mobile > .mini-card,
    #personal-wealth .large-on-mobile.mini-card,
    #personal-wealth .large-on-mobile .mini-card {
      /* allow the card to expand beyond the base mini-card cap */
      min-height: var(--mobile-total-h) !important;
      max-height: none !important;
      height: var(--mobile-total-h) !important; /* keep your existing height */
    }
  
    /* if you want the .mini-card to size by content instead of a fixed total,
       replace the three lines above with:
       min-height: var(--mobile-total-h) !important;
       max-height: none !important;
       height: auto !important;
    */
  }
  
/* ---------- Nav: consolidated styles ---------- */


  /* Fixed-width hero visual container */
  .hero-visual {
    width: 380px;
    max-width: 100%;
    height: 260px;            /* fixed visual height */
    box-sizing: border-box;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #d6efe4;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    position: relative;
  }
  
  .hero-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;        /* fills and crops to fit */
    object-position: center;  /* adjust focal point if needed */
    border-radius: 24px;
  }