/* ============================================================
   news.css — news's own styles, moved out of the <style>
   block that followed styles.css in news.html.
   Linked from the same place in the page, so the order is unchanged.
   ============================================================ */

/* ---- Catholic News page (scoped; relies on the site's variables in styles.css) ---- */
.news-head{ --pagehead-position:center 40%; }
/* To put a painting behind the heading like the other pages, add the class
 "pagehead-image" to the <section> below and set the image here:
 .news-head{ --pagehead-image:url("/images/your-painting.jpg"); }            */

.news-page{ padding:34px 0 80px; }

.news-toolbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px 28px; flex-wrap:wrap; margin-bottom:18px; }
.news-tabs{ display:flex; gap:6px 26px; flex-wrap:wrap; }
.news-tabs button{ appearance:none; background:none; border:0; border-bottom:1px solid transparent; padding:10px 2px 8px; cursor:pointer;
font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); transition:color .18s, border-color .18s; }
.news-tabs button:hover{ color:var(--espresso); }
.news-tabs button[aria-pressed="true"]{ color:var(--espresso); border-bottom-color:var(--lit-accent); }
.news-tabs button:focus-visible{ outline:2px solid var(--lit-accent); outline-offset:4px; border-radius:2px; }

.news-tools{ display:flex; align-items:center; gap:18px; }
.news-updated{ font-family:var(--display); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.news-updated::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--lit-accent); margin:0 8px 1px 0; vertical-align:middle; opacity:.85; }
.news-updated:empty{ display:none; }

.news-sources{ position:relative; }
.news-sources > summary{ list-style:none; cursor:pointer; font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); padding:8px 12px; border:1px solid var(--rule); border-radius:3px; background:var(--paper-card); user-select:none; }
.news-sources > summary::-webkit-details-marker{ display:none; }
.news-sources > summary::after{ content:" ▾"; font-size:10px; }
.news-sources[open] > summary{ color:var(--espresso); border-color:var(--lit-accent); }
.news-sources-panel{ position:absolute; right:0; top:calc(100% + 8px); z-index:20; width:min(320px, 86vw); background:var(--paper-card); border:1px solid var(--rule); border-top:3px solid var(--lit-accent); border-radius:4px; padding:16px 18px 14px; box-shadow:0 14px 40px rgba(26,18,11,.14); }
.news-sources-panel p{ font-family:var(--body); font-size:14px; line-height:1.5; color:var(--muted); margin:0 0 10px; }
.news-sources-panel ul{ list-style:none; margin:0; padding:0; max-height:300px; overflow:auto; }
.news-sources-panel li{ display:flex; align-items:center; gap:10px; padding:5px 0; font-family:var(--body); font-size:15.5px; color:var(--ink); }
.news-sources-panel li .n{ margin-left:auto; font-family:var(--display); font-size:10px; letter-spacing:.1em; color:var(--muted); }
.news-sources-panel input{ accent-color:var(--gold); width:15px; height:15px; margin:0; }
.news-sources-panel .news-reset{ margin-top:10px; appearance:none; background:none; border:0; padding:0; cursor:pointer; font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); }
.news-sources-panel .news-reset:hover{ color:var(--espresso); }

.news-status{ text-align:center; font-family:var(--head); font-style:italic; font-size:19px; color:var(--muted); padding:28px 0 8px; }
.news-status:empty{ display:none; }
.news-status a{ text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; }

.news-list{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; }
.news-card{ position:relative; display:flex; align-items:flex-start; gap:22px; background:#fff; border:1px solid var(--rule); border-left:3px solid var(--lit-accent); border-radius:4px; padding:18px 22px 17px; transition:transform 180ms, border-color 180ms, box-shadow 180ms; }
.news-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.news-card:hover, .news-card:focus-within{ transform:translateY(-1px); border-color:var(--gold); border-left-color:var(--lit-accent); box-shadow:0 10px 28px rgba(26,18,11,.08); }

.news-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:9px; }
/* The outlet's own icon; its initial on a dark disc when it has none or it fails to load. */
.news-mark{ flex:none; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:4px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px var(--rule); }
.news-mark img{ display:block; width:100%; height:100%; object-fit:contain; }
.news-mark.is-initial{ border-radius:50%; background:var(--espresso); box-shadow:none; color:var(--champagne); font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0; }
.news-mark.is-initial::before{ content:attr(data-initial); }
.news-sources-panel .news-mark{ width:18px; height:18px; border-radius:3px; }
.news-sources-panel .news-mark.is-initial{ border-radius:50%; font-size:9px; }

/* The story's picture, from the outlet's feed, through the Image CDN. */
.news-thumb{ flex:none; width:168px; aspect-ratio:3 / 2; margin:2px 0 0; border-radius:3px; overflow:hidden; background:var(--paper); box-shadow:0 0 0 1px var(--rule); }
.news-thumb img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 300ms; }
.news-card:hover .news-thumb img{ transform:scale(1.03); }
.news-source{ color:var(--gold-deep); }
.news-source:hover{ color:var(--espresso); }
.news-sep{ color:var(--rule); }
.news-meta time{ color:var(--muted); letter-spacing:.1em; font-weight:500; }
.news-region{ margin-left:auto; color:var(--muted); font-weight:500; letter-spacing:.14em; }

.news-title{ font-family:var(--head); font-size:22px; font-weight:600; line-height:1.22; margin:0; color:var(--espresso); }
.news-title a{ color:inherit; }
.news-title a::after{ content:""; position:absolute; inset:0; }  /* whole card clickable */
.news-card:hover .news-title a{ color:var(--gold-deep); }
.news-summary{ font-family:var(--body); font-size:15.5px; line-height:1.55; color:var(--muted); margin:8px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-also{ position:relative; z-index:1; font-family:var(--body); font-style:italic; font-size:14px; color:var(--muted); margin:10px 0 0; }
.news-also a{ color:var(--gold-deep); text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; }
.news-also a:hover{ color:var(--espresso); }

.news-more{ text-align:center; margin-top:30px; }
.news-more button{ appearance:none; background:none; border:1px solid var(--gold); border-radius:3px; padding:12px 28px; cursor:pointer; font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); transition:background .18s, color .18s; }
.news-more button:hover{ background:var(--espresso); color:var(--paper); border-color:var(--espresso); }

.news-colophon{ max-width:var(--measure); margin:54px auto 0; text-align:center; font-family:var(--head); font-style:italic; font-size:16.5px; line-height:1.55; color:var(--muted); }
.news-colophon a{ text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; }

/* loading skeleton */
.news-skel{ height:92px; border-radius:4px; border:1px solid var(--rule); border-left:3px solid var(--rule);
background:linear-gradient(100deg, #fff 35%, var(--paper-card) 50%, #fff 65%); background-size:300% 100%; animation:news-shimmer 1.4s infinite linear; }
@keyframes news-shimmer{ from{ background-position:120% 0 } to{ background-position:-80% 0 } }
@media (prefers-reduced-motion: reduce){ .news-skel{ animation:none } .news-card, .news-thumb img{ transition:none } .news-card:hover .news-thumb img{ transform:none } }

@media (max-width: 640px){
.news-page{ padding-top:22px; }
.news-tabs{ gap:4px 18px; }
.news-tabs button{ letter-spacing:.18em; }
.news-card{ padding:15px 16px 14px; gap:14px; }
.news-title{ font-size:19.5px; }
.news-thumb{ width:92px; aspect-ratio:1; margin-top:24px; }
.news-region{ display:none; }
}