/* VCU merchandise landing page */
/* URL: swag.vcu.edu */
/* mhuff 8.28.2024 */
:root {
  --cwf-contain-max-width: 2000px;
  --cwf-grid--padding: 0;
  --cwf-grid--margin: 0;
  --feature-max-width: 100%;
  --main-max-width: 1200px;
  --main-content-max-width: 850px;
  --clr-light-gray: #f8f8f8;
  --clr-med-gray: #ddd;
}

/* Note: Body bg color and bg img is set inline on homepage in that page's content */

img {
  height: auto;
  max-width: 100%;
}
  
/* Button text */
.t4_button {
    text-transform: uppercase;
}
  
/* Border bottom on <aside> cwf-area--feature */
.cwf-area--feature {
  border-bottom: 1px solid #ffb300;
}
  
/* Layout areas:
   .feature-container = Hero area
   .area-main = Text section in Hero area
   .area-photo = Big photo in Hero area
   .area-main--link-one and --link-two = Big links below text section in Hero area
   .area-secondary = Smaller img links below big photo
   .area-body = Copy in the <main> area
   .licenseplate-container = Section above footer in <aside>
*/

/* Feature content - Hero area and image links section */
.feature-container {
  display: grid;
  grid-template-columns: 1.5em 1fr 1em 1fr 1.5em;
  grid-template-rows: 15em 1fr auto auto auto .35em;
  gap: 1em;
  grid-auto-flow: row;
}

.feature-container {
  max-width: 2000px;
  margin: 0 auto;
}

/* Images links - set background */
.feature-container a {
  background: #000;
  display: inline-block;
  line-height: 0;
}

/* Image links - add border */
.feature-container a img {
  border: 5px solid #ffb300;
}

.feature-container a:hover img,
.feature-container a:focus img {
  border: 5px solid #fff;
}

/* Images contained inside <p> - zero-out spacing */
.feature-container p.img-container {
  line-height: 0;
  margin: 0;
  padding: 0;
}

/* Main copy area */
.area-main {
  grid-area: 1 / 2 / 3 / 5;
  align-self: start;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 95%;
  z-index: 2;
  vertical-align: bottom;
  
  align-self: end;
  height: fit-content;
}

/* Main header - tagline image */
.area-main h1 {
  max-width: 95%;
  margin: 0 auto;

  @media(min-width:850px) {
    margin: 0;
    padding: 2em 0 0.5em 0;
  }
}

/* Main area - copy beneath header */
.area-main p {
  margin: 0;
  padding: 0;
  color: #fff;
  /* font-size: clamp(1.5rem, 0.75rem + 1vw, 1.8rem); */
  /*removing clamp from small screen: font-size: clamp(1.375rem, 0.931rem + 2.3679vw, 6rem); */
  
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;

  line-height: 1.2;
}

@media(width <= 850px) {
  .area-main p.mobile-add-word::before {
    content: 'Gear up ';
  }
}
  
