/* plan-dept5: styles extracted from index.php and calendar.php */

/* From plan-dept5/index.php */
/* Sub-page hero */
.pr5-hero {
    position: relative;
    overflow: hidden;
    /* dark gradient overlay on top of banner image for readability */
    background: linear-gradient(135deg,
                rgba(11,31,15,0.65) 0%, rgba(26,58,34,0.5) 60%, rgba(13,43,20,0.7) 100%),
              url('../css/img/dep5.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 80px 24px 64px;
    text-align: center; color: #fff;
}
.pr5-hero::after {
    content: ''; position: absolute; top: -200px; left: 50%;
    transform: translateX(-50%); width: 700px; height: 700px; border-radius: 50%;
    background: radial-gradient(circle, rgba(58,90,64,.35) 0%, transparent 70%);
    pointer-events: none;
}
.pr5-hero > * { position: relative; z-index: 1; }
.pr5-hero h1 {
    font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 700; color: #fff;
    line-height: 1.2; margin: 0 0 12px;
}
.pr5-hero h1 em { color: var(--glam-gold); font-style: normal; }
.pr5-hero .ev-hero-sub { max-width: 540px; margin: 0 auto 40px; }
/* Dept5 theme-banner — reuse dept5 index banner image */
.theme-banner {
        background: linear-gradient(135deg,
                                rgba(11,31,15,0.65) 0%, rgba(26,58,34,0.5) 60%, rgba(13,43,20,0.7) 100%),
                            url('../css/img/dep5.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        padding: 60px 48px 64px;
        position: relative;
        overflow: hidden;
}

/* Move inline measure detail header bg here */
.pr5-detail-header {
    background: linear-gradient(135deg, rgba(11,31,15,0.65) 0%, rgba(26,58,34,0.5) 60%, rgba(13,43,20,0.7) 100%),
                url('../css/img/banner.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #fff;
}

/* Activity photo cards */
.pr5-act-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.pr5-act-card {
    border-radius: 14px; border: 1px solid var(--border); background: #fff;
    overflow: hidden; box-shadow: 0px 12px 30px -10px rgba(0,0,0,.06);
    transition: transform .25s, box-shadow .25s;
    text-decoration: none; color: inherit; display: flex; flex-direction: column;
}
.pr5-act-card:hover { transform: translateY(-5px); box-shadow: 0px 20px 44px -10px rgba(0,0,0,.11); }
.pr5-act-thumb {
    width: 100%; aspect-ratio: 16/9;
    background: var(--green-100);
    display: flex; align-items: center; justify-content: center;
    color: var(--green-700); font-size: 2.5rem; overflow: hidden;
}
.pr5-act-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr5-act-body { padding: 1rem 1.1rem 1.2rem; flex: 1; display: flex; flex-direction: column; }
.pr5-act-date { font-size: .7rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; margin-bottom: .35rem; }
.pr5-act-title { font-weight: 600; font-size: .95rem; color: var(--text-dark); line-height: 1.45; margin-bottom: .5rem; flex: 1; }
.pr5-act-dept { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--green-50); color: var(--glam-green); font-size: .72rem; font-weight: 600; }
@media (max-width: 900px) { .pr5-act-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .pr5-act-grid { grid-template-columns: 1fr; } }

/* Two-column split */
.pr5-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 780px) { .pr5-2col { grid-template-columns: 1fr; } }

/* Sub-section head */
.pr5-sub-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.pr5-sub-head h3 { font-size: 1rem; font-weight: 700; color: var(--glam-green); margin: 0; display: flex; align-items: center; gap: .4rem; }
.pr5-see-all {
    font-size: .78rem; font-weight: 600; color: var(--glam-green);
    text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 4px 14px;
    transition: background .15s;
}
.pr5-see-all:hover { background: var(--green-50); text-decoration: none; }

/* Course tags */
.pr5-tag { font-size: .72rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; }
.tag-online  { background: #e8f0fe; color: #1565c0; }
.tag-onsite  { background: #e8f5e9; color: #2e7d32; }
.tag-hybrid  { background: #fce4ec; color: #c62828; }
.tag-cert    { background: #fff9c4; color: #f57f17; }

/* Thumbnail in list items */
.pr5-thumb { flex-shrink: 0; width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--green-100); }

/* Empty state */
.pr5-empty { text-align: center; padding: 3rem 1rem; color: var(--text-light); }
.pr5-empty > i { display: block; margin: 0 auto .75rem; width: 40px; height: 40px; opacity: .3; }
/* Theme card video embed */
.ev-theme-video { margin-top: 12px; }
.ev-video-embed { position: relative; padding-top: 56.25%; }
.ev-video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }

/* From plan-dept5/calendar.php */
.cal-page-wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/* ── Section head ───────────────────────────── */
.cal-head { text-align:center; margin-bottom:2rem; }
.cal-head .eyebrow { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--glam-gold); background:rgba(197,168,128,.08); border:1px solid rgba(197,168,128,.2);
    border-radius:99px; padding:4px 16px; display:inline-block; margin-bottom:.8rem; }
.cal-head h1 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; color:var(--green-900); margin:0 0 .4rem; }
.cal-head p { color:var(--muted); margin:0; font-size:.95rem; }

/* ── Two-column split ───────────────────────── */
.cal-split { display:flex; gap:20px; align-items:flex-start; }
.col-5 { flex:0 0 calc(5/12*100%); min-width:0; }
.col-7 { flex:0 0 calc(7/12*100%); min-width:0; }

/* ── Section label ───────────────────────────── */
.tl-header { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--green-700); font-weight:700; margin-bottom:1rem; padding-bottom:.6rem;
    border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.4rem; }

