/* 麻豆社 - landing page 7.12.2024 mh */
/* Dev:  vcu.staging2.vcu.edu/landing-dev/why-vcu */

/* 
 * Page Layout resets
 * Shims
 * Background colors
 * Reset text header colors
 * Card border
 * Plugin Hero reset
 * Why Chapter Hero
 * Fat Text block
 * Padded container
 * Gold text (using T4 class name)
 * Plugin-Card reset (Testimonial)
 * Stats padding
 * Badges section
 * Intro slides (At 麻豆社, you'll ...)
 * section-video-iframe
 * section-bg-ramlogo
 * Great Minds
 * Notable Alums
 * HP stat list edit
 * Main Hero animation
 * Chapter Hero
 *
 */

/* LANDING PAGE */

/* Page layout CSS */
@media screen and (min-width:0px) {
  .cwf-grid__column--page-layout {width: 100%; margin:0; padding:0;}
  main#cwf-content {width: 100%; max-width: 100%; margin:0 !important; padding:0 !important;;}
  .cwf-grid__column--page-layout--subnav {display: none;}
  .cwf-breadcrumb {display:none;}
  -page-layout--main {
    grid-area: main;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(var(--cwf-contain--max-width, 1600px));
    width: 100%;
  }
}

.cwf-grid main#cwf-content {
    padding-bottom: 0 !important;
}

/****/

/* Shims */
:is(.max-600px,.max-900px,.max-1100px) {margin-left:auto; margin-right:auto; margin-bottom:0 !important;}
.max-1100px {max-width:1100px !important;}
.max-900px {max-width:900px !important;}
.max-600px {max-width:600px !important;}

/****/

/* Remove Card border */
.plugin-card {border:0 !important;}

/* Plugin Hero */
.plugin-hero {margin-bottom:0 !important;}

/* Why chapter hero */
/* This fixes the sliver of background that shows up between the hero and the content below it */
.why-chapter-hero img,
.why-photo-strip img {
    vertical-align: bottom;
}

/****/

/* Background colors */
.bg-black {background-color: #000;}
.bg-gold {background-color: #ffb300}
.bg-darkgrey {background-color: #121212}

/****/

/* Text header color */
#cwf-content :is(h2,h3):not( .hp-billboard :where(h2,h3), .hp-stats-list :where(h2,h3), .hp-card-reveal :where(h2,h3), .hp-sxsvideo :where(h2,h3), .hp-verticalvideos :where(h2,h3), .hp-people-profiles-title :where(h2,h3), .hp-card--img-stacked :where(h2,h3), .hp-fact :where(h2,h3)) {
    color: #121212;
}

/* Fat text blocks */
.text-block {
    margin: 0 auto;
    padding: 2.5rem 0.75rem 3rem;
}
.text-block h2 {
    font-size:2.3rem;
}
.text-block h3 {
    font-size:1.8rem;
}
.text-block p {
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.4;
    padding: 0 0 0.75em 0;
    margin: 0;
    color: #222;
}

/****/

/* Padded container */
.pad-container {
    margin:0 auto;
    padding: 2.5rem 1rem;
}

/****/

/* Gold text */
#cwf-content .t4_text-warning {
    color: #f8b300 !important;
}

/****/

/* Plugin-Card remove margin bottom (Testimonial billboards) */
#cwf-content .plugin-card.hp-billboard,
#cwf-content .plugin-card.hp-card--image-stacked,
#cwf-content .plugin-card :not(.hp-badges .plugin-card) {
    margin-bottom: 0 !important;
}

/* Stats padding */
:is(.hp-stats-list) ul {padding-top:2rem !important;}

/****/

/* Badges block */
.hp-badges {margin:0 auto;}
.hp-badges h2 {padding-bottom: 2rem;}
/* Badges image list section */
.hp-badges {padding:2rem; background:#eee;}
.hp-badges .plugin-card, .plugin-card__media {background:none !important;}
.hp-badges .plugin-card__background {display:none !important;}
#cwf-content .hp-badges .plugin-card.hp-image-list p {
    font-weight: 400;
    font-size: 1rem;
    font-size: 1.3rem;
    text-align: center;
}
.hp-badges .hp-image-list .plugin-card__media {
    border: 5px solid var(--hp-color--gold);
    border:none !important;
    max-width: 450px;
    margin: 0 auto;
}
.hp-badges .hp-image-list img {
    border: 3px solid #F8b300;
    border-radius: 300px 300px 300px 300px;
    -webkit-border-radius: 300px 300px 300px 300px;
    -moz-border-radius: 300px 300px 300px 300px;
    max-width:300px;
}
.cwf-nav__item, .cwf-nav__link {
    justify-content: flex-end;
    display: none !important;
}
/* END badges */