.area-main p span {
  display: inline;
  


  @media(min-width:1300px) {
    display: block;
  }
}
  
  /* Expanding link background hover effect */
  .area-main p a {
    color: white;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid #ffba00;
    background: linear-gradient(to bottom, #f8b300 0%, #f8b300 100%);
    background-position: 0 100%;
    background-size: 3px 3px;
    background-repeat: repeat-x;
    transition: background-size 0.3s, color 0.3s;
    
    display: inline;

    padding: 0 0 2px 0;
    
    @media (width <= 850px) {
      font-size: 24px;
    }
  }
  
  .area-main p a:hover, .area-main p a:focus {
    border-bottom: transparent;
    padding: 0 0 2px 0;
    
    background-size: 4px 50px;
    color: black;
  }

.area-main--copy {
  font-size: 1.8rem;
  line-height: 1.2;
  color: #fff;
  padding: 1em 0;
}

.area-main--copy span {
  display: inline;
}

.area-main img {
  display: grid;
  grid-column: auto;
}

.area-main p.img-container {
  margin-top: 1em;
}

.area-main--link-container {
  grid-area: 3 / 2 / 5 / 5;
  gap: 16px;
  display: flex;
  flex-direction: column; 
}
  
/* Primary image link - one */
.area-main--link-one {
  grid-area: 3 / 2 / 4 / 5;
  align-self: start;
}

/* Primary image link - two */
.area-main--link-two {
  grid-area: 4 / 2 / 5 / 5;
  align-self: start;
}

/* Secondary image links container */
.area-secondary {
  grid-area: 5 / 2 / 6 / 5;
  justify-self: center;
  align-items: start;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
}

.area-secondary {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap
}

.area-secondary p {
  flex-basis: auto;
}

.area-secondary p {
  flex-basis: 45%;
}

/* Reset mh 5.9.25 
.feature-container .area-secondary a img,
.feature-container .area-secondary a:hover img,
.feature-container .area-secondary a:focus img {
  border: none;
}
  
.area-secondary a {
  border: 5px solid #ffb300;
  padding: 0.75rem;
}

.area-secondary a:hover,
.area-secondary a:focus {
  border: 5px solid #fff;
}*/

.area-secondary p img {
  max-height: 84px;
  /* mh 5.9.25 */
  object-fit: contain;
}

/* Hero photo image */
.area-photo {
  grid-area: 1 / 1 / 3 / 6;
  background: linear-gradient(180deg, #0000 45%, #0000 55%, #0000 65%, #0000 75%, #000 85%, #000 95%);

}

.area-photo {
  position: relative;
  z-index: 0;
}

.area-photo img,
.area-photo picture img {
  height: 100% !important;
  object-fit: cover;
}

/* Hero photo gradients - top and bottom fade overlay on area-photo */
@media(max-width:850px) {

  .area-photo:before,
  .area-photo:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(180deg, #0000 45%, #0000 55%, #0000 65%, #0000 75%, #000 85%, #000 95%);*/
  }

  .area-photo:before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 38%);
  }

  .area-photo:after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 42%);
  }
}

/* Image container - Set 100% flex width */
/* Sets images to stretch full width of grid cells */
p.img-container {
  display: flex;
}

p.img-container a {
  flex: 1;
}

p.img-container a img {
  width: 100%;
}

/* Body copy in <main> using class .area-body */
/* Reset padding on .cwf-grid, parent of <main> */
.cwf-grid {
  padding: 0 !important;
}

main .area-body {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0.5em 1.5em 1.5em;
}
  
main .area-body,
.licenseplate-container {
  font-size: clamp(0.8rem, 0.5098rem + 2vw, 1.6rem);
  line-height: 1.4;
  color: #fff;
  text-wrap: pretty;
}

main .area-body h1 {
  color: #ffb300;
  font-size: clamp(1.375rem, 0.8098rem + 2.8261vw, 2.5rem);
}
  
main .area-body h2,
.licensepate-container h2 {
  font-size: clamp(1.2rem, 0.8098rem + 2.8261vw, 2rem);
}

main .area-body span {
  color: #ffb300 !important;
}
  
/* .area-body text links */
main .area-body a,
.licenseplate-container a {
    color: var(--cwf-link--color);
    font-weight: 700;
    --cwf-link--color: #ffb300;
    --cwf-link--active--color: #ffb300;
}

main .area-body:is(a:active,a:focus,a:hover),
.licenseplate-container:is(a:active,a:focus,a:hover) {
    color: #ffb300;
    text-decoration: none
}

/* .area-body--license reset link styles */
main .area-body a img.area-body--license-img {text-decoration:none !important;}

/* area-body--license = adjust VCU license plate image size */
main .area-body--license-img {
    max-width: 600px;
    text-align: center;
    padding: 1em 0;
}
  

/* License plate callout block */
/* Content in full-width area above the footer - linking to licenseplates.vcu.edu */
.licenseplate-container {
    display: flex;
    width: min(100%, 1400px);
    gap: 1rem;
    justify-content: space-evenly;
    align-items: center;
    padding: .5rem 1.75rem 4rem;
    margin: 0 auto;
    flex-wrap: wrap;
     @media(min-width:1000px) {
      flex-wrap: no-wrap;
    }
}
  
/* Add flex columns */
.licenseplate-element {
   flex-basis: auto;
   text-align: center;
   color: #fff;
    @media(min-width:1000px) {
      flex-basis:48%;
    }
}
  
/* Set max width on the image */
.licenseplate-element img {
  max-width: 600px;
  width: 100%;
}

