/* CAREpharma Contact / "Start Your Innovation Journey". Depends on root.css + style.css + home.css. */

/* ===== Page header (light image hero, teal text) ===== */
.cp-ct-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #006f61 0%, #005344 100%); }
.cp-ct-hero__bg { position: absolute; inset: 0; z-index: 0; }
.cp-ct-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-ct-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; padding: var(--space-64) var(--space-edge); }
.cp-ct-hero__eyebrow { text-transform: uppercase; font-size: var(--fs-small); line-height: 24px; color: var(--color-secondary-400); }
.cp-ct-hero h1 { font-size: var(--fs-h1); line-height: 57.6px; color: var(--color-primary); }
.cp-ct-hero__sub { max-width: 700px; font-size: var(--fs-body); line-height: 30px; color: var(--color-primary); opacity: .9; }

/* ===== Layout ===== */
.cp-ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-64); align-items: start; }

/* ===== Form card ===== */
.cp-ct-card { display: flex; flex-direction: column; gap: var(--space-24); background: var(--color-bg-02); border-radius: var(--radius-24); padding: var(--space-32); }
.cp-ct-card h2 { font-size: var(--fs-h2); line-height: 38.4px; color: var(--color-primary); }
.cp-ct-card__sub { font-size: var(--fs-small); line-height: 24px; color: var(--color-grey-500); opacity: .78; }

.cp-ct-alert { font-size: var(--fs-small); line-height: 24px; padding: var(--space-16); border-radius: var(--radius-12); }
.cp-ct-alert--ok { background: var(--color-primary-50); color: var(--color-primary-900); border: 1px solid var(--color-primary-soft); }
.cp-ct-alert--err { background: #fdECEC; color: #a32020; border: 1px solid #e6a3a3; }

.cp-ct-form { display: flex; flex-direction: column; gap: var(--space-24); }
.cp-ct-fields { display: flex; flex-direction: column; gap: var(--space-16); }
.cp-ct-field { display: flex; flex-direction: column; gap: var(--space-8); }
.cp-ct-field label { font-size: var(--fs-small); line-height: 24px; color: var(--color-grey-500); }
.cp-ct-req { color: var(--color-grey-200); font-size: var(--fs-small-2); }

.cp-ct-field input,
.cp-ct-field select,
.cp-ct-field textarea {
  width: 100%; padding: var(--space-16); border: 1px solid #108e99; border-radius: var(--radius-24);
  background: var(--color-white); font-family: inherit; font-size: var(--fs-small); line-height: 24px;
  color: var(--color-grey-500);
}
.cp-ct-field input::placeholder,
.cp-ct-field textarea::placeholder { color: var(--color-grey-200); }
.cp-ct-field input:focus,
.cp-ct-field select:focus,
.cp-ct-field textarea:focus { outline: 2px solid var(--color-primary-soft); outline-offset: 1px; }

.cp-ct-field textarea { height: 120px; border-radius: var(--radius-12); resize: vertical; }

.cp-ct-field select.cp-ct-select {
  color: var(--color-primary); appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2301727c'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-16) center; background-size: 18px;
}

.cp-ct-submit {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--space-8);
  padding: var(--space-16); border: none; border-radius: var(--radius-24);
  background: var(--color-primary); color: var(--color-white); font-family: inherit;
  font-size: var(--fs-small); line-height: 24px; cursor: pointer;
}
.cp-ct-submit:hover { background: var(--color-primary-800); }
.cp-ct-note { font-size: var(--fs-small-2); line-height: 21px; color: var(--color-primary); opacity: .6; }

/* ===== Contact info ===== */
.cp-ct-info { display: flex; flex-direction: column; gap: var(--space-24); }
.cp-ct-info__img { display: block; border-radius: 28px; overflow: hidden; aspect-ratio: 624 / 347; background: linear-gradient(157deg, #1abdb0 0%, #008073 71%); }
.cp-ct-info__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cp-ct-info__head { display: flex; flex-direction: column; gap: var(--space-8); }
.cp-ct-info__eyebrow { text-transform: uppercase; font-size: var(--fs-small); line-height: 24px; color: var(--color-secondary-ink); }
.cp-ct-info__head h2 { font-size: var(--fs-h2); line-height: 38.4px; color: var(--color-primary-900); }
.cp-ct-info__sub { font-size: var(--fs-small); line-height: 24px; color: var(--color-grey-400); }

.cp-ct-contact { display: flex; gap: var(--space-16); align-items: flex-start; background: var(--color-bg-02); border-radius: var(--radius-12); padding: var(--space-16) var(--space-24); }
.cp-ct-contact__icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--radius-12); background: var(--color-primary-50); color: var(--color-primary-700); display: flex; align-items: center; justify-content: center; }
.cp-ct-contact__icon svg { width: 24px; height: 24px; }
.cp-ct-contact__text { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--fs-small); line-height: 24px; }
.cp-ct-contact__title { color: var(--color-primary-900); }
.cp-ct-contact__meta,
.cp-ct-contact__email { color: var(--color-grey-400); }
.cp-ct-contact__email { text-decoration: none; }
.cp-ct-contact__email:hover { text-decoration: underline; }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
  .cp-ct-grid { grid-template-columns: 1fr; gap: var(--space-32); }
  .cp-ct-hero__inner { padding-block: 48px; }
}
@media (max-width: 575.98px) {
  .cp-ct-hero h1 { font-size: var(--fs-h2); line-height: 1.2; }
  .cp-ct-card { padding: var(--space-24); }
}