/* ── Timeline (left) ────────────────────────── */
.timeline { position:relative; padding-left:48px; }
.timeline::before { content:''; position:absolute; left:18px; top:0; bottom:0;
    width:2px; background:var(--border); }
.tl-item { position:relative; margin-bottom:1.6rem; }
.tl-item::before { content:''; position:absolute; left:-35px; top:14px;
    width:12px; height:12px; border-radius:50%; border:2px solid #fff;
    box-shadow:0 0 0 2px var(--border); background:#fff; }
.tl-item.upcoming::before { background:var(--green-700); box-shadow:0 0 0 3px rgba(58,90,64,.2); }
.tl-item.today::before { background:var(--gold); box-shadow:0 0 0 4px rgba(197,168,128,.3); }
/* date shown inline in .tl-meta */
.tl-card { background:#fff; border-radius:10px; padding:.9rem 1.1rem;
    border:1px solid var(--border); box-shadow:0 2px 8px rgba(0,0,0,.04);
    transition:box-shadow .2s, transform .2s; }
.tl-card:hover { box-shadow:0 4px 16px rgba(58,90,64,.1); transform:translateY(-1px); }
.tl-card-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem; }
.tl-icon-wrap { width:34px; height:34px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; color:#fff; background:#C5A880 !important; }
.tl-icon-wrap svg { width:16px; height:16px; }
.tl-title { font-weight:600; font-size:.92rem; color:var(--text-dark); }
.tl-badge { margin-left:auto; border-radius:99px; padding:2px 8px; font-size:.68rem; font-weight:700; white-space:nowrap; }
.tl-badge.upcoming { background:#d1fae5; color:#065f46; }
.tl-badge.today    { background:#fef3c7; color:#b45309; }
.tl-badge.past     { background:#f3f4f6; color:#6b7280; }
.tl-meta { display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:.78rem; margin-top:.3rem; }
.tl-meta span { display:flex; align-items:center; gap:.25rem; color:var(--muted); }
.tl-meta svg { width:12px; height:12px; }

/* Date now displayed inline with time in .tl-meta */
/* ── Mini Calendar (right) ──────────────────── */
.mini-cal { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; }
.mini-cal-nav { display:flex; align-items:center; justify-content:space-between;
    padding:.9rem 1.1rem; background:var(--green-800); color:#fff; }
.mini-cal-nav button { background:none; border:none; color:#fff; cursor:pointer;
    padding:4px 10px; border-radius:6px; font-size:1.3rem; line-height:1; transition:background .15s; }
.mini-cal-nav button:hover { background:rgba(255,255,255,.15); }
#cal-month-label { font-weight:600; font-size:1rem; }
.cal-dow { display:grid; grid-template-columns:repeat(7,1fr);
    text-align:center; font-size:.7rem; font-weight:700; color:var(--muted);
    padding:.6rem .6rem 0; gap:2px; }
#cal-grid { display:grid; grid-template-columns:repeat(7,1fr);
    gap:4px; padding:.5rem .6rem .9rem; }
.cal-cell { min-height:36px; border-radius:7px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; font-size:.85rem;
    padding:3px 0; position:relative; color:var(--text-dark); transition:background .15s; }
.cal-cell.empty { cursor:default; }
.cal-cell.has-events { cursor:pointer; font-weight:600; color:var(--green-800); background:rgba(74,121,86,.08); }
.cal-cell.has-events:hover { background:rgba(74,121,86,.18); }
.cal-cell.is-today { background:var(--green-800); color:#fff; font-weight:700; border-radius:8px; }
.cal-cell.is-today.has-events { background:var(--green-700); }
.ev-dot { display:block; width:5px; height:5px; border-radius:50%; background:var(--green-600); margin-top:2px; }
.cal-cell.is-today .ev-dot { background:rgba(255,255,255,.7); }

/* ── Event detail panel ─────────────────────── */
#ev-detail-panel { margin-top:10px; display:none; border-radius:10px;
    border:1px solid var(--border); background:#fff; padding:12px 14px;
    max-height:280px; overflow-y:auto; }
.ev-detail-date { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em;
    color:var(--muted); margin-bottom:10px; font-weight:700; }
.ev-detail-item { margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.ev-detail-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.ev-di-head { padding-left:8px; margin-bottom:4px; }
.ev-di-head strong { display:block; font-size:.9rem; color:var(--text-dark); }
.ev-di-time { font-size:.78rem; color:var(--muted); }
.ev-di-meta { font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:.3rem; margin-top:3px; }
.ev-di-meta svg { width:12px; height:12px; }
.ev-di-desc { font-size:.82rem; color:var(--muted); margin-top:4px; line-height:1.5; }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
    .cal-split { flex-direction:column; }
    .col-5, .col-7 { flex:0 0 100%; width:100%; }
}