/* GHWW Photo Wall — scoped styles (all selectors are .ghww-* so they never
   fight the active theme). */

/* ---- Collage ---- */
.ghww-wall {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 14px;
        margin: 0;
}
.ghww-tile {
        position: relative;
        margin: 0;
        border-radius: 10px;
        overflow: hidden;
        background: #f3f4f6;
        break-inside: avoid;
}
.ghww-tile__img {
        display: block;
        width: 100%;
        height: 240px;
        object-fit: cover;
}
.ghww-tile__caption {
        position: absolute;
        inset: auto 0 0 0;
        padding: 24px 12px 10px;
        background: linear-gradient(to top, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0));
        color: #fff;
        font-size: 14px;
        line-height: 1.3;
}
.ghww-tile__link {
        color: inherit;
        text-decoration: none;
}
.ghww-tile__link:hover .ghww-tile__name {
        text-decoration: underline;
}
.ghww-tile__name {
        display: block;
        font-weight: 600;
}
.ghww-tile__org {
        display: block;
        font-size: 12px;
        opacity: 0.85;
}
.ghww-empty {
        text-align: center;
        color: #6b7280;
        padding: 24px 0;
}

/* ---- Form ---- */
.ghww-form-wrap {
        max-width: 560px;
}
.ghww-form-title {
        margin: 0 0 16px;
}
.ghww-form .ghww-field {
        margin: 0 0 16px;
}
.ghww-form label {
        display: block;
        font-weight: 600;
        margin-bottom: 4px;
}
.ghww-form input[type="text"],
.ghww-form input[type="url"],
.ghww-form input[type="email"],
.ghww-form input[type="file"] {
        width: 100%;
        box-sizing: border-box;
}
.ghww-form .ghww-field--check label {
        font-weight: 400;
        display: flex;
        gap: 8px;
        align-items: flex-start;
}
.ghww-form .ghww-field--check input {
        margin-top: 3px;
        flex: none;
}
.ghww-hint {
        display: block;
        font-size: 12px;
        color: #6b7280;
        margin-top: 3px;
        font-weight: 400;
}

/* ---- Info icon + tooltip (photo requirements) ---- */
.ghww-form .ghww-label--inline {
        display: inline-block;
}
.ghww-info {
        position: relative;
        display: inline-block;
        margin-left: 6px;
        vertical-align: 2px;
}
.ghww-info__btn {
        display: inline-block;
        width: 16px;
        height: 16px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #6b7280;
        color: #fff;
        font-family: Georgia, "Times New Roman", serif;
        font-style: italic;
        font-size: 11px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        cursor: pointer;
}
.ghww-info__btn:hover,
.ghww-info__btn:focus {
        background: #374151;
}
.ghww-info__btn:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
}
.ghww-info__tip {
        position: absolute;
        bottom: calc(100% + 8px);
        left: -8px;
        width: max-content;
        max-width: 240px;
        padding: 6px 10px;
        border-radius: 6px;
        background: #111827;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.4;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease;
        pointer-events: none;
        z-index: 20;
}
.ghww-info__tip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 12px;
        border: 5px solid transparent;
        border-top-color: #111827;
}
.ghww-info__btn:hover + .ghww-info__tip,
.ghww-info__btn:focus + .ghww-info__tip,
.ghww-info.is-open .ghww-info__tip {
        opacity: 1;
        visibility: visible;
}

/* Screen-reader-only labels (fields use placeholders visually). */
.ghww-sr {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
}

/* ---- Social profile tabs (CSS-only, driven by hidden radios) ---- */
.ghww-tabs {
        position: relative;
}
.ghww-tab-radio {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        margin: 0;
        pointer-events: none;
}
.ghww-tab-bar {
        display: flex;
        border-bottom: 1px solid #d1d5db;
        margin-bottom: 10px;
}
.ghww-form .ghww-tab-bar label {
        display: inline-block;
        margin: 0 0 -1px;
        padding: 7px 14px;
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
        border-bottom: 2px solid transparent;
        cursor: pointer;
}
#ghww-tab-linkedin:checked ~ .ghww-tab-bar label[for="ghww-tab-linkedin"],
#ghww-tab-facebook:checked ~ .ghww-tab-bar label[for="ghww-tab-facebook"] {
        color: #111827;
        border-bottom-color: currentColor;
}
#ghww-tab-linkedin:focus-visible ~ .ghww-tab-bar label[for="ghww-tab-linkedin"],
#ghww-tab-facebook:focus-visible ~ .ghww-tab-bar label[for="ghww-tab-facebook"] {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
}
.ghww-tab-panel {
        display: none;
}
#ghww-tab-linkedin:checked ~ .ghww-tab-panel--linkedin,
#ghww-tab-facebook:checked ~ .ghww-tab-panel--facebook {
        display: block;
}
.ghww-submit {
        cursor: pointer;
}
.ghww-hp {
        position: absolute !important;
        left: -9999px !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
}
.ghww-notice {
        padding: 12px 16px;
        border-radius: 8px;
        margin: 0 0 16px;
}
.ghww-notice--success {
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        color: #065f46;
}
.ghww-notice--error {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #991b1b;
}

/* --- Lightbox ---------------------------------------------------------- */

.ghww-tile__zoom {
        display: block;
        cursor: zoom-in;
}

.ghww-lightbox {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(10, 14, 20, 0.88);
        cursor: zoom-out;
        padding: 24px;
}

.ghww-lightbox__img {
        max-width: min(92vw, 1600px);
        max-height: 88vh;
        border-radius: 6px;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.2s ease;
}

.ghww-lightbox__img.is-loaded {
        opacity: 1;
}

.ghww-lightbox__close {
        position: absolute;
        top: 14px;
        right: 18px;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
}

.ghww-lightbox__close:hover {
        background: rgba(255, 255, 255, 0.24);
}

.ghww-lightbox__spinner {
        position: absolute;
        width: 40px;
        height: 40px;
        border: 3px solid rgba(255, 255, 255, 0.25);
        border-top-color: #fff;
        border-radius: 50%;
        animation: ghww-spin 0.8s linear infinite;
}

@keyframes ghww-spin {
        to {
                transform: rotate(360deg);
        }
}