/* GRIN Info Card - widget specific styles only.
   Reuses the global content components (.content-block, .headline, .text-body,
   .bullet-list, .button and the per-component size / colour logic)
   from the theme stylesheet (styles.dev.scss). Only the card shell (layout +
   template border colour) is widget specific and kept here. The border colour
   follows the template: green by default, petrol inside .grin-selfpublishing
   (same accents as the global components). */

.info-card {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 40px;
    box-sizing: border-box;
    border-radius: 20px;
    border: 2px solid #3589aa;
}

.info-card__media {
    flex: 0 0 auto;
    max-width: 230px;
}

.info-card__media img {
    display: block;
    width: 100%;
    height: auto;
}

.info-card .bullet-list__icon {
    background-color: #3589aa;
}

.info-card .button-primary {
    background: #3589aa;
}

.info-card .button-primary:hover {
    background: #000000;
}

.info-card__content {
    flex: 1 1 auto;
}

/* Template border colour inside the selfpublishing site context */

.grin-selfpublishing .info-card {
    border-color: #3589aa;
}

.info-card .text-body a {
    color: #3589aa;
}

.info-card .text-body a:hover {
    color: #000000;
}

.info-card .headline {
    font-size: 28px;
    line-height: 38px;
    font-weight: 600;
    color: #000000;
}

/* Responsive: stack image above content on mobile */

@media (max-width: 1023px) {
    .info-card {
        flex-direction: column;
        padding: 30px;
        align-items: center;
    }

    .info-card .headline { 
        font-size: 22px;
        line-height: 30px;
    }
}