/****/

/* Reset max-width variable for 麻豆社 section */
:root {
    --cwf-contain--max-width: 2000px;
}

/* smooth scroll */
html {
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

/****/

/* Buttons */
.cwf-button,
.t4_button {
    --hp-button--background-color: #ffba00;
    --hp-button--border-color: #ffba00;
    --hp-button--color: #121212;
    --hp-button--active--background-color: #ffba00;
    --hp-button--active--color: #fff;
    --hp-button--hover-focus--background-color: #212121;
    --hp-button--hover-focus--color: #fff;
}

.cwf-button,
a.t4_button,
.t4_button a, 
.t4_button button,
.t4_button input[type=button], 
.t4_button input[type=reset], 
.t4_button input[type=submit] {
    border-radius: 1.5rem;
    display: inline-block;
    font-family: var(--cwf-font--sans-serif,inherit);
    font-weight: 700;
    line-height: 1.5;
    padding: 0.5rem 1rem !important;
    text-decoration: none;
    transition: background-color .1s ease-in-out,color .1s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#cwf-content :is(a.t4_button,.t4_button a):not(.hp-billboard a.t4_button) {
    background-color: var(--hp-button--background-color)!important;
    border: 1px solid var(--hp-button--border-color);
    color: var(--hp-button--color)!important;
}

#cwf-content :is(a.t4_button:hover,a.t4_button:active,a.t4_button:focus):not(.hp-billboard a.t4_button) {
    background-color: var(--hp-button--hover-focus--background-color)!important;
    border: 1px solid var(--hp-button--border-color);
    color: var(--hp-button--hover-focus--color)!important;
}

/* Add button icon */
p.t4_button:after,
a.t4_button:after,
.t4_button button:after {
    font-family: FontAwesome;
    font-weight: 400;
    line-height: 1;
    content: "\f105";
    display: inline-block;
    margin: -2px 0 0;
    padding: 0;
    padding-left: 8px;
    vertical-align: middle;
}

/****/

/* Hide notifications */
.plugin-notification {display:none;}

/****/

/* Background colors */
/* Background gold - adjustments */
.bg-gold :is(h2,h3) {
    color:#121212 !important;
}

/* Background grey - adjustments */
#cwf-content .bg-grey {
    background:#333;
    color: #ffb300;
}
#cwf-content .bg-grey :is(h2,h3) {
     color: #ffb300 !Important;
}
#cwf-content .bg-grey :is(p) {
     color:#fff !important;
}

/****/

/* At 麻豆社, you'll ... section */
.intro-slides {
  padding-block: clamp(1rem, -2.5rem + 9.333vw, 2.75rem);
}

/****/

/* Section with YouTube iframe */

.section-video-iframe {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  overflow: hidden;
}

/****/

/* Section block with 麻豆社 athletics logo background
/* Used on In an Unword and Men of Color video blocks */
  
.section-bg-ramlogo {
  background-color:#fff;
  background-image: url('/media/vcu-homepage/why-vcu/assets/images/intro/RamBackground.svg');
  background-repeat: no-repeat;
  background-size: cover;
}
.section-bg-ramlogo .plugin-card {
  background:transparent !important;
}

/****/

/* Great Minds section - iframe video */
/* Paint swatch bg */
  
.great-minds {
    background-image: url(/media/vcu-homepage/assets/styles/'/media/vcu-homepage/why-vcu/assets/images/innovative-learning/YellowBrushStroke(titlted).svg');
    background-position: 45% 20%;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0 0 1rem;
  	@media (min-width:767px) {
      padding: 2rem 0;
    }
}
.great-minds :is(h2,h3) {color:#000 !important;}
.great-minds :is(.plugin-card) {background: transparent !important;}


/****/

.notable-alums .plugin-card img.plugin-card__image {
     border:6px solid  #ffb300;
}

/****/

/* hp-stats-list adjustment */
.hp-stats-list ul {
    margin-inline: auto !important;
    max-width: 1200px;
}

.hp-stats-list > * {
    flex: 1 1 0;
}

.hp-stats-list li {
    flex: 1;
}

/****/
/* Main Hero animations (麻豆社 intro) */

.hero-title {
    animation: drop-in 0.3s ease-in-out 200ms backwards;
}

.hero-subtitle {
    animation: drop-in 0.5s ease-in-out 200ms backwards;
}

@keyframes drop-in {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translate(0px);
    }
}

