/* Tag Text styles */
.views-field.views-field-field-program-tag a {
    display: block;
    background: #008cbb !important;
    padding: 4px 10px;
    margin-right: 5px;
    font-size: 0.7em;
}

/* Tags and grid cards */

/* TAG 
 */
.field-content.topic-program-tag-field {
    max-width: fit-content;
    margin: 0 20px;
    position: absolute;
    bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Title Sizing  */
.field-content.topic-program-tag-field a {
    color: white !important;
    font-weight: normal;
    font-size: 0.7em;
    pointer-events: none; 
    cursor: default;
}


/* Learn MOre button */
.views-field.views-field-field-topic-link-button {
    display: none;
}


/* Grid Item bound  */
.views-view-responsive-grid__item {
    position: relative;
}

/* Grid Items Cards Responsive Grid  */
.views-view-responsive-grid__item {
    background: #ffffff;
    padding: 0;
    /* gap: 20px; */
}

/* Field Spacing */
.views-field.views-field-title,
.views-field.views-field-field-program-page-image {
    padding: 10px 20px;
}

.views-field.views-field-title{
    height: 2em;
    margin-bottom: 1em;
    font-weight: bold;
    margin-top: 1em;
}

/* image sizing */
.field.field--name-field-media-image img {
    height: 140px;
    object-fit: cover;
}

.views-field.views-field-field-program-page-image {
    margin-top: 10px;
}

.views-field.views-field-field-program-page-image {
    padding: 0 10px;
}

/* summary styles */
.field-content.topic-box-title-field {
    height: 140px;
    overflow: hidden;
}

.views-field.views-field-field-topic-box-summary {
    PADDING: 10px 20px;
}

/* BG  */
.region.region-content {
    background: #eef0f2;
}
.views-view-responsive-grid__item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.views-view-responsive-grid__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.views-view-responsive-grid__item:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/*Remove Tags on Landing Page if Block profiles show up*/
.field.field--name-field-topic-group.field--type-entity-reference.field--label-hidden.field--items {
    display: none;
}
.field.field--name-field-program-tag.field--type-entity-reference.field--label-hidden.field--items {
    display: none;
}
/* Add Margin to Bottom of Block Display */


/* default*/
.views-view-responsive-grid.views-view-responsive-grid--horizontal {
    margin-bottom: 40px;
    margin-top: 40px;
}
/*landing page hero trim*/
.field--name-field-blades .hero-image
 {
    min-height: 225px !important;
}
.hero-image {
    background-position: center!important;
}

/*responsive grid*/
.views-view-responsive-grid.views-view-responsive-grid--horizontal {
    --views-responsive-grid--column-count: 3;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.views-view-responsive-grid.views-view-responsive-grid--horizontal {
    --views-responsive-grid--column-count: 1 !important;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.views-view-responsive-grid.views-view-responsive-grid--horizontal {
    --views-responsive-grid--column-count: 1 !important;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.views-view-responsive-grid.views-view-responsive-grid--horizontal {
    --views-responsive-grid--column-count: 2 !important;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.views-view-responsive-grid.views-view-responsive-grid--horizontal {
    --views-responsive-grid--column-count: 2 !important;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.views-view-responsive-grid.views-view-responsive-grid--horizontal {
    --views-responsive-grid--column-count: 3!important;
}
}
/* edits */
.views-field.views-field-field-topic-box-summary p {
    font-size: 0.9em !important;
}

/*.views-field.views-field-field-program-tag {*/
/*    max-width: fit-content;*/
/*    margin: 0 20px;*/
/*    right: -16px;*/
/*    bottom: 10px;*/
/*}*/

.views-view-responsive-grid.views-view-responsive-grid--horizontal {
    --views-responsive-grid--layout-gap: 10px !important;
}

.views-view-responsive-grid__item-inner {
    height: 500px;
}
/* 
 * REMove the other tag CSS this addition moves the CSS styles down one layer of a Div then adds a display flex so that the new buttons stack side-by-side. 
 *
 */

.field-content.topic-box-title-field .caption {
    background: #ffc108;
    padding: 4px;
    font-weight: bold;
    color: black;
}

.field-content.topic-program-tag-field {
    max-width: fit-content;
    margin: 0 20px;
    position: absolute;
    right: 0;
    bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    left: 0;
    max-width: 250px;
}

.field-content.topic-box-title-field {
    height: 140px;
    overflow: visible;
}