/* ==========================================================================
   Central ICT Club Bangladesh
   Membership surfaces that live outside the member shell.

   This covers the public member directory, a member public profile, the
   verify page, and the digital ID card. The directory, profile, and verify
   pages load only style.css, so their badges and cards are defined here
   rather than borrowed from the dashboard. The ID card also loads this file
   on top of the dashboard shell.
   ========================================================================== */

/* ----------------------------------------------------------------------
   Status and category badges (the public pages cannot use the dashboard pill)
   ---------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: var(--r-pill);
    background: var(--mist);
    color: var(--slate-700);
    white-space: nowrap;
}

.badge--green {
    color: var(--green-600);
    background: rgba(22, 163, 93, 0.12);
}

.badge--blue {
    color: var(--blue-600);
    background: rgba(28, 99, 180, 0.12);
}

.badge--amber {
    color: #b87412;
    background: rgba(224, 149, 79, 0.16);
}

.badge--muted {
    color: var(--slate-500);
    background: var(--mist);
}

/* ----------------------------------------------------------------------
   Public directory
   ---------------------------------------------------------------------- */
.dir-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.dir-search {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 380px;
}

.dir-search input {
    width: 100%;
    height: 46px;
    padding: 0 16px 0 44px;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.dir-search input:focus {
    outline: none;
    border-color: var(--blue-500);
    box-shadow: 0 0 0 4px rgba(42, 127, 212, 0.14);
}

.dir-search svg {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--slate-400);
    pointer-events: none;
}

/* category filter chips */
.dir-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dir-filter__btn {
    padding: 8px 16px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--slate-500);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.dir-filter__btn:hover {
    color: var(--ink);
    border-color: var(--line-dark);
}

.dir-filter__btn[aria-selected="true"] {
    color: var(--white);
    background: var(--green-600);
    border-color: var(--green-600);
}

.dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.dir-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 22px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    text-decoration: none;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.dir-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
}

.dir-card__avatar {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin-bottom: 14px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--white);
    background: var(--grad-brand);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.dir-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dir-card__name {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 3px;
}

.dir-card__role {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--green-600);
    margin: 0 0 10px;
}

.dir-card__quals {
    font-size: 0.86rem;
    color: var(--slate-500);
    margin: 0 0 14px;
    line-height: 1.5;
}

.dir-card__foot {
    margin-top: auto;
}

/* shown when a filter or search returns nothing */
.dir-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    color: var(--slate-500);
}

/* simple pager for long lists */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
}

.pagination__btn {
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--slate-700);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 11px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.pagination__btn:hover {
    border-color: var(--line-dark);
    color: var(--ink);
}

.pagination__btn[aria-current="page"] {
    color: var(--white);
    background: var(--navy-800);
    border-color: var(--navy-800);
}

.pagination__btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

/* ----------------------------------------------------------------------
   Member public profile
   ---------------------------------------------------------------------- */
.pp-hero {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    padding: clamp(24px, 4vw, 40px);
    background: var(--grad-brand);
    border-radius: var(--r-lg);
    color: var(--white);
    box-shadow: var(--sh-md);
}

.pp-hero__avatar {
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--navy-800);
    background: var(--white);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.pp-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-hero__name {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 6px;
}

.pp-hero__role {
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 14px;
}

.pp-hero__tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* white badge variant that reads on the coloured hero */
.pp-hero__tags .badge {
    color: var(--navy-800);
    background: rgba(255, 255, 255, 0.92);
}

.pp-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 24px;
    margin-top: 26px;
    align-items: start;
}

.pp-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    padding: 24px;
}

.pp-card h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 14px;
}

.pp-card p {
    color: var(--slate-700);
    line-height: 1.7;
    margin: 0 0 12px;
}

/* a tidy label and value list for the details card */
.pp-facts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pp-facts li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.92rem;
}

.pp-facts li:last-child {
    border-bottom: none;
}

.pp-facts span {
    color: var(--slate-500);
}

.pp-facts b {
    color: var(--ink);
    font-weight: 600;
    text-align: right;
}

/* ----------------------------------------------------------------------
   Verify page
   ---------------------------------------------------------------------- */
.verify {
    max-width: 640px;
    margin: 0 auto;
}

.verify__form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.verify__form .field {
    flex: 1;
    min-width: 220px;
    margin: 0;
}

.verify__result {
    margin-top: 26px;
    padding: 24px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: var(--sh-sm);
}

.verify__result[hidden] {
    display: none;
}

.verify__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.verify__head h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.verify__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}

.verify__result--valid .verify__icon {
    color: var(--green-600);
    background: rgba(22, 163, 93, 0.12);
}

.verify__result--invalid .verify__icon {
    color: #c43d3d;
    background: rgba(196, 61, 61, 0.1);
}

.verify__icon svg {
    width: 24px;
    height: 24px;
}

/* ----------------------------------------------------------------------
   Digital ID card
   ---------------------------------------------------------------------- */
.idcard-wrap {
    max-width: 460px;
}

.idcard {
    position: relative;
    overflow: hidden;
    padding: 24px;
    color: var(--white);
    background: linear-gradient(135deg, var(--navy-800), var(--navy-700) 55%, var(--blue-600));
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
}

.idcard::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(43, 196, 115, 0.25), transparent 68%);
    pointer-events: none;
}

.idcard__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.idcard__head img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.idcard__head b {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.1;
}

.idcard__head span {
    display: block;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
}

.idcard__body {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.idcard__photo {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy-800);
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
}

.idcard__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.idcard__name {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 2px;
}

.idcard__role {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 12px;
}

.idcard__id {
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.idcard__id span {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2px;
}

.idcard__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.idcard__dates {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.idcard__dates b {
    color: var(--white);
}

/* a stand in for the generated QR, the backend renders the real one */
.qr {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: 8px;
    background-color: var(--white);
    background-image:
        linear-gradient(45deg, var(--navy-900) 25%, transparent 25%, transparent 75%, var(--navy-900) 75%),
        linear-gradient(45deg, var(--navy-900) 25%, transparent 25%, transparent 75%, var(--navy-900) 75%);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
    border: 4px solid var(--white);
}

/* ----------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 880px) {
    .pp-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .pp-hero {
        text-align: center;
        justify-content: center;
    }

    .idcard__body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dir-card {
        transition: none;
    }
}