/**
 * Patient cards on every page rendered with the gallery plugin's "posts" template.
 * The design tokens below are shared with layout.css and picture-labels.css.
 */

:root {
    --pgsa-serif: Georgia, "Times New Roman", serif;
    --pgsa-text: #333333;
    --pgsa-muted: #6b6b6b;
    --pgsa-bg: #f6f5f2;
    --pgsa-surface: #fff;
    --pgsa-dark: #2b2b2b;
    --pgsa-accent: #a3443f;
    --pgsa-tag: #e9e7e3;
    --pgsa-tag-hover: #dcd9d3;
    --pgsa-border: #d9d6d0;
}

/*
 * Grid. The gallery plugin sets grid-template-columns inline, hence !important.
 * --pgsa-columns and the overrides from Before and after → Gallery Layout are printed inline (see includes/assets.php).
 */
#pgsa-container {
    display: grid;
    grid-template-columns: repeat(var(--pgsa-columns, 3), minmax(0, 1fr)) !important;
    gap: 48px 24px;
}
#pgsa-container > .photogallery-post-disclaimer { grid-column: 1 / -1; }

@media (max-width: 1024px) {
    #pgsa-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
    #pgsa-container { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Picture */
#pgsa-container .photogallery-post-pictures { margin-bottom: 16px; }
#pgsa-container .photogallery-post-pictures__gallery__figure { max-width: 100%; }
#pgsa-container .photogallery-post-pictures__gallery__figure a { position: relative; }
#pgsa-container .photogallery-post-pictures__gallery__figure img { display: block; }

/* "View case" overlay on hover */
#pgsa-container .photogallery-post-pictures__gallery__figure a::after {
    content: var(--pgsa-label-view, "View case \2192");
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, .25);
    opacity: 0;
    transition: opacity .2s ease;
}
#pgsa-container .photogallery-post-pictures__gallery__figure a:hover::after { opacity: 1; }

/*
 * Message over the blurred explicit pictures: the gallery plugin's one on the cards
 * and the layout's own on the patient detail page. The gallery plugin's script removes it on click.
 */
#pgsa-container .photogallery-post-pictures__gallery__figure { position: relative; }
#pgsa-container .photogallery_taxonomy__explicit-message,
.pgsa-explicit-message {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    max-width: calc(100% - 24px);
    padding: 6px 12px;
    box-sizing: border-box;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    color: #fff;
    background: rgba(43, 43, 43, .85);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.pgsa-explicit-message__reveal {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 400;
    opacity: .8;
}
.photogallery_explicit_image { cursor: pointer; }

/* Card rows (rendered inside the gallery plugin's description component) */
#pgsa-container .photogallery-patient-info { display: block; margin: 0; padding: 0; }
#pgsa-container .photogallery-patient-info > .pgsa-card__row {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
}
#pgsa-container .photogallery-patient-info strong:empty { display: none; }

/* Title + location */
.patient-info-card-header > span {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}
.pgsa-card__title a {
    font-family: var(--pgsa-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
    text-decoration: none;
}
.pgsa-card__location {
    font-size: 13px;
    color: var(--pgsa-muted);
    text-align: right;
    white-space: nowrap;
}

/* Procedures */
.patient-info-card-procedures > span { display: flex; flex-wrap: wrap; gap: 8px; }
.pgsa-card__tag {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #333;
    background: var(--pgsa-tag);
    text-decoration: none;
}
.pgsa-card__tag:hover { background: var(--pgsa-tag-hover); }

/* Doctor */
.patient-info-card-physicians { font-size: 13px; color: var(--pgsa-muted); }