/* Contact and Thank You. Shares the camping hero; adds the form and info cards. */

.contactgrid{margin-top:36px}

.formcol{
  & h3{margin:0;font:700 21px var(--font-display);color:var(--heading)}
  & .formcol__note{margin:10px 0 0;font:400 16px/1.7 var(--font-body);color:var(--caption)}
}

/* Fluent Forms, restyled to the design's fields. */
.bowron-form{margin-top:26px;
  & .ff-el-group{margin-bottom:18px}
  & .ff-el-input--label label{font:600 14px var(--font-body);color:var(--heading)}
  & input[type=text],& input[type=email],& textarea{
    display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:14px 16px;
    border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--white);
    font:400 17px var(--font-body);color:var(--heading);
    &:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgb(42 165 216/.18)}
    &::placeholder{color:var(--caption-soft)}
  }
  & textarea{line-height:1.65;resize:vertical}
  & .ff-btn-submit{background:var(--primary);color:var(--on-primary);border:none;cursor:pointer;font:700 16px var(--font-display);padding:16px 36px;border-radius:var(--radius);
    &:hover{background:var(--primary-hover)}
  }
  & .ff-el-form-control.ff-el-is-error{border-color:var(--danger-text)}
  & .error-text,& .text-danger{font:400 14px var(--font-body);color:var(--danger-text)}
}

.infocol{display:grid;gap:24px}
.infocard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:30px 32px;
  & h3{margin:10px 0 0;font:700 21px var(--font-display);color:var(--heading)}
  & p{margin:12px 0 0;font:400 16px/1.7 var(--font-body)}
  & .infocard__links{display:flex;gap:18px;flex-wrap:wrap;font:600 14px var(--font-mono);letter-spacing:.04em}
  &.-dark{position:relative;overflow:hidden;background:var(--secondary) var(--texture-dark);background-size:520px;border:0;padding:30px 32px 34px;
    & h3{color:var(--white)}
    & .infocard__tel{display:block;margin-top:14px;font:800 clamp(24px,3vw,32px) var(--font-display);color:var(--primary-light);text-decoration:none;letter-spacing:-.01em}
    & .infocard__mail{display:block;margin-top:8px;font:600 15px var(--font-mono);color:var(--on-dark-4);text-decoration:none}
    & .infocard__btn{display:inline-block;margin-top:20px;background:var(--primary);color:var(--on-primary);text-decoration:none;font:700 12px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:12px 20px;border-radius:var(--radius);
      &:hover{background:var(--primary-hover);color:var(--on-primary)}
    }
  }
}

/* Twelve months; the open ones fill with brand blue. */
.season{margin:18px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(12,1fr);gap:4px;
  & li{height:36px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;font:600 10px var(--font-mono);color:var(--caption)}
  & li.is-open{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
}
.season__note{margin:14px 0 0;font:600 11px var(--font-mono);letter-spacing:.1em;color:var(--caption)}

/* Google map sits in the same offset frame as the photos. */
.shot.-embed{
  & iframe{width:100%;height:420px;border:0;display:block;border-radius:var(--radius)}
}

/* Thank you. */
.ty{
  & .ty__inner{text-align:center}
  & h1{margin:14px 0 0;font:800 clamp(34px,4.6vw,52px)/1.1 var(--font-display);color:var(--heading);letter-spacing:-.02em}
  & .lede{margin:18px auto 0;max-width:600px}
  & .ty__btns{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  & .ty__next{margin-top:54px;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:28px 32px 32px}
  & .ty__next h2{margin:0 0 14px;font:700 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
  & .ty__next ul{margin:0;padding-left:20px;display:grid;gap:10px;font:400 17px/1.6 var(--font-body)}
}


@media (max-width:960px){
  .grid2.-dirs{grid-template-columns:1fr}
  .chero .chero__inner{padding-top:80px}
  .chero .chero__coords{display:none}
  .season li{font-size:9px}
  .shot.-embed iframe{height:300px}
}
@media (max-width:560px){
  .bowron-form .ff-t-cell{width:100%!important;padding:0!important}
}