/* =============================================================
   Notification list + Achievement grid — modern UI (2026-07)
   Loaded independently of modern.css so styles stay isolated.
   ============================================================= */

/* --- Section header shared --- */
.lhc-notices, .lhc-achieves { margin: 0 auto 40px; }
.lhc-notices__head, .lhc-achieves__head {
	display: flex; align-items: center; gap: 14px;
	padding: 18px 20px;
	background: linear-gradient(135deg, var(--lhc-chrome-700) 0%, var(--lhc-chrome) 100%);
	color: #fff;
	border-radius: var(--lhc-radius);
	margin-bottom: 20px;
	box-shadow: var(--lhc-shadow);
	position: relative;
	overflow: hidden;
}
.lhc-notices__head::after, .lhc-achieves__head::after {
	content:""; position:absolute; right:-70px; top:-70px;
	width:220px; height:220px; border-radius:50%;
	background: radial-gradient(circle, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 65%);
	pointer-events:none;
}
.lhc-notices__icon, .lhc-achieves__icon {
	width:52px; height:52px; border-radius:14px;
	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.24);
	display:inline-flex; align-items:center; justify-content:center;
	font-size:22px; color:#fff; flex-shrink:0; position:relative; z-index:1;
}
.lhc-notices__title, .lhc-achieves__title {
	color:#fff !important; font-weight:700; letter-spacing:-0.01em;
	font-size:22px; margin:0; line-height:1.2;
}
.lhc-notices__sub, .lhc-achieves__sub {
	color: rgba(255,255,255,0.85); font-size:13px; margin:4px 0 0;
}

