/* Travel Canada: the sister site's own look, layered on the shared
   engine's base.css (the same layout and type as Travel Australia).
   The token names come from the Australia design (--ochre is simply
   "the accent colour"); here they carry a glacier-lake palette. */
:root {
  --paper: #f6f7f4;
  --white: #fdfefc;
  --ink: #23303a;
  --muted: #56636b;
  --ochre: #2f5361;
  --ochre-dark: #223f4b;
  --sand: #e4ebe8;
  --line: #ccd8d5;
}

/* base.css's few fixed colours, retuned to match */
.enquiry-section { background: #e2eae7; }
.enquiry-form-wrap input, .enquiry-form-wrap select, .enquiry-form-wrap textarea { border-color: #9fb2b1; }
.enquiry-form-wrap input::placeholder, .enquiry-form-wrap textarea::placeholder { color: #66737a; }

/* Four kinds of holiday: two by two, four across on a wide screen. */
.journey-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .journey-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 800px) { .journey-tiles { grid-template-columns: 1fr; } }

.section-intro { max-width: 640px; margin: 18px auto 0; color: var(--muted); }
.section-intro p { margin-bottom: .6em; }
.section-intro:empty { display: none; }

/* "Why you'll love Travel Canada": photo beside four reasons */
.why-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7%;
  align-items: center;
  padding-block: 40px 90px;
}
.why-photo img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--sand); }
.why-photo figcaption { font-size: .85rem; color: var(--muted); margin-top: 10px; }
.why-copy h2 { margin-bottom: 30px; }
.why-reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.why-reason { border-top: 1px solid var(--line); padding-top: 18px; }
.why-reason h3 { font-size: 1.35rem; margin-bottom: 8px; }
.why-reason .rich-text p { margin-bottom: .5em; color: var(--muted); }
@media (max-width: 1050px) { .why-reasons { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 800px) {
  .why-section { grid-template-columns: 1fr; gap: 34px; padding-block: 20px 60px; }
  .why-photo { max-width: 640px; }
}