/* ============================================
   AGENDA PAROQUIAL - CSS
   Igreja Matriz Nossa Senhora da Paz
   ============================================ */

/* ─── HERO ──────────────────────────────────── */
.agenda-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 80px;
}

.agenda-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../assets/images/IMG_3390.JPG');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.agenda-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(201,168,96,0.12) 0%, transparent 60%),
        linear-gradient(180deg, rgba(44,36,32,0.9) 0%, rgba(44,36,32,0.72) 40%, rgba(44,36,32,0.92) 100%);
}

.agenda-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(201,168,96,0.15) 0%, transparent 70%);
    z-index: 1;
}

.agenda-hero-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hero-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(201,168,96,0.6);
    animation: floatParticle linear infinite;
}

@keyframes floatParticle {
    0%   { transform: translateY(0) scale(1);   opacity: .4; }
    50%  { transform: translateY(-40px) scale(1.2); opacity: .8; }
    100% { transform: translateY(0) scale(1);   opacity: .4; }
}

.agenda-hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 24px;
}

.hero-icon-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.hero-icon-glow {
    position: absolute;
    inset: -12px;
    background: radial-gradient(circle, rgba(201,168,96,0.35) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: .6; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.1); }
}

.hero-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    box-shadow: 0 8px 32px rgba(201,168,96,0.4);
}

.agenda-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: -.02em;
}

.agenda-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: rgba(255,255,255,.8);
    font-weight: 300;
    margin-bottom: 20px;
}

.agenda-hero-badge {
    display: none;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
    padding: 8px 20px;
    border-radius: 100px;
    font-size: .85rem;
    color: rgba(255,255,255,.9);
    font-family: var(--font-body);
    margin: 0 auto;
}

.agenda-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0; right: 0;
    z-index: 2;
    line-height: 0;
}

.agenda-hero-wave svg {
    width: 100%;
    height: 80px;
    fill: var(--cream);
    display: block;
}

/* ─── MAIN LAYOUT ─────────────────────────── */
.agenda-main {
    padding: 60px 0 80px;
    background: var(--cream);
}

.agenda-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}

/* ─── CALENDAR PANEL ──────────────────────── */
.agenda-cal-panel {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: 0 2px 20px rgba(121,73,61,0.08);
    border: 1px solid rgba(121,73,61,0.08);
}

/* ─── NAVIGATION ──────────────────────────── */
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.cal-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #f0e8e0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: var(--dark-soft);
    transition: .25s;
}

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

.cal-nav-center { text-align: center; }

.cal-month-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 4px;
}

.cal-season-pill {
    display: inline-block;
    font-size: .75rem;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 14px;
    border-radius: 100px;
    background: #f0ebe6;
    color: var(--gray);
    transition: .25s;
}

/* ─── GRID HEADER ─────────────────────────── */
.cal-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 8px;
}

.cal-grid-header span {
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray);
    padding: 8px 0;
}

