/* Catholic Signal — Frontend Styles */
:root { --cs-accent: #b8962e; --cs-navy: #1a2744; --cs-cream: #faf8f4; --cs-border: #e0d8cc; }

.csignal-wrap { background: var(--cs-cream); min-height: 60vh; }
.csignal-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* Masthead */
.csignal-masthead { background: var(--cs-navy); border-bottom: 3px solid var(--cs-accent); padding: 24px 0; }
.csignal-masthead__inner { display: flex; align-items: center; justify-content: space-between; }
.csignal-masthead__title { font-family: 'Cormorant Garamond', Georgia, serif; color: #fff; font-size: 28px; font-weight: 600; margin: 0 0 4px; }
.csignal-masthead__meta { color: rgba(255,255,255,.65); font-size: 12px; letter-spacing: .04em; margin: 0; }
.csignal-color-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }

/* Tiers */
.csignal-tier { padding: 28px 0; border-bottom: 1px solid var(--cs-border); }
.csignal-tier__header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.csignal-tier__badge { font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.csignal-tier__badge--today { background: #b94040; color: #fff; }
.csignal-tier__badge--week  { background: #1a2744; color: #fff; }
.csignal-tier__badge--rest  { background: #e8ecf4; color: #1a2744; }
.csignal-tier__count { font-size: 12px; color: #888; }

/* Today grid — larger cards */
.csignal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.csignal-grid--today { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* Cards */
.csignal-card { background: #fff; border-radius: 10px; border: 1px solid var(--cs-border); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s; }
.csignal-card:hover { box-shadow: 0 4px 18px rgba(26,39,68,.1); }
.csignal-card--today { border-top: 3px solid #b94040; }
.csignal-card--week  { border-top: 3px solid var(--cs-navy); }

.csignal-card__img-wrap { aspect-ratio: 16/9; overflow: hidden; }
.csignal-card__img { width: 100%; height: 100%; object-fit: cover; }
.csignal-card__body { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; }
.csignal-card__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.csignal-card__source { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-accent); }
.csignal-card__age    { font-size: 10px; color: #999; }
.csignal-card__title  { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 600; color: var(--cs-navy); line-height: 1.3; margin: 0 0 8px; }
.csignal-card__title a { color: inherit; text-decoration: none; }
.csignal-card__title a:hover { color: var(--cs-accent); }
.csignal-card__excerpt { font-size: 12px; color: #666; line-height: 1.5; flex: 1; margin-bottom: 10px; }
.csignal-card__read { font-size: 12px; font-weight: 600; color: var(--cs-navy); text-decoration: none; margin-top: auto; }
.csignal-card__read:hover { color: var(--cs-accent); }

/* List items (The Rest) */
.csignal-list { display: flex; flex-direction: column; gap: 0; }
.csignal-list-item { padding: 12px 0; border-bottom: 1px solid var(--cs-border); display: flex; flex-direction: column; gap: 3px; }
.csignal-list-item__title { font-size: 14px; font-weight: 500; color: var(--cs-navy); text-decoration: none; line-height: 1.4; }
.csignal-list-item__title:hover { color: var(--cs-accent); }
.csignal-list-item__meta { display: flex; gap: 8px; }

/* Mobile */
@media (max-width: 768px) {
    .csignal-grid { grid-template-columns: 1fr 1fr; }
    .csignal-masthead__title { font-size: 22px; }
}
@media (max-width: 480px) {
    .csignal-grid { grid-template-columns: 1fr; }
    .csignal-container { padding: 0 16px; }
}

/* Subscribe bar */
.csignal-subscribe-bar {
    background: #1a2744;
    border-radius: 10px;
    padding: 18px 22px;
    margin: 20px 0 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.csignal-subscribe-bar__text {
    flex: 1;
    min-width: 180px;
}
.csignal-subscribe-bar__text strong {
    display: block;
    color: #fff;
    font-size: 14px;
    margin-bottom: 2px;
}
.csignal-subscribe-bar__text span {
    color: rgba(255,255,255,.6);
    font-size: 12px;
}
.csignal-subscribe-bar__form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.csignal-sub-input {
    padding: 9px 13px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 13px;
    width: 220px;
    outline: none;
    transition: border-color .15s;
}
.csignal-sub-input::placeholder { color: rgba(255,255,255,.45); }
.csignal-sub-input:focus { border-color: #b8962e; }
.csignal-sub-btn {
    padding: 9px 18px;
    background: #b8962e;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s;
    white-space: nowrap;
}
.csignal-sub-btn:hover:not(:disabled) { background: #a07826; }
.csignal-sub-btn:disabled { opacity: .7; }
.csignal-subscribe-bar__fine {
    width: 100%;
    font-size: 10px;
    color: rgba(255,255,255,.4);
    margin: 0;
}
.csignal-subscribed-bar {
    background: #e8f4ec;
    color: #1a6640;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    margin: 16px 0 20px;
}