﻿/*
//-----------------------------------------------------------------------
// <copyright file="cards.less" company="Federal Reserve Bank of Boston">
//     © 2024 Federal Reserve Bank of Boston
// </copyright>
// <summary>This is the cards.less file.</summary>
//-----------------------------------------------------------------------
// Internal FR – Source Code
*/
/* ReSharper disable UnknownCssVendorExtension */
/* ReSharper disable CssBrowserCompatibility */
.card-item {
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  position: relative;
  height: 100%;
  table-layout: fixed;
  width: 100%;
}

a > .card-item {
  -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 
}

a > .card-item:hover{
  -webkit-transform: translateY(-3px);
  -moz-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  -o-transform: translateY(-3px);
  transform: translateY(-3px);
  background-color: #F6F6F7;
}


.featured-card-img-wrapper {
    overflow: hidden;
    height: auto;
    padding: 0;
    background-size: cover;
}

@media(min-width:1200px) {
    .card-item.xs-dblwide,
    .card-item.sm-dblwide,
    .card-item.md-dblwide {
        display: block;
    }

    .card-item.lg-dblwide {
        display: table;
    }
}
@media(max-width:1200px) {
    .card-item.lg-dblwide,
    .card-item.sm-dblwide,
    .card-item.xs-dblwide {
        display: block;
    }

    .card-item.md-dblwide {
        display: table;
    }
}
@media(max-width:992px) {
    .card-item.lg-dblwide,
    .card-item.md-dblwide,
    .card-item.xs-dblwide {
        display: block;
    }

    .card-item.sm-dblwide {
        display: table;
    }
}
@media(max-width:768px) {
    .card-item.lg-dblwide,
    .card-item.md-dblwide,
    .card-item.sm-dblwide {
        display: block;
    }
    
    .card-item.sm-dblwide .card-summary{
        display: block;
    }

    .card-item.xs-dblwide {
        display: table;
    }
}

.card-item .cards-date {
    position: absolute;
    z-index: 999;
    margin-top: 0;
    right: 0;
}

.card-item .highlight-label {
    background-color: #003a5d;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    padding: 10px 12px;
    white-space: nowrap;
    text-align: center;
}

.card-item .caption {
  color: #003a5d;
  line-height: 21px;
  padding: 30px;
}

.card-item .caption-link {
  color: #6ba2b9;
  font-size: 15px;
  font-weight: 400;
}

.card-title {
    line-height: 21px;
}

.card-title a {
    font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    color: #003A5D;
}

.card-summary {
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    color: #3F4041;
}

.card-item .caption {
    padding-top: 0;
}

.double-wide {
    overflow: hidden;
}

.card img {
    height: auto;
    max-width: 100%;
    visibility: visible;
}

.card-item img {
    max-width: 100%;
}

.card-item .card-summary {
    display: none;
}

.featured-card-img-wrapper a {
    display: block;
}

.card-item .caption {
    padding: 20px 25px;
}




@media (min-width: 480px) {
    .card-item .caption {
        padding: 30px;
    }
}
@media (min-width: 768px) {
    .sm-dblwide .caption,
    .sm-dblwide .featured-card-img-wrapper {
        display: table-cell;
        vertical-align: middle;
    }
    .sm-dblwide .caption {
        width: 60%;
    }
    .sm-dblwide .card-summary {
        display: block;
    }

    .sm-dblwide .featured-card-img-wrapper {
        width: 40%;
        height: 300px;
    }
    .sm-dblwide .featured-card-img-wrapper picture{
        min-height: 300px!important;
    }

     .featured-card-img-wrapper picture {
        padding-top: 56%; /* intrinsic ratio 16x9 of the image container */
    }
}

@media (min-width: 992px) {
    .sm-dblwide .caption,
    .sm-dblwide .featured-card-img-wrapper {
        display: block;
        width: auto;
    }
    .sm-dblwide .featured-card-img-wrapper picture {
        height: 100%!important;
    }
    
    .md-dblwide .caption,
    .md-dblwide .featured-card-img-wrapper {
        display: table-cell;
        vertical-align: middle;
    }
    .md-dblwide .caption {
        width: 60%;
    }
    .md-dblwide .featured-card-img-wrapper {
        width: 40%;
    }
    .md-dblwide .card-summary {
        display: block;
    }

    .md-dblwide .featured-card-img-wrapper {
        height: 300px;
    }
    .md-dblwide .featured-card-img-wrapper picture {
        height: 300px!important;
    }
}
@media (min-width: 1200px) {
    .md-dblwide .caption,
    .md-dblwide .featured-card-img-wrapper {
        display: block;
    }
    .md-dblwide .caption {
        width: 100%;
    }
    .md-dblwide .featured-card-img-wrapper {
        height: auto;
        width: 100%;
    }
    .md-dblwide .featured-card-img-wrapper picture {
        height: 100%!important;
    }
    .md-dblwide .card-summary {
        display: none;
    }

    .lg-dblwide .caption,
    .lg-dblwide .featured-card-img-wrapper {
        display: table-cell;
        vertical-align: middle;
    }
    .lg-dblwide .caption {
        width: 60%;
    }
    .lg-dblwide .card-summary {
        display: block;
    }
    
    
    .lg-dblwide .featured-card-img-wrapper {
        width: 40%;
        height: 350px;
    }
    .lg-dblwide .featured-card-img-wrapper picture {
        height: 350px!important;
    }
}

.card-item .caption {
    padding-top: 0;
}

@media(max-width:767px) {
    .featured-card-img-wrapper {
        height: auto;
    }
    .featured-card-img-wrapper .focuspoint img {
        position: static;
        max-width: 100%;
        min-height: 0;
    }
}