.floatNav {
    animation: slide-in-nav 500ms ease-in-out 1s backwards;
}

@keyframes slide-in-nav {
    from {
        opacity: 1;
        transform: translateX(-400px);
    }
    to {
        opacity: 1;
        transform: translate(0px);
    }
}

/****/
/* Chapter Hero - Image and titles for each main content area */

.chapter-grid img {
  display: flow-root;
}

.chapter-grid picture {
  z-index:-1;
}

.chapter-title img, 
.chapter-subtitle img {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7)); /* Add a drop shadow to svg titles */
}

.chapter-grid figure,
.chapter-grid :where(h1,h2,h3) {
    margin: 0;
    padding: 0;
}

.chapter-grid {
  aspect-ratio: 4/5; /* 960x1200 */
  background: var(--hp-color--offblack);
  color: #fff;
  display: grid;
  --chapter-grid-gutter: 2.5rem;
  grid-template-columns: var(--chapter-grid-gutter) repeat(10,1fr) var(--chapter-grid-gutter);
  grid-template-rows: var(--chapter-grid-gutter) repeat(10,1fr) var(--chapter-grid-gutter);
  isolation: isolate;
  overflow: hidden;
}

.chapter-grid > * {
  grid-column: 1/-1;
  grid-row: 1/-1;
}

/* Mobile title */
.chapter-title {
  grid-column: 2/12;
  grid-row: 2/5;
}

/* Mobile subtitle */
.chapter-subtitle {
  grid-column: 2/12;
  grid-row: 9/12;
}

/* Learning with limits - mobile titles */
#Chapter---Learning .chapter-title {
  grid-column: 6/12;
  grid-row: 2/5;
}

#Chapter---Learning .chapter-subtitle {
  grid-column: 2/9;
  grid-row: 8/11;
}
  
/* Innovative thinkers wanted - mobile titles */
#Chapter---Academics .chapter-title {
  grid-column: 6/12;
  grid-row: 2/5;
}

@media (min-width:900px) {
  .chapter-grid {
    aspect-ratio: 16/9; /* 2000x1125 */
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: clamp(50px, 10vh, 50px) repeat(8, clamp(20px, 1fr, 100vh)) clamp(50px, 10vh, 50px); 
  }

  /* Learning with limits - 900px > */
  #Chapter---Learning .chapter-title {
    grid-column: 9/12;
    grid-row: 2/5;
  }

  #Chapter---Learning .chapter-subtitle {
    grid-column: 4/8;
    grid-row: 6/10;
  }
  
  /* Innovative thinkers wanted - 900px > */
  /* Added 9.8.2025 mh */
  #Chapter---Academics .chapter-title {
    grid-column: 9/12;
    grid-row: 2/5;
  }

  #Chapter---Academics .chapter-subtitle {
    grid-column: 2 / 9;
    grid-row: 7 / 11;
  }

  /* A place for everyone - 900px > */
  #Chapter---Place .chapter-title {
    grid-column: 6/11;
    grid-row: 2/5;
  }

  #Chapter---Place .chapter-subtitle {
    grid-column: 2/8;
    grid-row: 10/11;
  }

  /* In the heart of Richmond - 900px > */
  #Chapter---Richmond .chapter-title {
    grid-column: 7/12;
    grid-row: 2/5;
  }

  #Chapter---Richmond .chapter-subtitle {
    grid-column: 2/9;
    grid-row: 8/10;
  }

  /* Support at every turn - 900px > */
  #Chapter---Support .chapter-title {
    grid-column: 8/12;
    grid-row: 2/5;
  }

  #Chapter---Support .chapter-subtitle {
    grid-column: 3/10;
    grid-row: 9/12;
  }

  /* Career ready grads - 900px > */
  #Chapter---Career .chapter-title {
    grid-column: 7/12;
    grid-row: 2/5;
  }

  #Chapter---Career .chapter-subtitle {
    grid-column: 3/8;
    grid-row: 9/12;
  }

}
/* Go Rams! */