/* ==========================================================================
   contact.css — Page Contact (postcard + form)
   ========================================================================== */

.contact-layout{display:flex;gap:2.5rem;align-items:flex-start;padding:3rem 0 5rem}
.contact-recipient{flex:0 0 260px}
.contact-recipient fieldset{border:none;margin-bottom:1.8rem}
.contact-recipient legend{font-family:var(--font-heading);font-size:1.1rem;font-weight:400;color:var(--primary);margin-bottom:.6rem}
.contact-recipient .radio-list{display:flex;flex-direction:column;gap:.3rem}
.contact-recipient .radio-label{display:flex;align-items:center;gap:.55rem;font-size:.9rem;cursor:pointer;padding:.3rem 0;color:var(--muted);transition:color .2s}
.contact-recipient .radio-label:hover{color:var(--fg)}
.contact-recipient .radio-label input[type="radio"]{accent-color:var(--primary);width:.95rem;height:.95rem;cursor:pointer;flex-shrink:0}

.contact-postcard{flex:1;max-width:640px;position:relative}

.postcard{position:relative;width:628px;height:405px;background:url(images/postcard01.jpg) no-repeat;margin:0 auto}
.postcard-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.postcard-hint p{color:var(--bg);font-size:.95rem;font-style:italic}

/*#contactFormDiv{position:absolute;top:130px;left:30px;right:30px;height:275px;background:url(images/postcard02.jpg) no-repeat}*/
#contactFormDiv .postcard-body{padding:10px 0 0 0}
#contactFormDiv .postcard-body h2{font-family:var(--font-heading);font-size:.95rem;font-weight:400;color:var(--bg);margin-bottom:.5rem;padding-bottom:.2rem;}

.postcard-fields{display:flex;gap:.5rem}
.postcard-fields-left{flex:0 0 48%;display:flex;flex-direction:column;gap:.25rem}
.postcard-fields-left .form-field{display:flex;flex-direction:column}
.postcard-fields-left .form-field label{display:block;font-size:.68rem;font-weight:500;color:hsl(30,10%,30%);margin-bottom:.1rem;text-transform:uppercase;letter-spacing:.03em}
.postcard-fields-left .form-field label .required{color:hsl(0,40%,45%)}
.postcard-fields-left .form-field input[type="text"],
.postcard-fields-left .form-field input[type="email"]{width:100%;padding:.3rem .45rem;font-size:.78rem;font-family:var(--font-body);color:hsl(30,10%,20%);background:rgba(255,255,255,.55);border:1px solid hsl(35,12%,72%);border-radius:0;outline:none;transition:border-color .25s}
.postcard-fields-left .form-field input[type="text"]:focus,
.postcard-fields-left .form-field input[type="email"]:focus{border-color:var(--primary);background:rgba(255,255,255,.8)}

.postcard-fields-right{flex:1;display:flex;flex-direction:column;min-width:0}
.postcard-fields-right label{display:block;font-size:.68rem;font-weight:500;color:hsl(30,10%,30%);margin-bottom:.1rem;text-transform:uppercase;letter-spacing:.03em}
.postcard-fields-right label .required{color:hsl(0,40%,45%)}
.postcard-fields-right textarea{flex:1;min-height:0;width:100%;padding:.3rem .45rem;font-size:.78rem;font-family:var(--font-body);color:hsl(30,10%,20%);background:rgba(255,255,255,.55);border:1px solid hsl(35,12%,72%);border-radius:0;outline:none;transition:border-color .25s;resize:vertical;line-height:1.5}
.postcard-fields-right textarea:focus{border-color:var(--primary);background:rgba(255,255,255,.8)}

.postcard-captcha{display:flex;align-items:center;gap:.6rem;margin-top:.4rem}
.postcard-captcha img{height:36px}
.postcard-captcha input[type="text"]{max-width:130px}

.postcard-actions{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem}
.postcard-actions .mandatory-note{font-size:.68rem;color:hsl(30,10%,35%)}
.postcard-actions .btn-primary{border:none;cursor:pointer;font-family:var(--font-body);font-size:.72rem;padding:.45rem 1.2rem}

.postcard--success{width:628px;height:405px;background:url(images/postcard01.jpg) no-repeat;margin:0 auto;position:relative}
.postcard--success::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url(images/postcard02.jpg) no-repeat}
.postcard--success .postcard-body{position:absolute;top:130px;left:30px;right:30px;bottom:0;display:flex;align-items:center;justify-content:center;padding:2rem;text-align:center;z-index:1}
.postcard--success .postcard-body h2{font-family:var(--font-heading);font-weight:300;font-size:clamp(1.2rem,2.5vw,1.6rem);color:var(--bg);margin:0}

.contact-error{padding:.8rem 1.2rem;margin-bottom:2rem;background:hsl(0,40%,12%);border-left:3px solid #c0392b;font-size:.9rem;line-height:1.6;color:var(--fg)}
.contact-error button{float:right;background:none;border:none;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 0 0 .8rem}
.contact-error button:hover{color:var(--fg)}

.contact-postcard{margin: auto auto;}

@media (max-width:860px){
	.contact-layout{flex-direction:column;padding:2rem 0 4rem;align-items:stretch}
	.contact-recipient{flex:auto;display:flex;flex-direction:column;gap:1rem}
	.contact-recipient fieldset{border:none;display:flex;flex-direction:column;gap:.35rem}
	.contact-recipient legend{font-family:var(--font-heading);font-size:1.05rem;font-weight:400;color:var(--primary);margin-bottom:0}
	.contact-recipient .radio-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:.4rem 1.2rem}
	.contact-recipient .radio-label{font-size:.9rem;color:var(--fg)}

	.contact-postcard{max-width:100%;width:100%}
	.postcard{width:100%;height:auto;min-height:0;background:none!important;border:none;padding:1.5rem 0 0 0;margin:0}
	.postcard-hint{position:static;padding:0;margin-bottom:.75rem}
	.postcard-hint p{color:var(--muted)}

	#contactFormDiv{position:static!important;height:auto!important;width:auto!important;background:none!important;padding:1.25rem!important;border:1px solid var(--border)}
	#contactFormDiv .postcard-body{padding:0}
	#contactFormDiv .postcard-body h2{color:var(--fg);border-bottom-color:var(--border);font-size:1.05rem}

	.postcard-fields{flex-direction:column;gap:.85rem}
	.postcard-fields-left{flex:auto;gap:.45rem}
	.postcard-fields-left .form-field input[type="text"],
	.postcard-fields-left .form-field input[type="email"],
	.postcard-fields-right textarea{background:var(--card);color:var(--fg);border-color:var(--border);min-height:44px;flex:auto;padding:.55rem .7rem;font-size:.88rem;width:100%}
	.postcard-fields-left .form-field input[type="text"]:focus,
	.postcard-fields-left .form-field input[type="email"]:focus,
	.postcard-fields-right textarea:focus{border-color:var(--primary);background:hsl(30,8%,12%)}

	.postcard-fields-right textarea{min-height:140px}
	.postcard-fields-left .form-field label,
	.postcard-fields-right label{font-size:.75rem;color:var(--muted);margin-bottom:.25rem}
	.postcard-fields-left .form-field label .required,
	.postcard-fields-right label .required{color:var(--primary)}

	.postcard-captcha{margin-top:.85rem;gap:.8rem}
	.postcard-captcha img{height:42px}
	.postcard-captcha input[type="text"]{max-width:100%}
	.postcard-actions{margin-top:.85rem}
	.postcard-actions .btn-primary{font-size:.8rem;padding:.55rem 1.5rem}

	.postcard--success{width:100%;height:auto;min-height:0;background:none!important;border:1px solid var(--border);padding:2.5rem 1.5rem;margin:0}
	.postcard--success::after{display:none}
	.postcard--success .postcard-body{position:static!important;top:auto;left:auto;right:auto;bottom:auto;padding:0;margin:0}
	.postcard--success .postcard-body h2{color:var(--fg)}
}

#contactFormDiv {
    position: absolute;
    /* top: 130px; */
    /* left: 30px; */
    /* right: 30px; */
    height: 100%;
    background: url(images/postcard02.jpg) no-repeat;
    padding: 90px 20px;
    width: 100%;
}