/**
 * Note Block - Académie des Étoiles
 * Sidebar callouts for tips, warnings, and informational notes
 */

.ade-note {
    display: flex;
    gap: var(--ade-space-md);
    padding: var(--ade-space-lg);
    border-radius: 8px;
    border-left: 4px solid;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ade-note:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Tip variant - Orange accent */
.ade-note--tip {
    background: rgba(255, 117, 0, 0.08);
    border-left-color: var(--ade-accent-orange);
}

.ade-note--tip .ade-note__title {
    color: var(--ade-accent-orange);
}

/* Warning variant - Amber accent */
.ade-note--warning {
    background: rgba(255, 193, 7, 0.10);
    border-left-color: #ffc107;
}

.ade-note--warning .ade-note__title {
    color: #d39e00;
}

/* Info variant - Blue accent */
.ade-note--info {
    background: rgba(71, 172, 223, 0.08);
    border-left-color: var(--ade-blue);
}

.ade-note--info .ade-note__title {
    color: var(--ade-blue-dark);
}

/* Icon */
.ade-note__icon {
    flex-shrink: 0;
    font-size: 24px;
    line-height: 1;
    padding-top: 2px;
}

/* Body container */
.ade-note__body {
    flex: 1;
}

/* Optional title */
.ade-note__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 var(--ade-space-sm) 0;
    line-height: 1.3;
}

/* Content */
.ade-note__content {
    font-size: var(--ade-font-size-base);
    line-height: 1.7;
    color: var(--ade-gray-dark);
}

.ade-note__content p {
    margin: 0 0 var(--ade-space-sm) 0;
}

.ade-note__content p:last-child {
    margin-bottom: 0;
}

.ade-note__content strong {
    font-weight: 600;
}

.ade-note__content em {
    font-style: italic;
}

.ade-note__content ul,
.ade-note__content ol {
    margin: var(--ade-space-sm) 0;
    padding-left: var(--ade-space-lg);
}

.ade-note__content li {
    margin: var(--ade-space-xs) 0;
}

/* Responsive - mobile */
@media screen and (max-width: 480px) {
    .ade-note {
        padding: var(--ade-space-md);
        gap: var(--ade-space-sm);
        border-left-width: 3px;
    }

    .ade-note__icon {
        font-size: 20px;
    }

    .ade-note__title {
        font-size: 15px;
    }

    .ade-note__content {
        font-size: 15px;
    }
}

/* Print */
@media print {
    .ade-note {
        background: transparent !important;
        border: 1px solid;
        padding: var(--ade-space-sm);
        page-break-inside: avoid;
    }

    .ade-note--tip {
        border-color: var(--ade-accent-orange);
    }

    .ade-note--warning {
        border-color: #ffc107;
    }

    .ade-note--info {
        border-color: var(--ade-blue);
    }
}