/**
 * Gastineau Guiding Co. — Employment Listing Styles
 * File: /wp-content/themes/GastineauGuiding/gastineau-jobs/gastineau-jobs.css
 */


/* ─────────────────────────────────────────────
   LIST WRAPPER
───────────────────────────────────────────── */

.gg-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gg-jobs-empty {
    color: var(--gg-color-text-muted, #888);
    font-style: italic;
}


/* ─────────────────────────────────────────────
   INDIVIDUAL CARD
───────────────────────────────────────────── */

.gg-jobs-item {
    padding-block: var(--gg-space-lg, 1.75rem);
    border-top: 1px solid var(--gg-color-border, #e0e0e0);
    transition: opacity 0.2s ease;
}

.gg-jobs-item:last-child {
    border-bottom: 1px solid var(--gg-color-border, #e0e0e0);
}

/* Mute filled and coming-soon cards */
.gg-jobs-item--filled,
.gg-jobs-item--coming_soon {
    opacity: 0.55;
}


/* ─────────────────────────────────────────────
   HEADER: TITLE ROW + BADGES
───────────────────────────────────────────── */

.gg-jobs-item__title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--gg-space-xs, 0.5rem);
    margin-bottom: var(--gg-space-xs, 0.5rem);
}

.gg-jobs-item__title {
    margin: 0;
    padding-bottom: 0;
    font-size: var(--gg-text-lg, 1.2rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--gg-color-text, #1a1a1a);
}

.gg-jobs-item__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-space-2xs, 0.25rem);
}


/* ─────────────────────────────────────────────
   BADGES
───────────────────────────────────────────── */

.gg-jobs-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.65em;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
}

/* Category badge — neutral pill matching screenshot */
.gg-jobs-badge--category {
    background-color: var(--gg-color-surface-alt, #f0f0f0);
    color: var(--gg-color-text, #1a1a1a);
    border: 1px solid var(--gg-color-border, #e0e0e0);
}

/* Filled badge */
.gg-jobs-badge--filled {
    background-color: #f5f5f5;
    color: #888;
    border: 1px solid #ddd;
}

/* Coming soon badge */
.gg-jobs-badge--coming_soon {
    background-color: #fef9ec;
    color: #9a7200;
    border: 1px solid #f0d97a;
}


/* ─────────────────────────────────────────────
   EXCERPT
───────────────────────────────────────────── */

.gg-jobs-item__excerpt {
    margin: 0 0 var(--gg-space-sm, 0.875rem);
    font-size: var(--gg-text-sm, 0.9375rem);
    color: var(--gg-color-text-secondary, #444);
    line-height: 1.55;
}


/* ─────────────────────────────────────────────
   META ROW
───────────────────────────────────────────── */

.gg-jobs-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gg-space-sm, 0.875rem);
    margin-bottom: var(--gg-space-md, 1.25rem);
}

.gg-jobs-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--gg-text-sm, 0.9375rem);
    color: var(--gg-color-text-secondary, #555);
}

.gg-jobs-meta-item svg {
    flex-shrink: 0;
    opacity: 0.6;
}


/* ─────────────────────────────────────────────
   CTA BUTTON
───────────────────────────────────────────── */

.gg-jobs-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.55em 1.4em;
    border-radius: 999px;
    border: 1px solid var(--gg-color-text, #1a1a1a);
    background: transparent;
    color: var(--gg-color-text, #1a1a1a);
    font-size: var(--gg-text-sm, 0.9375rem);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.gg-jobs-btn:hover {
    background: var(--clr-primary-400);
    border-color: var(--clr-primary-400);
    color: #fff;
}

/* Disabled state for filled / coming soon */
.gg-jobs-btn--disabled {
    border-color: #ccc;
    color: #aaa;
    cursor: default;
    pointer-events: none;
}