/* =========================================================================
   GVLS - components.css
   Buttons, form fields, badges, avatars, and shared card chrome.
   ========================================================================= */

/* ------------------------------------------------------------- Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    font-family: var(--font-primary); font-size: var(--text-base); font-weight: 600;
    line-height: 1; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
    border: 2px solid transparent; cursor: pointer; text-decoration: none;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-disabled { opacity: .55; pointer-events: none; }
.btn--block { width: 100%; }
.btn svg { flex-shrink: 0; }

.btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; box-shadow: var(--shadow-md); }

.btn-secondary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }

.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-border-dark); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); background: rgba(27,58,107,.04); }

.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.6); }

/* --------------------------------------------------------------- Fields */
.gvls-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.gvls-field > label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.gvls-field .req { color: var(--color-error); }
.gvls-field input,
.gvls-field select,
.gvls-field textarea {
    width: 100%; font-family: inherit; font-size: var(--text-base); color: var(--color-text);
    padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md); background: #fff; transition: border-color .18s ease, box-shadow .18s ease;
}
.gvls-field input:focus,
.gvls-field select:focus,
.gvls-field textarea:focus {
    outline: none; border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(42,82,152,.14);
}
.gvls-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23475569' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-10);
}

.gvls-field-row { display: grid; gap: var(--space-4); margin-bottom: 0; }
.gvls-field-row--1 { grid-template-columns: 1fr; }
.gvls-field-row--2 { grid-template-columns: 1fr; }
.gvls-field-row--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .gvls-field-row--2 { grid-template-columns: repeat(2, 1fr); }
    .gvls-field-row--3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------- Badges */
.gvls-badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-xs); font-weight: 600; padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full); line-height: 1.6;
}
.gvls-badge--soft   { background: var(--color-bg); color: var(--color-primary); border: 1px solid var(--color-border); }
.gvls-badge--accent { background: var(--color-accent); color: #fff; }
.gvls-badge--muted  { background: rgba(255,255,255,.16); color: #fff; }

.gvls-tier-badge {
    display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: 700;
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); line-height: 1.7;
}

/* -------------------------------------------------------------- Avatars */
.gvls-avatar { display: inline-grid; place-items: center; border-radius: var(--radius-full); overflow: hidden; flex-shrink: 0; background: var(--color-bg); }
.gvls-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gvls-avatar--initials {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    color: #fff; font-weight: 700; letter-spacing: .02em;
}

/* ------------------------------------------------- Card chrome (shared) */
.gvls-conf-card, .gvls-post-card, .gvls-member-card {
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex; flex-direction: column;
}
.gvls-conf-card:hover, .gvls-post-card:hover, .gvls-member-card:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-border-dark);
}
.gvls-conf-card__media, .gvls-post-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg); }
.gvls-conf-card__img, .gvls-post-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gvls-conf-card:hover .gvls-conf-card__img, .gvls-post-card:hover .gvls-post-card__img { transform: scale(1.05); }
.gvls-conf-card__img--placeholder, .gvls-post-card__img--placeholder,
.gvls-member-card__media { background: linear-gradient(135deg, var(--color-bg), var(--color-border)); }

/* Conference card specifics */
.gvls-conf-card__date {
    position: absolute; top: var(--space-3); left: var(--space-3);
    background: rgba(255,255,255,.95); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
    text-align: center; line-height: 1; box-shadow: var(--shadow-sm);
}
.gvls-conf-card__date strong { display: block; font-size: var(--text-2xl); color: var(--color-primary); font-family: var(--font-display); }
.gvls-conf-card__date span { display: block; font-size: var(--text-xs); text-transform: uppercase; color: var(--color-text-secondary); margin-top: 2px; }
.gvls-conf-card__flag {
    position: absolute; top: var(--space-3); right: var(--space-3);
    background: var(--color-text); color: #fff; font-size: var(--text-xs); font-weight: 600;
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
}
.gvls-conf-card__flag--full { background: var(--color-error); }
.gvls-conf-card__body, .gvls-post-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.gvls-conf-card__loc { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0; }
.gvls-conf-card__title, .gvls-post-card__title { font-size: var(--text-xl); margin: 0; }
.gvls-conf-card__title a, .gvls-post-card__title a { color: var(--color-text); }
.gvls-conf-card__title a:hover, .gvls-post-card__title a:hover { color: var(--color-primary); }
.gvls-conf-card__excerpt, .gvls-post-card__excerpt { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0; }
.gvls-conf-card__more, .gvls-post-card__more {
    display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600;
    color: var(--color-accent-dark); font-size: var(--text-sm); margin-top: auto; padding-top: var(--space-2);
}
.gvls-conf-card__more:hover, .gvls-post-card__more:hover { gap: var(--space-3); color: var(--color-accent-dark); }
.gvls-conf-card[data-status="past"] { opacity: .82; }

/* Post card meta */
.gvls-post-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }

/* Member card */
.gvls-member-card { text-align: center; }
.gvls-member-card__media { aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; }
.gvls-member-card__img { width: 100%; height: 100%; object-fit: cover; }
.gvls-member-card__initials { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 900; color: var(--color-primary-light); }
.gvls-member-card__body { padding: var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.gvls-member-card__name { font-size: var(--text-lg); margin: 0; }
.gvls-member-card__spec { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0; }
.gvls-member-card__city { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

/* Register button block (used on single conference) */
.gvls-register { display: flex; flex-direction: column; gap: var(--space-4); }
.gvls-register__price { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; color: var(--color-primary); }
.gvls-register__price .amount { color: var(--color-primary); }
.gvls-register__notice { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0; }
.gvls-register__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.gvls-register__badge {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-4); border-radius: var(--radius-md); font-weight: 600; text-align: center;
}
.gvls-register__badge--success { background: #F0FDF4; color: var(--color-accent-dark); border: 1px solid #BBF7D0; }
.gvls-register__badge--full    { background: #FEF2F2; color: var(--color-error); border: 1px solid #FECACA; }
.gvls-register__badge--muted   { background: var(--color-bg); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.gvls-register__confirmed {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid #b7e7c3;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #f2fcf5 0%, #eaf8ef 100%);
    color: #185c2c;
    box-shadow: 0 8px 22px rgba(22, 163, 74, .08);
}
.gvls-register__confirmed-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-success);
    color: #fff;
    box-shadow: 0 6px 16px rgba(22, 163, 74, .2);
}
.gvls-register__confirmed-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    text-align: left;
}
.gvls-register__confirmed-copy strong {
    color: #145523;
    font-size: var(--text-sm);
    line-height: 1.45;
}
.gvls-register__confirmed-copy small {
    color: #397447;
    font-size: var(--text-xs);
    line-height: 1.5;
}

/* Icons inherit text color */
.gvls-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }