/* Compact Circulars Styles */

.circulars-columns {
    /* This class now primarily serves as a semantic container. Layout handled by .circulars-grid-layout */
}

.circulars-grid-layout {
    display: grid;
    grid-template-columns: 1fr; /* Single column by default */
    gap: 1.5rem; /* Consistent gap */
}

@media (min-width: 768px) {
    .circulars-grid-layout {
        grid-template-columns: repeat(2, 1fr); /* Two equal columns on larger screens */
    }
}

.circulars-column {
    /* Grid now handles sizing and spacing, so remove flex properties */
    padding: 1.5rem;
    /* margin-bottom will be handled by gap on .circulars-grid-layout */
}

.circulars-grid {
    display: block; /* Ensure cards stack vertically */
    /* Add vertical spacing between cards if needed, e.g., margin-top for all but first card */
}

.circular-card {
    display: grid; /* Make the card a grid container */
    grid-template-columns: auto 1fr auto; /* Icon, Content, Meta/Actions */
    grid-template-rows: auto auto; /* Two rows for content */
    grid-template-areas:
        "icon content content"
        ". meta actions"; /* Icon and content on first row, meta and actions on second */
    gap: 0.5rem 1rem; /* Row gap, Column gap */
    padding: 1rem;
    margin-bottom: 1rem;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Visual styling from React prototype */
    border: 1px solid #e5e7eb; /* border-athletics-gray-light */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* hover:shadow-card */
    background-color: #fff; /* bg-white */
}

.circular-card__icon {
    grid-area: icon;
    align-self: start; /* Align icon to the top */
}

.circular-card__content {
    grid-area: content;
    min-width: 0; /* Allow content to shrink */
}

.circular-card__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    /* Remove margin-bottom as grid handles spacing */
}

.circular-card__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end; /* Push buttons to the right */
    margin-top: auto; /* Keep original margin-top if needed for vertical alignment */
}

/* Responsive stacking for circular-card on smaller screens */
@media (max-width: 600px) {
    .circular-card {
        grid-template-columns: 1fr; /* Single column */
        grid-template-rows: auto auto auto auto; /* Stack all elements */
        grid-template-areas:
            "icon"
            "content"
            "meta"
            "actions";
        gap: 0.5rem; /* Adjust gap for stacked layout */
    }
    .circular-card__actions {
        justify-content: flex-start; /* Align buttons to left when stacked */
    }
}