/* Add border to t4_button in licenseplate-container */
.licenseplate-container .t4_button :is(a,a:hover) {
  border: 1px solid #ffb300;
}
  
/* .area-body--license reset link styles */
.licenseplate-element a img {text-decoration:none !important;}
  
/***/
  
/* Breakpoints for layout
  * 850px
  * 1000px 
*/
  
/* Breakpoint 850px */
/* Smaller screens grid */
@media (min-width: 850px) {
  .feature-container {
    display: grid;
    grid-template-columns: 2.5em 1fr 1em 1fr 1em;
    grid-template-rows: 15em auto 1fr 1fr 1em 1em;
    gap: 1em;
    grid-auto-flow: row;
  }

  /* Feature content - Add bg athletics logo image */
  .feature-container {
    background: url('/media/vcu-merchandise/images/vcu-athletics-logo-bg.svg') 0 0 no-repeat !important;
    /* v2 */
    background: url('/media/vcu-merchandise/images/vcu-athletics-logo-bg-v2.svg') -3em 4.2em no-repeat !important;
    background-size: 45% !important;
    background-attachment: fixed !important;
  }

  .area-main {
    grid-area: 1 / 2 / 2 / 3;
    align-self: end;
    /* display:block; */
    padding-bottom: 0.5em;
    height: auto;
  }

  .area-main p.img-container {
    margin-top: 1em;
  }

  .area-main p {
    font-size: clamp(1.5rem, 0.75rem + 1vw, 1.8rem);
  }
  
  .area-main--link-container {
    grid-area: 3 / 2 / 4 / 3;
    align-self: end;
  
    display: flex;
    flex-direction: column;
    gap: 1rem;
  
    position: static;
  }
  
  .area-main--link-one {
    grid-area: 2 / 2 / 4 / 3;
    align-self: start;
  }

  .area-main--link-two {
    grid-area: 3 / 2 / 3 / 3;
    align-self: start;
  }

  .area-main--link-one,
  .area-main--link-two {
    max-width: 95%;
  }

  .area-secondary {
    grid-area: 4 / 2 / 6 / 5;
    justify-self: center;
    align-items: start;
    z-index: 2;
    display: flex;
    /* mh 5.6.25 flex-wrap: nowrap; */
    flex-wrap: wrap;
    gap: 1em;
  }
  
  /* mh 5.6.25 */
  .area-secondary p {
    width: calc(33.333% - 0.67rem);
    flex-basis: calc(33.333% - 0.67rem);
  }

  .area-photo {
    grid-area: 1 / 3 / 4 / 6;
    position: relative;
  }

  .area-main--copy span {
    display: block;
  }

  /* Add ink roll border-left image */
  .area-photo:before {
    background-image: url('/media/vcu-merchandise/images/ink-roll-border--black.webp');
    background-position: -30px -30px;
    background-repeat: no-repeat;
    content: " ";
    height: 100%;
    position: absolute;
    width: 65px;
  }
}

/***/

/* Breakpoint 1000px */
/* Desktop grid */
@media (min-width: 1000px) {
  .feature-container {
    display: grid;
    grid-template-columns: 4em 35% 2em 1fr 1em;
    grid-template-rows: 15em 1fr auto auto 2em auto 4em;
    gap: 0;
    grid-auto-flow: row;
  }

  .area-main {
    grid-area: 1 / 2 / 3 / 3;
    align-self: end;
    align-content: end;
    padding-bottom: 1.5em;
  }
  
  /* Container for the two prominent links */
  .area-main--link-container {
    grid-area: 4 / 2 / 6 / 3;
    align-self: end;
  
    display: flex;
    flex-direction: column;
    gap: 1rem;
  
    position: static;
  }
  
  .area-main--link {
    width: 85%;
  }

  .area-main--link-one {
    grid-area: 3 / 2 / 4 / 3;
    align-self: end;
  }

  .area-main--link-two {
    grid-area: 4 / 2 / 6 / 3;
    align-self: end;
    margin-top: 1em !important;
  }

  .area-secondary {
    grid-area: 4/ 4 / 6 / 5;
    justify-self: center;
    align-items: end;
    z-index: 2;
    max-width: 92%;
    height: fit-content;
    align-self: end;
  }

  .area-photo {
    grid-area: 1 / 3 / 5 / 6;
    position: relative;
  }
}
/* Go Rams! */