/**
 * GCC Testimonial Plugin styles
 * Enqueued by testimonials.php -- do not paste into the theme's Custom CSS.
 */

.profile img {
    margin:auto !important;
    width:50%;
    margin-bottom:1em;
    border-radius:50%;
}

.quote {
    display:block;
    font-family:'Source Serif 4', serif !important;
    font-size:18px;
    font-style:italic;
    background:url(https://www.gcc.mass.edu/newsroom/files/2025/02/quotes-1.png) no-repeat;
    min-height:50px;
    padding: 10px 0 0 10px;
}

.profile .name {
    text-align: right;
    font-size:16px;
    margin-top:10px;
    width:100%;
    background:url(https://www.gcc.mass.edu/newsroom/files/2025/02/quotes-2-e1738950280386.png) no-repeat top right;
    min-height:50px;
    line-height:18px
}

.profile .read-more {
    display:block;
    text-align: center;
    color:#00584b;
}


.profile .read-more span {
    font-family:'Caveat';
    font-size:175%;
    display:inline-block;
    margin-right:4px;
    color:#2bb673;
}

.name span {
    display:block;
    padding:10px 10px 0
}

/* ---- type="block" feature-block layout ---- */

/* Full-bleed: cancel container-fluid padding/gutters AND break out of any
   centered theme container so the block reaches the browser window edges.
   If the shortcode is already placed in a full-width area, the two negative
   margins below simply resolve to ~0 and can be removed. */
.profile-block {
    padding-left:0 !important;
    padding-right:0 !important;
    /* width:auto lets the box fill the space opened up by the negative
       margins, which is more reliable than hard-coding 100vw */
    width:auto !important;
    max-width:none !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    overflow:hidden;
}

/* Belt and braces: the 100vw breakout can exceed the document width by the
   scrollbar's width. Clip that sliver rather than showing a scrollbar. */
body.gcc-has-profile-block {
    overflow-x:hidden;
}

.profile-block > .row {
    margin-left:0;
    margin-right:0;
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    width:100%;
    max-width:none;
}

/* Kill Bootstrap gutters, but NOT on .info (which needs its own padding) */
.profile-block > .row > [class*='col-']:not(.info) {
    padding-left:0;
    padding-right:0;
}

/* Both halves stretch to the same full height */
.profile-block .image {
    display:flex;
    align-items:stretch;
    min-height:420px;
}

.profile-block .image > a {
    display:flex;
    width:100%;
}

.profile-block img {
    width:100%;
    height:100%;
    min-height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    margin:0;
    border-radius:0;
}

.profile-block > .row > .info,
.profile-block .info {
    background:#00584b;
    color:#fff;
    padding:3em 4em !important;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:420px;
}

@media (max-width:767px) {
    .profile-block > .row > .info,
    .profile-block .info { padding:2.5em 1.75em !important; }
}

/* Alternating sides — desktop only, so mobile always stacks image first */
@media (min-width:768px) {
    .profile-block.image-right > .row { flex-direction:row-reverse; }
}

.profile-block .headline {
    font-family:'Source Serif 4', serif;
    font-size:36px;
    font-weight:700;
    line-height:1.2;
}

.profile-block .meta {
    font-size:20px;
    font-weight:400;
    opacity:.85;
    margin-top:.25em;
    margin-bottom:1em;
}

/* Quote body. The curly quotation marks are part of the text itself
   (added in testimonials.php), not decorative background art. */
.profile-block .body {
    padding:0;
}

.profile-block .body .quote,
.profile-block p.quote {
    font-family:'Source Serif 4', serif !important;
    font-style:normal;
    font-weight:400;
    font-size:22px !important;
    line-height:36px;
    background:none;
    min-height:0;
    padding:0;
    margin:0;
    color:#fff;
}


.profile-block .link { margin-top:1em; }

.profile-block .link a,
.profile-block .link a.read-more {
    color:#fff;
    text-decoration:underline;
    display:inline;
    text-align:left;
}

.profile-block .link i { color:#f7a800; }