/* ---------------------------------
   Security Pages

   Security cards, the write-up grid, the write-up detail page
   and the "coming soon" placeholder. Page headers, carousel,
   link rows, search, chips and pagination use the shared
   components in core/css/site.css.
--------------------------------- */


/* ---------------------------------
   Security Card
--------------------------------- */

.security-card {
    min-width: 0;
}

.security-card-link {
    display: flex;
    flex-direction: column;

    height: 100%;

    overflow: hidden;

    color: inherit;

    text-decoration: none;

    background-color: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    transition:
        transform 0.3s var(--ease),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.security-card-link:hover,
.security-card-link:focus-visible {
    color: inherit;

    border-color: var(--accent-line);

    box-shadow: var(--shadow);

    transform: translateY(-3px);
}

.security-card-image {
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background-color: var(--bg-soft);

    border-bottom: 1px solid var(--border);
}

.security-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.security-card-info {
    display: flex;
    flex-direction: column;

    flex: 1;

    min-width: 0;

    padding: 18px 20px 20px;
}

.security-card-info .tag {
    margin-bottom: 10px;
}

.security-card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;

    transition: color 0.2s ease;
}

.security-card-link:hover .security-card-title {
    color: var(--accent);
}

.security-card-meta {
    margin-top: 6px;

    font-size: 0.78rem;

    color: var(--text-muted);
}

.security-card-summary {
    display: -webkit-box;

    margin: 12px 0 16px;

    overflow: hidden;

    font-size: 0.85rem;
    line-height: 1.65;

    color: var(--text-muted);

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.security-card-date {
    margin-top: auto;

    font-size: 0.75rem;

    color: var(--text-faint);
}


/* ---------------------------------
   Carousel and Grid Sizing
--------------------------------- */

.security-carousel > .security-card {
    width: clamp(280px, 30vw, 340px);
}

.security-grid {
    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 24px;
}

.security-count {
    margin-bottom: 24px;
}

.security-external-link {
    margin-top: 24px;
}


/* ---------------------------------
   Coming Soon
--------------------------------- */

.coming-soon {
    padding: 40px 32px;

    text-align: center;

    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
}

.coming-soon-prompt {
    font-size: 0.85rem;

    color: var(--text-faint);
}

.coming-soon-prompt span {
    color: var(--accent);
}

.coming-soon h2 {
    margin: 10px 0 12px;

    font-size: 1.4rem;
}

.coming-soon p:last-child {
    color: var(--text-muted);
}


/* ---------------------------------
   Write-Up Detail Page
--------------------------------- */

.writeup-draft-notice {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 32px;
    padding: 12px 16px;

    font-size: 0.875rem;

    color: var(--accent);

    background-color: var(--accent-soft);

    border: 1px dashed var(--accent-line);
    border-radius: var(--radius);
}

.writeup-header {
    margin-bottom: 32px;
}

.writeup-header h1 {
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
}

.writeup-date {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: 16px;

    font-size: 0.85rem;

    color: var(--text-muted);
}


/*
    Challenge details, styled like a front-matter block:

    ---
    ctf:        DEADFACE 2026
    category:   Networking
    ---
*/

.writeup-facts {
    display: grid;

    gap: 6px;

    margin-bottom: 40px;
    padding: 18px 22px;

    font-size: 0.875rem;

    background-color: var(--bg-soft);

    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.writeup-facts::before,
.writeup-facts::after {
    content: "---";

    color: var(--text-faint);
}

.writeup-facts > div {
    display: grid;

    grid-template-columns: 120px minmax(0, 1fr);
    align-items: baseline;

    gap: 12px;
}

.writeup-facts dt {
    text-transform: lowercase;

    color: var(--accent);
}

.writeup-facts dt::after {
    content: ":";
}

.writeup-facts dd {
    color: var(--text);
}

.writeup-facts dd a {
    color: inherit;
}

.writeup-tools {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    list-style: none;
}

.writeup-tools li {
    padding: 0 8px;

    font-size: 0.8rem;

    color: var(--accent-hover);

    background-color: var(--accent-soft);

    border-radius: 4px;
}

.writeup-image {
    display: block;

    width: 100%;

    margin-bottom: 40px;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.writeup-section {
    margin-top: 40px;
    padding-top: 36px;

    border-top: 1px solid var(--border);
}


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

@media (max-width: 700px) {

    .security-carousel > .security-card {
        width: min(82vw, 320px);
    }

    .coming-soon {
        padding: 32px 20px;
    }

    .writeup-facts > div {
        grid-template-columns: 100px minmax(0, 1fr);
    }

}