/* --- Notification list --- */
.lhc-notices__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.lhc-notice { background:#fff; border:1px solid var(--lhc-border); border-radius:12px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; overflow:hidden; }
.lhc-notice:hover { transform: translateY(-1px); border-color: var(--lhc-brand); box-shadow: 0 10px 22px rgba(var(--lhc-chrome-rgb),0.14); }
.lhc-notice.is-new { border-left: 3px solid var(--lhc-accent); }
.lhc-notice__link { display:flex; align-items:stretch; gap:14px; padding:14px 16px; text-decoration:none !important; color:var(--lhc-text) !important; }
.lhc-notice__date { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:60px; padding:8px 6px; background: linear-gradient(180deg,#fbfdf7 0%,#eef4e2 100%); border-radius:10px; color:var(--lhc-brand-700); flex-shrink:0; }
.lhc-notice__day { font-size:22px; font-weight:700; line-height:1; }
.lhc-notice__month { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
.lhc-notice__year { font-size:10px; color:var(--lhc-muted); margin-top:1px; }
.lhc-notice__body { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; }
.lhc-notice__title { font-size:15px; font-weight:600; color:var(--lhc-text); line-height:1.4; }
.lhc-notice__meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12px; color:var(--lhc-muted); }
.lhc-notice__date-inline { display:inline-flex; align-items:center; gap:4px; }
.lhc-notice__date-inline .fa { font-size:11px; }
.lhc-notice__pill { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; font-size:11px; font-weight:600; border-radius:999px; letter-spacing:.02em; text-transform:uppercase; }
.lhc-notice__pill--new { background: var(--lhc-accent); color: #6b4b04; }
.lhc-notice__pill--file { background: rgba(220, 38, 38, 0.10); color: #b91c1c; }
.lhc-notice__pill--file.lhc-notice__file--pdf { background: rgba(220, 38, 38, 0.10); color: #b91c1c; }
.lhc-notice__cta { align-self:center; width:36px; height:36px; border-radius:50%; background: rgba(var(--lhc-chrome-rgb),0.08); color: var(--lhc-brand-700); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition: background .15s ease, transform .15s ease; }
.lhc-notice__link:hover .lhc-notice__cta { background: var(--lhc-brand); color:#fff; transform: translateX(2px); }
.lhc-notice__link:hover .lhc-notice__title { color: var(--lhc-brand-700); }

/* --- Achievement grid --- */
.lhc-achieves__grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:20px; }
.lhc-achieve { background:#fff; border:1px solid var(--lhc-border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.lhc-achieve:hover { transform: translateY(-3px); border-color: var(--lhc-brand); box-shadow: 0 14px 28px rgba(var(--lhc-chrome-rgb),0.16); }
.lhc-achieve__media { display:block; position:relative; padding-top: 62%; background:#f6f7f4; overflow:hidden; }
.lhc-achieve__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1); }
.lhc-achieve__media img.lhc-achieve__media--placeholder { object-fit:contain; opacity:.55; padding:24px; }
.lhc-achieve:hover .lhc-achieve__media img:not(.lhc-achieve__media--placeholder) { transform: scale(1.05); }
.lhc-achieve__badge { position:absolute; top:12px; left:12px; z-index:2; background: var(--lhc-accent); color:#6b4b04; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:4px 10px; border-radius:999px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.lhc-achieve__body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; }
.lhc-achieve__title { font-size:16px; font-weight:700; line-height:1.35; margin:0; }
.lhc-achieve__title a { color: var(--lhc-text) !important; text-decoration:none !important; transition: color .15s ease; }
.lhc-achieve__title a:hover { color: var(--lhc-brand-700) !important; }
.lhc-achieve__meta { display:inline-flex; align-items:center; gap:6px; font-size:12px; color: var(--lhc-muted); }
.lhc-achieve__meta .fa { font-size:11px; }
.lhc-achieve__excerpt { font-size:13px; line-height:1.55; color:#4b5563; margin:0; flex:1 1 auto; }
.lhc-achieve__more { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color: var(--lhc-brand-700) !important; text-decoration:none !important; margin-top:4px; align-self:flex-start; transition: gap .15s ease; }
.lhc-achieve__more:hover { gap:10px; }

/* --- Modern pager (shared) --- */
.lhc-pager { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin: 28px 0 10px; }
.lhc-pager__prev a, .lhc-pager__next a { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; background:#fff; border:1px solid var(--lhc-border); color: var(--lhc-brand-700) !important; text-decoration:none !important; font-weight:600; font-size:13px; transition: background .15s ease, transform .15s ease, border-color .15s ease; }
.lhc-pager__prev a:hover, .lhc-pager__next a:hover { background: var(--lhc-brand); color:#fff !important; border-color: var(--lhc-brand); transform: translateY(-1px); }
.lhc-pager__pages { display:inline-flex; align-items:center; gap:6px; }
.lhc-pager__pages a, .lhc-pager__pages span {
	display:inline-flex; align-items:center; justify-content:center;
	min-width:36px; height:36px; padding:0 10px; border-radius:999px;
	background:#fff; border:1px solid var(--lhc-border); color: var(--lhc-text) !important;
	font-size:13px; font-weight:600; text-decoration:none !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lhc-pager__pages a:hover { background: rgba(var(--lhc-chrome-rgb),0.08); color: var(--lhc-brand-700) !important; border-color: var(--lhc-brand); }
.lhc-pager__pages .current,
.lhc-pager__pages span.current { background: var(--lhc-brand); color:#fff !important; border-color: var(--lhc-brand); }

/* --- Empty states --- */
.lhc-notices__empty, .lhc-achieves__empty { text-align:center; padding: 60px 20px; background:#fff; border:1px dashed var(--lhc-border); border-radius:14px; color: var(--lhc-muted); }
.lhc-notices__empty .fa, .lhc-achieves__empty .fa { font-size:42px; color: var(--lhc-brand); opacity:.4; margin-bottom:12px; }
.lhc-notices__empty p, .lhc-achieves__empty p { margin:0; font-size:14px; }

/* Dark mode */
[data-theme="dark"] .lhc-notice,
[data-theme="dark"] .lhc-achieve { background: var(--lhc-surface); border-color: var(--lhc-border); }
[data-theme="dark"] .lhc-notice__title,
[data-theme="dark"] .lhc-achieve__title a { color: var(--lhc-text) !important; }
[data-theme="dark"] .lhc-notice__excerpt,
[data-theme="dark"] .lhc-achieve__excerpt { color: #c3ccd8; }
[data-theme="dark"] .lhc-notice__date { background: linear-gradient(180deg,#232c38 0%,#1a212a 100%); color: var(--lhc-accent); }
[data-theme="dark"] .lhc-notices__empty, [data-theme="dark"] .lhc-achieves__empty { background: var(--lhc-surface); }
[data-theme="dark"] .lhc-pager__prev a, [data-theme="dark"] .lhc-pager__next a,
[data-theme="dark"] .lhc-pager__pages a, [data-theme="dark"] .lhc-pager__pages span { background: var(--lhc-surface); border-color: var(--lhc-border); color: var(--lhc-text) !important; }

/* The image placeholder behind a card's thumbnail is a light grey; on a dark
   card that showed as a bright block while images loaded (or when a post has
   no featured image). */
[data-theme="dark"] .lhc-achieve__media { background: #232c38; }

/* NOTE: the .lhc-notices__head / .lhc-achieves__head block at the top of this
   file is dead — both archives render their banner through
   template-parts/page-title.php, which outputs .lhc-pageheader. The dark-mode
   fix for that banner therefore lives in style.css, not here. */

/* These use --lhc-brand-700 as dark text on a WHITE card. In dark mode the
   card is dark and brand-700 stays dark by design (it is the text colour on
   light accent chips elsewhere), so it has to be lightened here or the
   "Read more" link and hover states become invisible. */
[data-theme="dark"] .lhc-achieve__more,
[data-theme="dark"] .lhc-achieve__title a:hover,
[data-theme="dark"] .lhc-notice__link:hover .lhc-notice__title,
[data-theme="dark"] .lhc-notice__cta,
[data-theme="dark"] .lhc-pager__prev a:hover,
[data-theme="dark"] .lhc-pager__next a:hover,
[data-theme="dark"] .lhc-pager__pages a:hover { color: var(--lhc-brand) !important; }
[data-theme="dark"] .lhc-notice__cta { background: rgba(var(--lhc-brand-rgb), 0.14); }
[data-theme="dark"] .lhc-notice__link:hover .lhc-notice__cta { background: var(--lhc-brand); color: #16202b !important; }
[data-theme="dark"] .lhc-pager__pages span.current { background: var(--lhc-brand); color: #16202b !important; border-color: var(--lhc-brand); }

@media (max-width: 600px) {
	.lhc-notices__head, .lhc-achieves__head { padding:14px 16px; gap:10px; }
	.lhc-notices__title, .lhc-achieves__title { font-size:18px; }
	.lhc-notice__link { padding:12px 12px; gap:10px; }
	.lhc-notice__date { min-width:52px; padding:6px 4px; }
	.lhc-notice__day { font-size:18px; }
	.lhc-achieves__grid { grid-template-columns: 1fr; gap:14px; }
}