/* =============================================================================
   CONTACT FORM — page-contact.php
   Append to bottom of css/page.css

   Scope: .contact-form-section và .axil-contact-form
   Grid nội bộ: .cf-row / .cf-col (tách khỏi grid chính tránh conflict)
   Không ảnh hưởng tới layout chung của page.php hay bất kỳ template khác.
   ============================================================================= */

/* ── Section wrapper ──────────────────────────────────────────── */
.contact-form-section {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--color-lighter, #e9ecef);
}

.contact-form-section__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 8px;
  line-height: 1.3;
}

.contact-form-section__subtitle {
  font-size: 14px;
  color: var(--color-midgray);
  margin: 0 0 28px;
  line-height: 1.6;
}

/* ── Form grid — scoped, không conflict với .row--40 ─────────── */
.axil-contact-form-area {
  width: 100%;
}

/* Outer wrapper .axil-contact-form.contact-form--1.row:
   Class .row từ source gốc — reset margin để dùng cf-row bên trong */
.axil-contact-form.contact-form--1.row {
  display: block; /* override nếu grid system ngoài cũng target .row */
}

.cf-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.cf-col {
  padding: 0 10px;
  box-sizing: border-box;
}

/* 3 cột đều nhau */
.cf-col.cf-col-3 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

/* ── Form group ───────────────────────────────────────────────── */
.axil-contact-form .form-group {
  margin-bottom: 20px;
}

.axil-contact-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 8px;
  line-height: 1.4;
}

/* Required asterisk */
.axil-contact-form label .required {
  color: #e53e3e;
  margin-left: 3px;
}

/* ── Inputs & Textarea ────────────────────────────────────────── */
.axil-contact-form input[type="text"],
.axil-contact-form input[type="email"],
.axil-contact-form input[type="tel"],
.axil-contact-form textarea {
  display: block;
  width: 100%;
  padding: 10px 14px;
  color: var(--color-gray);
  background: var(--color-lightest, #f8f9fa);
  border: 1px solid var(--color-lighter, #e9ecef);
  border-radius: var(--radius, 10px);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.axil-contact-form input[type="text"]:focus,
.axil-contact-form input[type="email"]:focus,
.axil-contact-form input[type="tel"]:focus,
.axil-contact-form textarea:focus {
  border-color: var(--color-primary, #3858f6);
  box-shadow: 0 0 0 3px rgba(56, 88, 246, 0.1);
}

.axil-contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* ── Submit button ────────────────────────────────────────────── */
.contact-form-section .form-submit {
  margin-top: 8px;
}

/* Reuse .axil-button.button-rounded.btn-primary từ frontpage.css nếu có.
   Selector dưới là fallback an toàn nếu class chưa được định nghĩa
   cho button element (frontpage.css có thể chỉ target <a>). */
.axil-contact-form button[type="submit"].axil-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 32px;
  background: var(--color-primary, #3858f6);
  color: var(--color-white, #fff);
  border: 2px solid transparent;
  border-radius: 500px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.axil-contact-form button[type="submit"].axil-button:hover {
  background: transparent;
  color: var(--color-primary, #3858f6);
  border-color: var(--color-primary, #3858f6);
}

/* ── Responsive ───────────────────────────────────────────────── */

/* Tablet: ≤ 1199px — layout section vẫn full-width vì grid chính
   đã collapse về 1 cột, form grid giữ nguyên (3 cột vẫn ổn). */

/* Mobile: ≤ 767px — 3 cột collapse về 1 cột */
@media only screen and (max-width: 767px) {
  .cf-col.cf-col-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .contact-form-section {
    margin-top: 28px;
    padding-top: 28px;
  }

  .contact-form-section__title {
    font-size: 20px;
  }
}

/* Mobile XS: ≤ 575px */
@media only screen and (max-width: 575px) {
  .contact-form-section__title {
    font-size: 18px;
  }

  .axil-contact-form textarea {
    min-height: 110px;
  }
}

/* ================================================================
   SIDEBAR RECENT POSTS — LANDSCAPE FIX
   Override: 1:1 square → 4:3 landscape cho .post-medium thumbnail.
   Áp dụng cho: archive.php, single.php, page.php, page-contact.php
   (tất cả đều dùng .archive-sidebar từ archive.css).
   Scoped hoàn toàn trong .archive-sidebar.
   ================================================================ */

.archive-sidebar .content-block.post-medium .post-thumbnail {
  height: auto; /* bỏ height: 100px cứng */
  aspect-ratio: 4 / 3; /* 100px wide → ~75px tall, landscape */
}

/* Mobile ≤ 767px — width: 80px → ~60px tall, vẫn landscape */
@media only screen and (max-width: 767px) {
  .archive-sidebar .content-block.post-medium .post-thumbnail {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Mobile XS ≤ 575px — width: 70px → ~52px tall, vẫn landscape */
@media only screen and (max-width: 575px) {
  .archive-sidebar .content-block.post-medium .post-thumbnail {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}