/* ==========================================================================
   Central ICT Club Bangladesh
   Contact page
   The form fields reuse the shared .field primitives from style.css. This
   file only adds the page layout, the select and textarea variants, and the
   dark info panel.
   ========================================================================== */

/* Form on the left, dark info panel on the right */
.contact-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.95fr;
    gap: clamp(20px, 3vw, 32px);
    align-items: start;
}

/* ---- The form card ---------------------------------------------------- */
.contact-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    padding: clamp(24px, 3.5vw, 40px);
}

.contact-card__title {
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
    margin: 0 0 6px;
}

.contact-card__lead {
    color: var(--slate-500);
    margin: 0 0 26px;
}

.contact-form {
    display: grid;
    gap: 18px;
}

/* two short fields share a row on wider screens */
.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

/* textarea variant of the shared input */
.field__input--area {
    min-height: 140px;
    line-height: 1.5;
    resize: vertical;
}

/* styled select, the native arrow is removed and replaced with our own */
.field__select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6f86' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 18px;
}

.contact-form .btn {
    margin-top: 4px;
}

/* status line under the submit button */
.contact-status {
    min-height: 20px;
    margin: 4px 0 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--green-600);
}

.contact-status.is-error {
    color: #d6453d;
}

/* ---- Dark info panel -------------------------------------------------- */
.contact-info {
    position: relative;
    overflow: hidden;
    background: var(--grad-brand);
    color: var(--white);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    padding: clamp(26px, 3.5vw, 38px);
}

.contact-info__circuit {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.16), transparent 32%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 54px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 54px);
    pointer-events: none;
}

.contact-info__title {
    position: relative;
    font-size: 1.3rem;
    margin: 0 0 4px;
}

.contact-info__lead {
    position: relative;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 26px;
}

.contact-info__list {
    position: relative;
    display: grid;
    gap: 20px;
    margin: 0 0 28px;
}

.contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.contact-info__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
}

.contact-info__icon svg {
    width: 20px;
    height: 20px;
}

.contact-info__label {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3px;
}

.contact-info__value {
    color: var(--white);
    font-weight: 600;
    line-height: 1.4;
}

a.contact-info__value {
    transition: color 0.2s var(--ease);
}

a.contact-info__value:hover {
    color: var(--green-400);
}

.contact-info__social {
    position: relative;
}

.contact-info__social-label {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 860px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .contact-form__row {
        grid-template-columns: 1fr;
    }
}