/* =========================================================================
   8-ipad-home.css  (CV-3003)
   Bring the homepage tablet range (768-1024px, e.g. iPad Air 820x1180) in
   line with production. At this range staging was falling through to the
   DESKTOP layout; prod uses the stacked / single-column tablet treatment.

   Additive only. Enqueued AFTER vestfin-overrides.css so source order wins.
   Scoped tightly to the homepage section wrappers. No markup needed: the
   prod-matching stacked layout already exists in the DOM
   (.vertical-tabs__mobile-stack) but is gated to <=767px; we extend that
   gate through the tablet range.
   ========================================================================= */

.tf__grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(6, 1fr);
}
.tf__item--rect {
    grid-column: span 3;
}
.tf__item--square {
    grid-column: span 2;
}
.tf__item {
    align-items: flex-start;
    background: #f4f4ef;
    display: flex;
    flex-direction: column;
    padding: 24px;
    text-align: left;
}
.tf__item-media {
    height: 32px;
    margin-bottom: 12px;
}
.tf__item-media img {
    height: 32px;
    width: 32px;
}

.vestfin-homepage-tabs .vertical-tabs__description .tf__item-title, .vestfin-homepage-tabs .vertical-tabs-mobile-panel__detail .tf__item-title {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}
.vestfin-homepage-tabs .vertical-tabs__description .tf__item-desc, .vestfin-homepage-tabs .vertical-tabs-mobile-panel__detail .tf__item-desc {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    margin: 8px 0 0 !important;
}
@media (max-width: 689px) {
	.tf__grid {
		gap: 8px;
		grid-template-columns: repeat(2, 1fr);
	}
	.tf__item--rect:first-of-type {
		grid-column: 1 / -1;
	}
	.tf__item--rect:nth-of-type(2), .tf__item:nth-of-type(3), .tf__item:nth-of-type(4), .tf__item:nth-of-type(5) {
		grid-column: span 1;
	}
	.tf__item {
		padding: 12px;
	}
}
@media (min-width: 900px){
	.vestfin-homepage-hero .page-hero__title {
		font-size: 68px !important;
		line-height: 82px !important;
	}
	
	.vestfin-homepage-hero .page-hero__subtitle {
		font-size: 24px !important;
		max-width: 56% !important;
	}
	
	
}

@media (min-width: 768px) and (max-width: 899px) {

  /* ---- Hero: stat counters -------------------------------------------
     Prod stacks the four hero stat counters ($61B+, 300+, 13, 1) as
     full-width vertical rows, each keeping its left amber accent bar.
     Staging kept the desktop 4-column flex row, which crammed labels into
     tall thin columns. Switch .aum__cards to a single column. The cards
     already carry border-l-4 (the accent bar) and flex-col, so stacking
     them reproduces the prod treatment exactly. */
	.vestfin-homepage-hero .aum__cards {
		/*     flex-direction: column !important; */
		/*     gap: 28px !important; */
	}
	.vestfin-homepage-hero .aum__card {
		/*     width: 100%; */
	}

  /* ---- Hero: CTA buttons ---------------------------------------------
     Prod stacks the two hero CTAs (Explore Strategies / Let's Talk
     Outcomes) as full-width buttons. Staging kept them side-by-side
     (.page-hero__slot is flex-direction:row). Stack them and let each
     button fill the row. */
	.vestfin-homepage-hero .page-hero__slot {
		flex-direction: column !important;
	}
	.vestfin-homepage-hero .page-hero__slot > .app-button {
		width: 100%;
	}
	.vestfin-homepage-hero .page-hero__title {
		font-size: 40px !important;
		line-height: 48px !important;        
		max-width: 56%;
	}
	
	.vestfin-homepage-hero .page-hero__subtitle {
		font-size: 20px !important;
		max-width: 55% !important;
	}
	.vestfin-homepage-hero {
		background-size: 40% auto !important;
	}
  /* ---- Strategies section --------------------------------------------
     Theme switches to the per-strategy STACKED card layout only at
     <=767px. The iPad (820) therefore got the cramped desktop
     "vertical tabs" two-column tab interface (narrow left rail + single
     visible tab). Prod shows every strategy as a full-width stacked card
     with its chart inline. Reveal the existing mobile stack and hide the
     desktop tab body across the tablet range, mirroring the theme's own
     <=767px rules. */
  .vestfin-homepage-tabs .vertical-tabs__body {
	  /*     display: none !important; */
  }
  .vestfin-homepage-tabs .vertical-tabs__mobile-stack {
	  /*     display: flex !important; */
	  flex-direction: column;
	  margin-top: 18px;
	  background: #f4f4ef;
  }
	.vertical-tabs__sidebar {
		width: 32% !important; 
	}

  /* ---- Built for outcomes (.usp) -------------------------------------
     Prod stacks these four cards in a single column at tablet width;
     staging used the md: two-column grid. Match prod with one column. */
  .usp .usp__list {
    grid-template-columns: 1fr !important;
  }
}
@media only screen and (max-width: 899px) {
    .section-title-home {
        font-size: 30px !important;
        line-height: 44px !important;
	}
	.additional-resources {
		padding-bottom: 60px;
	}
	#additional-resources .ar-slider__btn img {
		width: 28px !important;
		height: 28px !important;
	}
	.vestfin-homepage-hero .aum__cards {
		flex-direction: column !important;
		gap: 28px !important;
	}
	.vestfin-homepage-hero .aum__card {
		width: 100%;
	}
	
	.vertical-tabs .vertical-tabs__mobile-stack .vertical-tabs-mobile-panel:last-child .vertical-tabs-mobile-panel__footnote {
		display: none;
	}
	
	#built-for-outcome .usp__item-title {
		font-size: 18px;
		line-height: 32px;
		margin-bottom: 8px;
	}
	#built-for-outcome .usp__item-desc {
		font-size: 14px;
		line-height:  26px;
	}
	
	#built-for-outcome .usp__item {
		padding: 24px;
	}
}

@media only screen and (max-width: 789px) {
	.ar-slider {
		padding-bottom: 50px;
	}
    .ar-slider__nav {
		position: absolute !important;
        bottom: -15px;
        left: 50%;
        transform: translate(-50%);
    }
}