/* -------------------------------------------------------------------------
   The agenda box with a story: the meeting it is about, one tap from the full
   agenda on Before the Vote.

   Dressed like Before the Vote itself -- the cream card, the red-topped date
   tile -- so a reader who has seen the section knows where the button goes,
   and so it reads as a way out of the story rather than part of it.

   Scoped under .article-container because custom.css sets
   `.article-container a` (0,1,1) and `.article-container a:hover` (0,2,1):
   every selector here is at least two classes deep, every link has its own
   :hover, and every element carries its own colour rather than inheriting
   one -- a colour set on an element beats one inherited from the box.
   ------------------------------------------------------------------------- */

.article-container .agenda-link {
    margin: 30px 0;
    padding: 18px 20px 20px;
    background: #fffdf6;
    border: 1px solid #c6b89e;
    border-top: 4px solid #b21f2d;
    border-radius: 3px;
}

.article-container .agenda-link-kicker {
    margin: 0 0 14px;
    font: 900 0.7rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-indent: 0;
    color: #b21f2d;
}

.article-container .agenda-link-meeting {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.article-container .agenda-link-meeting + .agenda-link-meeting {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e6e1d3;
}

/* The date tile, as on the section front. */
.article-container .agenda-link-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7px 0 9px;
    background: #ffffff;
    border: 1px solid #c6b89e;
    border-top: 5px solid #b21f2d;
    text-decoration: none;
    color: #1b1b1b;
}
.article-container .agenda-link-mon {
    font: 900 0.68rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #b21f2d;
}
.article-container .agenda-link-day {
    font: 900 1.8rem/1.1 Georgia, 'Times New Roman', serif;
    color: #1b1b1b;
}
.article-container .agenda-link-dow {
    font: 700 0.68rem/1 Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #6b6b6b;
}

.article-container .agenda-link-body { min-width: 0; }

.article-container .agenda-link-status {
    margin: 0 0 4px;
    font: 900 0.7rem/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-indent: 0;
}
.article-container .agenda-link-status--upcoming { color: #1a7f4b; }
.article-container .agenda-link-status--past { color: #6b6b6b; }

.article-container .agenda-link-title {
    margin: 0;
    font: 700 1.2rem/1.25 Georgia, 'Times New Roman', serif;
    text-indent: 0;
}
.article-container .agenda-link-title a {
    color: #1b1b1b;
    text-decoration: none;
}
.article-container .agenda-link-title a:hover {
    color: #164f8b;
    text-decoration: underline;
}

.article-container .agenda-link-meta {
    margin: 4px 0 0;
    font: 0.92rem/1.45 Georgia, 'Times New Roman', serif;
    text-indent: 0;
    color: #4a4a4a;
}

.article-container .agenda-link-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 14px;
    background: #164f8b;
    color: #ffffff;
    text-decoration: none;
    font: 800 0.78rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.article-container .agenda-link-btn:hover {
    background: #0e355e;
    color: #ffffff;
    text-decoration: none;
}

@media (max-width: 480px) {
    .article-container .agenda-link { padding: 16px 14px 18px; }
    .article-container .agenda-link-meeting { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
    .article-container .agenda-link-day { font-size: 1.5rem; }
    .article-container .agenda-link-title { font-size: 1.08rem; }
}