.cal-grid-header span:first-child { color: #a83232; }
.cal-grid-header span:last-child  { color: #5c3d7a; }

/* ─── CALENDAR GRID ───────────────────────── */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cal-day {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    padding: 4px 2px;
    transition: transform .2s, box-shadow .2s;
    min-height: 56px;
    border: 2px solid transparent;
    background: #faf7f4;
    overflow: hidden;
    gap: 3px;
}

.cal-day:not(.other-month):hover {
    transform: scale(1.06);
    z-index: 2;
    box-shadow: 0 4px 16px rgba(121,73,61,0.14);
}

.cal-day.other-month {
    opacity: .25;
    cursor: default;
    pointer-events: none;
    background: transparent;
}

.cal-day.today {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(201,168,96,0.22);
}

.cal-day.selected {
    background: var(--primary) !important;
    border-color: var(--primary-dark) !important;
}

.cal-day.selected .day-num { color: #fff !important; }
.cal-day.selected .day-event-dot { background: rgba(255,255,255,0.85) !important; }

.cal-day.has-evento {
    background: #fdf0e8;
    border-color: rgba(121,73,61,0.18);
}

.cal-day.has-evento .day-num { color: var(--primary-dark); font-weight: 700; }

.cal-day .day-num {
    font-size: .85rem;
    font-weight: 600;
    font-family: var(--font-body);
    line-height: 1;
    color: var(--dark-soft);
    z-index: 1;
}

.cal-day.sunday  .day-num { color: #a83232; }
.cal-day.saturday .day-num { color: #5c3d7a; }
.cal-day.has-evento.sunday .day-num,
.cal-day.has-evento.saturday .day-num { filter: saturate(1.3); }

/* Event dots */
.day-event-dots {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.day-event-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

.day-event-dot.more {
    background: var(--gold);
}

/* ─── SEM DATA SECTION ────────────────────── */
.sem-data-label {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray);
    padding: .6rem 0 .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-top: 1px solid #f0e8e0;
}

.sem-data-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.sem-data-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .9rem;
    background: #faf7f4;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid #f0e8e0;
    transition: .2s;
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--dark-soft);
}

.sem-data-item:hover { background: #fdf0e8; border-color: rgba(121,73,61,.2); }

.sem-data-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(121,73,61,.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

/* ─── SIDEBAR ─────────────────────────────── */
.agenda-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
}

.ag-panel {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(121,73,61,0.07);
    border: 1px solid rgba(121,73,61,0.08);
}

.ag-panel-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.1rem;
    background: #faf7f4;
    border-bottom: 1px solid #f0e8e0;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--primary);
}

.ag-panel-header.avisos-header { color: #a88940; }
.ag-panel-header i { font-size: .9rem; }

/* Event items in sidebar */
.ag-event-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f8f4f0;
    transition: background .15s;
}

.ag-event-item:last-child { border-bottom: none; }
.ag-event-item:hover { background: #fdf8f3; }

.ag-event-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.ag-thumb-ph {
    background: #f0e8e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4b8b0;
    font-size: 1rem;
}

.ag-event-info {
    flex: 1;
    min-width: 0;
}

.ag-event-date {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 600;
    color: #a88940;
    margin-bottom: .2rem;
}

.ag-event-titulo {
    font-family: var(--font-body);
    font-size: .83rem;
    font-weight: 700;
    color: var(--dark);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-event-tag {
    display: inline-block;
    margin-top: .2rem;
    background: rgba(121,73,61,.08);
    color: var(--primary);
    font-family: var(--font-body);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .1rem .45rem;
    border-radius: 20px;
}

.ag-event-arrow {
    color: #d8cdc5;
    font-size: .75rem;
    flex-shrink: 0;
}

.ag-empty {
    padding: 1.75rem 1rem;
    text-align: center;
    font-family: var(--font-body);
    font-size: .83rem;
    color: var(--gray);
    line-height: 1.7;
}

/* ─── AVISOS (reutilizados) ───────────────── */
.avisos-lista { padding: .5rem .75rem .75rem; display: flex; flex-direction: column; gap: .75rem; }

.aviso-card { border-radius: 10px; padding: .9rem 1rem; border-left: 3px solid #c4b8b0; background: #faf7f4; }
.aviso-info     { border-left-color: #4a90d9; }
.aviso-aviso    { border-left-color: #c9a860; }
.aviso-urgente  { border-left-color: #e05252; }
.aviso-pastoral { border-left-color: #52a870; }

.aviso-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; gap:.4rem; }

.aviso-tipo-badge { display:inline-flex; align-items:center; gap:.3rem; font-family:var(--font-body); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.15rem .5rem; border-radius:20px; }
.aviso-info     .aviso-tipo-badge { background:rgba(74,144,217,.1); color:#3070b0; }
.aviso-aviso    .aviso-tipo-badge { background:rgba(201,168,96,.12); color:#a88940; }
.aviso-urgente  .aviso-tipo-badge { background:rgba(224,82,82,.1); color:#c03030; }
.aviso-pastoral .aviso-tipo-badge { background:rgba(82,168,112,.1); color:#2d8050; }

.aviso-expira { font-family:var(--font-body); font-size:.68rem; color:var(--gray); display:flex; align-items:center; gap:.3rem; white-space:nowrap; }

.aviso-titulo { font-family:var(--font-display); font-size:.95rem; font-weight:700; color:var(--dark); margin:0 0 .35rem; line-height:1.3; }
.aviso-conteudo { font-family:var(--font-body); font-size:.78rem; color:var(--dark-soft); line-height:1.6; margin:0; }

/* ─── BACK LINK ───────────────────────────── */
.ag-back-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    padding: .6rem .9rem;
    border-radius: 8px;
    border: 1px solid rgba(121,73,61,.18);
    background: #fff;
    transition: .2s;
}

.ag-back-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ─── EVENT MODAL ─────────────────────────── */
.agenda-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(44,36,32,.55);
    z-index: 900;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    backdrop-filter: blur(3px);
}

.agenda-modal-overlay.open { display: flex; }

.agenda-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 600px;
    overflow: hidden;
    position: relative;
    margin: auto;
    box-shadow: 0 16px 64px rgba(44,36,32,0.22);
}

.agenda-modal-close {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 10;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    border: 1px solid #e8e0d8;
    color: var(--primary);
    font-size: .9rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: .2s;
}

.agenda-modal-close:hover { background: var(--primary); color: #fff; }

.agenda-modal-img-wrap img {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    display: block;
}

.agenda-modal-img-ph {
    height: 140px;
    background: linear-gradient(135deg, #f4ede6 0%, #e8d8cc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #c4b8b0;
}

.agenda-modal-body { padding: 1.5rem 1.75rem 1.75rem; }

.agenda-modal-date {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    color: #a88940;
    margin-bottom: .6rem;
}

.agenda-modal-tag {
    display: inline-block;
    background: rgba(121,73,61,.08);
    color: var(--primary);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .18rem .65rem;
    border-radius: 20px;
    margin-bottom: .7rem;
}

.agenda-modal-titulo {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 .8rem;
    line-height: 1.2;
}

.agenda-modal-desc {
    font-family: var(--font-body);
    font-size: .88rem;
    color: #5a4f4a;
    line-height: 1.75;
    margin-bottom: 1.1rem;
}

.agenda-modal-detalhes {
    border-top: 1px solid #f0e8e0;
    padding-top: .9rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.agenda-modal-detalhe {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-family: var(--font-body);
    font-size: .84rem;
    color: var(--dark-soft);
}

.agenda-modal-detalhe i {
    color: var(--gold);
    margin-top: .15rem;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

/* ─── RESPONSIVE ──────────────────────────── */
@media (max-width: 960px) {
    .agenda-layout {
        grid-template-columns: 1fr;
    }
    .agenda-sidebar {
        position: static;
        order: -1;
    }
}

@media (max-width: 600px) {
    .agenda-cal-panel { padding: 1.25rem 1rem; }
    .cal-day { min-height: 44px; }
    .cal-day .day-num { font-size: .75rem; }
    .agenda-modal-body { padding: 1.1rem 1.1rem 1.4rem; }
    .agenda-modal-titulo { font-size: 1.3rem; }
}