/* Notion-like Styles for Hugo Relearn Theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
    --MAIN-FONT: 'Inter', sans-serif;
}

body {
    font-family: 'Inter', sans-serif;
}

/* Cover Image Styling */
img[alt="cover"] {
    width: calc(100% + 4rem);
    max-width: none;
    height: 30vh;
    min-height: 200px;
    object-fit: cover;
    margin-left: -2rem;
    margin-right: -2rem;
    margin-top: -2.5rem;
    display: block;
    border-radius: 0;
}

/* Notion Heading Style */
h1 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin-top: 2rem !important;
}

h2 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(55, 53, 47, 0.08);
    padding-bottom: 8px;
    margin-top: 2.5rem !important;
}

/* Card Styling (Notion Gallery style) */
.card-container, .children-card {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 12px !important;
    padding: 10px 0 !important;
}

.card, .child-card {
    border: 1px solid rgba(55, 53, 47, 0.1) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    transition: background 150ms ease 0s !important;
    background: white !important;
    box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px !important;
}

.card:hover, .child-card:hover {
    background: rgba(55, 53, 47, 0.03) !important;
}

/* Callout (Notice) Styling */
.notices {
    border: none !important;
    background: rgb(241, 241, 239) !important;
    border-radius: 4px !important;
    padding: 16px 16px 16px 12px !important;
    display: flex !important;
    flex-direction: column !important;
}

.notices.info {
    background: rgb(235, 236, 237) !important;
}

.notices-title {
    display: none !important; /* Hide the default "Info" title */
}