/*
 * /send-article/ — форма приёма статей.
 * Utility-first набор, скоупленный под `.article-submit` чтобы не
 * конфликтовать с глобальными стилями Bootstrap проекта.
 *
 * Соглашения:
 *  - text-{xs|sm|base|lg|xl} — размеры
 *  - mb-{0..8}, mt-{0..8}, p-{0..6}, px-3, py-2 — отступы (шкала 4px)
 *  - flex, flex-col, gap-{1..4} — flex-layout
 *  - bg-*, text-*, border-* — цвета и границы
 *  - f-input, f-textarea, f-file, f-checkbox — формовые компоненты
 *
 * Палитра:
 *  - чёрный  #1a1a1a — основной текст и primary CTA
 *  - серый   #d4d4d4 / #e0e0e0 — границы
 *  - золото  #ffc107 — акценты, focus, ховер CTA
 *  - фон     #fafafa — мягкие блоки (consents)
 */

/* =========================================================================
 * Layout
 * ========================================================================= */
.article-submit { padding: 60px 0; color: #1a1a1a; }
.article-submit h1 { margin: 0 0 8px; }
.article-submit a { color: #1a1a1a; text-decoration: underline; }
.article-submit a:hover { color: #ffc107; }

.article-submit__card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 3px;
    padding: 36px;
    box-shadow: 0 1px 8px rgba(0,0,0,.03);
}

/* =========================================================================
 * Typography utilities
 * ========================================================================= */
.article-submit .text-xs       { font-size: 11px; }
.article-submit .text-sm       { font-size: 13px; }
.article-submit .text-base     { font-size: 15px; }
.article-submit .text-lg       { font-size: 17px; }
.article-submit .text-xl       { font-size: 22px; }
.article-submit .text-2xl      { font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; }

.article-submit .font-normal   { font-weight: 400; }
.article-submit .font-medium   { font-weight: 500; }

.article-submit .leading-tight   { line-height: 1.3; }
.article-submit .leading-normal  { line-height: 1.5; }
.article-submit .leading-relaxed { line-height: 1.65; }

.article-submit .uppercase     { text-transform: uppercase; }
.article-submit .tracking-wide { letter-spacing: 0.06em; }

/* =========================================================================
 * Color utilities
 * ========================================================================= */
.article-submit .text-gray-400 { color: #aaa; }
.article-submit .text-gray-500 { color: #888; }
.article-submit .text-gray-700 { color: #444; }
.article-submit .text-gray-900 { color: #1a1a1a; }
.article-submit .text-red      { color: #c0392b; }
.article-submit .text-gold     { color: #ffc107; }

.article-submit .bg-white  { background-color: #fff; }
.article-submit .bg-gray-50 { background-color: #fafafa; }

/* =========================================================================
 * Spacing scale (4px)
 * ========================================================================= */
.article-submit .m-0    { margin: 0; }
.article-submit .mt-0   { margin-top: 0; }
.article-submit .mt-1   { margin-top: 4px; }
.article-submit .mt-2   { margin-top: 8px; }
.article-submit .mt-3   { margin-top: 12px; }
.article-submit .mt-4   { margin-top: 16px; }
.article-submit .mt-6   { margin-top: 24px; }
.article-submit .mt-8   { margin-top: 32px; }
.article-submit .mb-0   { margin-bottom: 0; }
.article-submit .mb-1   { margin-bottom: 4px; }
.article-submit .mb-2   { margin-bottom: 8px; }
.article-submit .mb-3   { margin-bottom: 12px; }
.article-submit .mb-4   { margin-bottom: 16px; }
.article-submit .mb-6   { margin-bottom: 24px; }
.article-submit .mb-8   { margin-bottom: 32px; }

.article-submit .p-2  { padding: 8px; }
.article-submit .p-3  { padding: 12px; }
.article-submit .p-4  { padding: 16px; }
.article-submit .p-5  { padding: 20px; }
.article-submit .p-6  { padding: 24px; }
.article-submit .py-2 { padding-top: 8px;  padding-bottom: 8px; }
.article-submit .py-3 { padding-top: 12px; padding-bottom: 12px; }
.article-submit .px-3 { padding-left: 12px; padding-right: 12px; }
.article-submit .px-4 { padding-left: 16px; padding-right: 16px; }
.article-submit .px-5 { padding-left: 20px; padding-right: 20px; }

/* =========================================================================
 * Flex layout
 * ========================================================================= */
.article-submit .flex          { display: flex; }
.article-submit .flex-col      { flex-direction: column; }
.article-submit .items-start   { align-items: flex-start; }
.article-submit .items-center  { align-items: center; }
.article-submit .gap-1         { gap: 4px; }
.article-submit .gap-2         { gap: 8px; }
.article-submit .gap-3         { gap: 12px; }
.article-submit .w-full        { width: 100%; }

/* =========================================================================
 * Borders
 * ========================================================================= */
.article-submit .border        { border: 1px solid #e0e0e0; }
.article-submit .border-l-2    { border-left: 2px solid #ffc107; }
.article-submit .rounded       { border-radius: 3px; }
.article-submit .rounded-sm    { border-radius: 2px; }

/* =========================================================================
 * Form components
 * Селекторы и по input[type=*], и по классу .f-input — чтобы перебить
 * Bootstrap `.form-control` (если он где-то прилипнет) и любые наследуемые
 * стили без апелляции к !important на каждое свойство.
 * ========================================================================= */
.article-submit input[type="text"],
.article-submit input[type="email"],
.article-submit input[type="tel"],
.article-submit input[type="url"],
.article-submit input[type="password"],
.article-submit input[type="number"],
.article-submit input[type="search"],
.article-submit textarea,
.article-submit .f-input,
.article-submit .f-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e0e0e0 !important;
    border-radius: 2px;
    background: #fff !important;
    padding: 9px 12px !important;
    font-size: 14px;
    line-height: 1.4;
    color: #1a1a1a;
    box-shadow: none !important;          /* сбрасываем Bootstrap inset-glow */
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.article-submit input[type="text"]:focus,
.article-submit input[type="email"]:focus,
.article-submit input[type="tel"]:focus,
.article-submit input[type="url"]:focus,
.article-submit input[type="password"]:focus,
.article-submit input[type="number"]:focus,
.article-submit input[type="search"]:focus,
.article-submit textarea:focus,
.article-submit .f-input:focus,
.article-submit .f-textarea:focus {
    border-color: #ffc107 !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.22) !important;
}

/* file inputs — у них своя нативная стилизация, не лезем глубоко */
.article-submit input[type="file"] {
    border: 1px dashed #e0e0e0;
    border-radius: 2px;
    padding: 8px 10px;
    background: #fafafa;
    font-size: 13px;
    color: #555;
    width: 100%;
    box-sizing: border-box;
}

.article-submit input[type="file"]:focus {
    border-color: #ffc107;
    outline: none;
}

.article-submit .f-textarea {
    min-height: 110px;
    resize: vertical;
    font-family: inherit;
}

.article-submit .f-file {
    padding: 6px 0;
    font-size: 13px;
    color: #555;
}

.article-submit .f-checkbox {
    margin-top: 4px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: #ffc107;
    cursor: pointer;
}

/* errorlist у Django — <ul class="errorlist"> */
.article-submit .errorlist {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    font-size: 12px;
    color: #c0392b;
    line-height: 1.4;
}

/* =========================================================================
 * Sections, divider, footnote
 * ========================================================================= */
.article-submit__divider {
    border: none;
    border-top: 1px solid #ececec;
    margin: 32px 0 24px;
}

.article-submit__section-title {
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #444;
    margin: 0 0 12px;
}

.article-submit__section-title--sm {
    font-size: 1.1rem;       /* ~17.6px при root 16px */
    color: #555;
}

.article-submit__consent {
    margin-top: 28px;
    padding: 20px 22px;
    background: #fafafa;
    border-left: 2px solid #ffc107;
    border-radius: 2px;
}

/* Чекбокс ↔ подпись: align-items: flex-start + ручной отступ
 * чекбокса под первую строку лейбла. font-size лейбла 14px,
 * line-height 1.5 → строка ~21px; чекбокс 16px → margin-top 3px. */
.article-submit__consent-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.article-submit__consent-row:last-child { margin-bottom: 0; }

.article-submit__consent-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    flex-shrink: 0;
    accent-color: #ffc107;
    cursor: pointer;
}

.article-submit__consent-row label {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #444;
    cursor: pointer;
}

.article-submit__counter {
    font-size: 12px;
    color: #555;
    margin-top: 4px;
}

.article-submit__footnote {
    font-size: 11px;
    color: #888;
    line-height: 1.7;
    margin-top: 24px;
}

/* =========================================================================
 * Yandex SmartCaptcha
 * ========================================================================= */
.article-submit__captcha .smart-captcha {
    /* Yandex iframe внутри сам тащит свою высоту/ширину; контейнер не
     * растягиваем на 100% — уменьшает прыжок. */
    display: inline-block;
    min-height: 100px;
}

/* =========================================================================
 * Button — primary CTA
 * ========================================================================= */
.article-submit__btn {
    display: inline-block;
    background: #1a1a1a;
    color: #fff !important;
    border: 1px solid #1a1a1a;
    padding: 13px 32px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.article-submit__btn:hover {
    background: #ffc107;
    border-color: #ffc107;
    color: #1a1a1a !important;   /* белый на ярко-жёлтом нечитаем — переключаем на чёрный */
    text-decoration: none;
}

.article-submit__btn:active {
    transform: translateY(1px);
}

/* =========================================================================
 * Alerts (Django messages framework)
 * ========================================================================= */
.article-submit .alert {
    border-radius: 2px;
    border: 1px solid transparent;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 20px;
}

.article-submit .alert-success { background: #f1f8f3; border-color: #d4e9d8; color: #2d5538; }
.article-submit .alert-error,
.article-submit .alert-danger  { background: #fdf3f2; border-color: #f0ccc9; color: #7a2620; }
.article-submit .alert-info    { background: #f4f6fa; border-color: #d6dde9; color: #2c3e50; }

/* =========================================================================
 * Responsive
 * ========================================================================= */
@media (max-width: 576px) {
    .article-submit { padding: 32px 0; }
    .article-submit__card { padding: 22px; }
    .article-submit .text-2xl { font-size: 22px; }
}