/* -----------------------------------------------------------------------------
   Shared surfaces
----------------------------------------------------------------------------- */

.Card,
.RailCard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* -----------------------------------------------------------------------------
   Utilities
----------------------------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* -----------------------------------------------------------------------------
   Site Header
----------------------------------------------------------------------------- */

.SiteHeader {
    padding: var(--space-5) 0 var(--space-3);
}

.SiteHeader-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.SiteHeader-logo img {
    display: block;
    max-width: 100%;
    height: auto;
}

.SiteHeader-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.AccountBar {
    font-size: 13px;
    color: var(--muted);
}

.SiteHeader-icons {
    display: flex;
    gap: 10px;
}

.SiteHeader-icons img {
    display: block;
    opacity: 0.9;
}
.SiteHeader-icons a:hover img { opacity: 1; }

.SiteHeader-search {
    margin-top: var(--space-3);
}

.SiteHeader-search form {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.SiteHeader-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 14px;
}

.SiteHeader-search button {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.SiteHeader-search button:hover { background: var(--link-hover); }

/* -----------------------------------------------------------------------------
   Site Nav
----------------------------------------------------------------------------- */

.SiteNav {
    margin: var(--space-3) 0 var(--space-4);
}

.SiteNav-inner {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 8px 10px;
}

.SiteNav-toggle {
    display: none; /* shown on mobile */
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-weight: 700;
    cursor: pointer;
}

.SiteNav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.SiteNav-list a {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    font-weight: 650;
    font-size: 14px;
}

.SiteNav-list a:hover {
    background: var(--surface-2);
    color: var(--link);
}

/* -----------------------------------------------------------------------------
   Feed cards
----------------------------------------------------------------------------- */

.FeedItem { margin: 0 0 var(--space-4); }

.Card.Card--feed { overflow: hidden; }

.Card-media { display: block; }

.Card-mediaFrame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
}

.Card-mediaFrame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.Card-mediaFrame.is-known { aspect-ratio: auto; }
.Card-mediaFrame.is-known img { height: auto; }

.Card-body { padding: var(--space-4); }

/* Top row: type left, categories right */
.Card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.Card-type {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.Card-categories {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
    text-align: right;
    font-size: 12px;
}

.Card-categories a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 650;
}
.Card-categories a:hover { text-decoration: underline; }

.Card-catSep {
    color: rgba(0,0,0,.35);
    padding: 0 2px;
}

/* Title */
.Card-title {
    margin: 0 0 var(--space-2);
    font-size: 18px;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .Card-title { font-size: 20px; }
}

/* Make title/link consistently use primary blue */
.Card-title a {
    color: var(--link);
    text-decoration: none;
}
.Card-title a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* Excerpt (single canonical definition) */
.Card-excerpt {
    margin: 0 0 var(--space-3);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    opacity: 0.92;
}

.Card-meta {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}
.Card-metaSep { opacity: 0.6; }

/* -----------------------------------------------------------------------------
   Right Rail
----------------------------------------------------------------------------- */

.Rail-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.RailCard { padding: var(--space-4); }

.RailCard-title {
    margin: 0 0 var(--space-3);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 800;
}

/* -----------------------------------------------------------------------------
   Advertising
----------------------------------------------------------------------------- */

/* Base slot */
.AdSlot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

/* Slot archetypes */
.AdSlot--header {
    margin: 0 0 var(--space-3);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.AdSlot--rail {
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.AdSlot--square {
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Space reservation (CLS control) */
.AdSlot--header { min-height: 90px; }     /* desktop-ish baseline */
.AdSlot--rail { min-height: 250px; }      /* rectangle baseline */
.AdSlot--square { min-height: 250px; }      /* square baseline */

@media (max-width: 900px) {
    .AdSlot--header { min-height: 50px; }   /* mobile banner baseline */
}

/* If you want sticky rail ads later */
@media (min-width: 1024px) {
    .AdSlot--rail.is-sticky { position: sticky; top: var(--space-4); }
}

/* Optional: placeholder styling */
.AdPlaceholder {
    width: 100%;
    min-height: 90px; /* sensible default */
    border: 1px dashed rgba(0,0,0,.25);
    border-radius: var(--radius);
    background: repeating-linear-gradient(
            45deg,
            var(--surface-2),
            var(--surface-2) 10px,
            #ffffff 10px,
            #ffffff 20px
    );
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    text-align: center;
    gap: 4px;
}

.AdPlaceholder-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.AdPlaceholder-meta {
    font-size: 12px;
    opacity: 0.9;
}

/* Header (leaderboard/banner slot) */
.AdPlaceholder[data-placement="Header"] { min-height: 90px; }

@media (max-width: 900px) {
    .AdPlaceholder[data-placement="Header"] { min-height: 50px; }
}

/* Rail (vertical slot) */
.AdPlaceholder[data-placement="Rail"] { min-height: 250px; }

/* Square (MREC-ish) */
.AdPlaceholder[data-placement="Square"] { min-height: 250px; }

/* Future placeholders */
.AdPlaceholder[data-placement="InFeed"] { min-height: 250px; }
.AdPlaceholder[data-placement="InArticle"] { min-height: 250px; }

/* -----------------------------------------------------------------------------
   Subscribe box
----------------------------------------------------------------------------- */

.SubscribeBox-label {
    font-size: 13px;
    margin: 0 0 var(--space-3);
    color: var(--muted);
}

.SubscribeBox-form {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.SubscribeBox-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.SubscribeBox-button {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    cursor: pointer;
}
.SubscribeBox-button:hover {
    background: #ffffff;
}

/* -----------------------------------------------------------------------------
   Side card (used for Best Rated, Recent Discussions, etc.
----------------------------------------------------------------------------- */

.SideCard-title {
    margin: 0 0 var(--space-3);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 800;
}

.SideCard-list {
    margin: 0;
    padding: 0 0 0 18px;
    display: grid;
    gap: var(--space-2);
}

.SideCard-item {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    justify-content: space-between;
}

.SideCard-link { text-decoration: none; }
.SideCard-link:hover { text-decoration: underline; }

.SideCard-score {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Mobile adjustments
----------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .SiteHeader-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .SiteHeader-actions {
        width: 100%;
        justify-content: space-between;
    }

    .SiteHeader-search form {
        flex-direction: column;
        align-items: stretch;
    }

    .SiteNav-toggle {
        display: block;
        margin-bottom: var(--space-2);
    }

    .SiteNav-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
    }
}