/* ================================
   ROOT SCALE — fluid typography
================================ */

.contribute {
    width: min(92%, 760px);
    margin: clamp(30px, 6vw, 80px) auto;
    padding: clamp(20px, 4vw, 40px);
    background: linear-gradient(145deg,#ffffff,#eef2ff);
    border-radius: 16px;
    box-shadow:
        0 12px 28px rgba(0,0,0,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.7);
    font-family: system-ui, sans-serif;
}

/* ================================
   HEADER
================================ */

.contribute h2 {
    font-size: clamp(20px, 3vw, 30px);
    margin-bottom: 8px;
    color: #111;
}

.contribute p {
    font-size: clamp(14px, 1.6vw, 16px);
    color: #555;
    margin-bottom: clamp(18px, 3vw, 26px);
}

/* ================================
   GRID LAYOUT
   2 columns desktop → 1 mobile
================================ */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

/* force full width items */
.full {
    grid-column: span 2;
}

/* ================================
   FIELDS
================================ */

.field {
    display: flex;
    flex-direction: column;
}

.field label {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
}

/* Inputs */

.field input[type="text"],
.field input[type="email"],
.field textarea {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #d0d6e2;
    background: white;
    font-size: 15px;
    transition: 0.25s;
}

/* Focus UX */

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* ================================
   FILE INPUT
================================ */

.field input[type="file"] {
    padding: 10px;
    background: #f7f9ff;
    border-radius: 8px;
    border: 1px dashed #7aa2ff;
}

.field input[type="file"]::file-selector-button {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    margin-right: 10px;
    cursor: pointer;
}

/* ================================
   BUTTON
================================ */

.contribute button  {
    margin-top: 10px;
    padding: 14px;
    border-radius: 8px;
    border: none;
    color: white;
    font-weight: 600;
    font-size: 16px;
    background: linear-gradient(135deg,#3b82f6,#2563eb);
    cursor: pointer;
    transition: 0.25s;
}

.contribute button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(37,99,235,0.3);
}

/* ================================
   TABLET BREAKPOINT
================================ */

@media (max-width: 900px) {

    .form-grid {
        grid-template-columns: 1fr;
    }

    .full {
        grid-column: span 1;
    }
}

/* ================================
   MOBILE TOUCH OPTIMIZATION
================================ */

@media (max-width: 480px) {

    .field input,
    .field textarea,
    .contribute button {
        font-size: 16px; /* prevents iOS zoom */
    }

    .field input[type="file"] {
        padding: 12px;
    }
}