/* ============================================================
   Transmedia Announcements — Frontend Styles
   Brand: Burgundy #6B1E2E | Gold #D4AF37 | Off-white #F5F1E8 | Black #1A1A1A
   ============================================================ */

/* ============ Layout ============ */
.ta-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 4rem; }

/* ============ Hero ============ */
.ta-hero {
    background: linear-gradient(135deg, #6B1E2E 0%, #4A1420 60%, #2D1B1F 100%);
    color: #F5F1E8;
    padding: 5rem 1.5rem 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 3rem;
}
.ta-hero::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, #D4AF37 0%, #6B1E2E 50%, #D4AF37 100%);
}
.ta-hero-inner { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.ta-hero-icon {
    font-size: 3.5rem !important;
    width: 3.5rem;
    height: 3.5rem;
    color: #D4AF37;
    margin-bottom: 1rem;
    opacity: .9;
}
.ta-hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #F5F1E8;
    margin: 0 0 .75rem;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.ta-hero-subtitle {
    font-size: 1.1rem;
    color: rgba(245, 241, 232, .85);
    margin: 0 auto;
    max-width: 600px;
}

/* ============ Filter Bar ============ */
.ta-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 2rem;
    background: #fff;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(26, 26, 26, .06);
    border: 1px solid rgba(107, 30, 46, .06);
}
.ta-filter-bar input,
.ta-filter-bar select {
    flex: 1 1 200px;
    padding: .75rem 1rem;
    border: 2px solid #E5E5E5;
    border-radius: 8px;
    font-size: .9375rem;
    font-family: inherit;
    transition: border-color .3s ease;
    background: #fff;
    color: #1A1A1A;
}
.ta-filter-bar input:focus,
.ta-filter-bar select:focus { outline: none; border-color: #6B1E2E; }

/* ============ Buttons ============ */
.ta-btn-primary {
    background: linear-gradient(135deg, #6B1E2E, #4A1420);
    color: #F5F1E8;
    padding: .75rem 1.75rem;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: all .3s ease;
    border: none;
    cursor: pointer;
    font-size: .9375rem;
    box-shadow: 0 6px 20px rgba(107, 30, 46, .25);
    line-height: 1.4;
}
.ta-btn-primary:hover {
    background: linear-gradient(135deg, #4A1420, #2D1B1F);
    color: #F5F1E8;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(107, 30, 46, .4);
}
.ta-btn-ghost {
    background: transparent;
    color: #6B1E2E;
    border: 2px solid #6B1E2E;
    padding: .65rem 1.5rem;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: all .3s ease;
    font-size: .9375rem;
    cursor: pointer;
}
.ta-btn-ghost:hover { background: #6B1E2E; color: #F5F1E8; }

/* ============ Back Link ============ */
.ta-back {
    display: inline-flex;
    align-items: center;
    color: #6B1E2E;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 1.5rem;
    font-size: .9375rem;
    transition: color .3s ease;
}
.ta-back:hover { color: #D4AF37; }

/* ============ Single View ============ */
.ta-single {
    background: #fff;
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 8px 30px rgba(26, 26, 26, .08);
    border-top: 5px solid #D4AF37;
    max-width: 900px;
}
.ta-single-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #F0F0F0;
    font-size: .875rem;
    color: #5A5A5A;
}
.ta-single-image {
    margin: -3rem -3rem 2rem;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    max-height: 420px;
}
.ta-single-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ta-single-excerpt {
    font-size: 1.1rem;
    color: #4A4A4A;
    font-weight: 500;
    line-height: 1.6;
    padding-left: 1rem;
    border-left: 4px solid #D4AF37;
    margin-bottom: 2rem;
}
.ta-single-heading {
    color: #6B1E2E;
    font-size: 1.25rem;
    margin: 2rem 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid rgba(212, 175, 55, .3);
}
.ta-single-content { color: #3A3A3A; line-height: 1.75; font-size: 1rem; }
.ta-single-content p { margin-bottom: 1.25rem; }
.ta-single-content ul, .ta-single-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.ta-single-content li { margin-bottom: .5rem; }
.ta-single-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #F0F0F0;
}

/* ============ Cards (Base) ============ */
.ta-frontend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2rem;
    margin: 0 0 2rem;
}
.ta-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(26, 26, 26, .06);
    border: 2px solid transparent;
    border-top: 4px solid transparent;
    transition: all .5s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ta-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(107, 30, 46, .05) 0%, transparent 70%);
    border-radius: 50%;
    transition: transform .5s ease;
    z-index: 0;
}
.ta-card:hover::before { transform: scale(1.6); }
.ta-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 45px rgba(107, 30, 46, .15);
    border-color: rgba(107, 30, 46, .1);
    border-top-color: #6B1E2E;
}
.ta-card.is-closed { opacity: .75; }
.ta-card.is-closed:hover { opacity: 1; }
.ta-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.ta-card-title {
    font-size: 1.25rem;
    color: #1A1A1A;
    margin: 0 0 .5rem;
    line-height: 1.35;
    position: relative;
    z-index: 1;
}
.ta-ref { font-size: .8125rem; color: #8A8A8A; margin-bottom: .75rem; position: relative; z-index: 1; }
.ta-desc {
    color: #5A5A5A;
    font-size: .9375rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    flex-grow: 1;
}
.ta-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: .75rem 0 1rem;
    font-size: .8125rem;
    color: #5A5A5A;
    position: relative;
    z-index: 1;
}
.ta-job-meta .dashicons { color: #D4AF37; font-size: 14px; width: 14px; height: 14px; }
.ta-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(107, 30, 46, .08);
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.ta-card-actions { display: flex; gap: .75rem; align-items: center; }
.ta-date {
    font-size: .8125rem;
    color: #5A5A5A;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.ta-date .dashicons { color: #6B1E2E; font-size: 14px; width: 14px; height: 14px; }
.ta-download,
.ta-read-more,
.ta-apply,
.ta-view-more {
    color: #6B1E2E;
    font-weight: 700;
    font-size: .875rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
    transition: all .3s ease;
}
.ta-download:hover,
.ta-read-more:hover,
.ta-apply:hover,
.ta-view-more:hover {
    color: #D4AF37;
    gap: .6rem;
}

/* ============ Badges ============ */
.ta-badge {
    display: inline-block;
    padding: .25rem .9rem;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ta-badge-open,
.ta-badge-published { background: #E8F5E9; color: #2E7D32; }
.ta-badge-closed,
.ta-badge-archived { background: #FCE4EC; color: #C62828; }
.ta-badge-draft { background: #FFF3E0; color: #E65100; }
.ta-category,
.ta-job-type {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6B1E2E;
    background: rgba(107, 30, 46, .08);
    padding: .2rem .75rem;
    border-radius: 20px;
}

/* ============ Press Cards ============ */
.ta-press-card { padding: 0; }
.ta-press-card .ta-card-body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.ta-press-image { width: 100%; height: 200px; overflow: hidden; }
.ta-press-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
    display: block;
}
.ta-press-card:hover .ta-press-image img { transform: scale(1.08); }
.ta-author {
    font-size: .8125rem;
    color: #5A5A5A;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.ta-author .dashicons { color: #D4AF37; font-size: 14px; width: 14px; height: 14px; }

/* ============ Empty State ============ */
.ta-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(26, 26, 26, .05);
}
.ta-empty .dashicons {
    font-size: 3.5rem !important;
    width: 3.5rem;
    height: 3.5rem;
    color: #D4AF37;
    margin-bottom: 1rem;
    opacity: .7;
}
.ta-empty h3 { color: #1A1A1A; margin: 0 0 .5rem; font-size: 1.25rem; }
.ta-empty p { color: #5A5A5A; font-size: .9375rem; margin: 0; }

/* ============ Responsive ============ */
@media (max-width: 768px) {
    .ta-frontend-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .ta-single { padding: 1.75rem; }
    .ta-single-image { margin: -1.75rem -1.75rem 1.5rem; }
    .ta-hero { padding: 3.5rem 1.25rem 3rem; }
    .ta-filter-bar { padding: .75rem; }
    .ta-filter-bar input,
    .ta-filter-bar select { flex: 1 1 100%; }
}