/* ==========================================================================
   Home page
   --------------------------------------------------------------------------
   Every section is a .grid (see main.css, "Layout grid"). Each piece gets
   its place with grid-area: row-start / column-start / row-end / column-end.
   The first value is for phones (8 columns, numbered 2-9 between the
   gutters), the one in the 768px block for wider screens (24 columns,
   numbered 2-25). These places are taken from the original site, so the
   page keeps its proportions.
   ========================================================================== */


/* Hero ------------------------------------------------------------------
   One rounded red card (the artwork) with the text placed on top of it. */

.hero__grid {
  --rows-m: 24;
  --rows: 18;
}

.hero__art {
  grid-area: 1 / 2 / 24 / 10;
  overflow: hidden;
  border-radius: 35px;
  background: var(--color-red);
}

.hero__art img {
  object-position: 50% 50%;
}

.hero__title,
.hero__tagline,
.hero__location {
  z-index: 1;
  color: var(--color-white);
}

.hero__title {
  grid-area: 3 / 3 / 13 / 9;
}

.hero__title strong {
  font-weight: 700;
}

.hero__tagline {
  grid-area: 14 / 3 / 17 / 8;
  margin: 0;
}

.hero__location {
  grid-area: 21 / 3 / 23 / 9;
  margin: 0;
  font-size: var(--text-sm);
  text-align: right;
}

@media (min-width: 768px) {
  .hero__art { grid-area: 1 / 2 / 19 / 26; }
  .hero__title { grid-area: 4 / 3 / 12 / 16; }
  .hero__tagline { grid-area: 15 / 3 / 17 / 14; }
  .hero__location { grid-area: 15 / 14 / 16 / 25; }
}


/* Statement ------------------------------------------------------------- */

.statement {
  --rows-m: 11;
  --rows: 7;
}

.statement__text {
  grid-area: 1 / 2 / 12 / 10;
  margin: 0;
}

@media (min-width: 768px) {
  .statement__text { grid-area: 2 / 5 / 8 / 23; }
}


/* Conference teaser ----------------------------------------------------- */

.teaser {
  --rows-m: 1;
  --rows: 1;
}

.teaser__inner {
  display: flex;
  grid-area: 1 / 2 / 2 / 10;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.teaser__text {
  flex: 1 1 460px;
  min-width: 0;
}

.teaser__eyebrow {
  display: block;
  margin: 0 0 12px;
  color: var(--color-red-bright);
  font-size: 15px;
  line-height: calc(1.5 * var(--text-base));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.teaser__title {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.teaser__lead {
  margin: 0;
  color: var(--color-muted-dark);
  font-size: 21px;
  line-height: 1.6;
}

.teaser__button {
  flex: 0 1 auto;
  padding: 17px 34px;
  font-size: 18px;
  line-height: calc(1.5 * var(--text-base));
  letter-spacing: -0.04em;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .teaser__inner { grid-area: 1 / 5 / 2 / 22; }
}


/* What we do ------------------------------------------------------------ */

.whatwedo {
  --rows-m: 30;
  --rows: 29;
}

.whatwedo__title { grid-area: 1 / 2 / 3 / 10; }
.whatwedo__intro { grid-area: 4 / 2 / 17 / 10; }
.whatwedo__core { grid-area: 18 / 2 / 21 / 10; margin: 0; }
.whatwedo__accordion { grid-area: 22 / 2 / 31 / 10; }

@media (min-width: 768px) {
  .whatwedo__title { grid-area: 1 / 14 / 4 / 25; }
  .whatwedo__intro { grid-area: 4 / 14 / 10 / 25; }
  .whatwedo__media { grid-area: 1 / 2 / 30 / 13; }
  .whatwedo__core { grid-area: 11 / 14 / 13 / 25; }
  .whatwedo__accordion { grid-area: 14 / 14 / 21 / 25; }
}


/* Who it's for ---------------------------------------------------------- */

.whoitsfor {
  --rows-m: 14;
  --rows: 21;
}

.whoitsfor__title { grid-area: 1 / 2 / 3 / 10; }
.whoitsfor__intro { grid-area: 3 / 2 / 7 / 9; margin: 0; }
.whoitsfor__accordion { grid-area: 7 / 2 / 15 / 10; }

@media (min-width: 768px) {
  .whoitsfor__title { grid-area: 1 / 2 / 4 / 13; }
  .whoitsfor__intro { grid-area: 4 / 2 / 7 / 13; }
  .whoitsfor__accordion { grid-area: 7 / 2 / 16 / 13; }
  .whoitsfor__media { grid-area: 1 / 15 / 22 / 26; }
}


/* Sectors band ---------------------------------------------------------- */

.sectors {
  --rows-m: 3;
  --rows: 6;
}

.sectors__marquee {
  display: flex;
  align-items: center;
}

.sectors__note {
  grid-area: 1 / 2 / 4 / 10;
  margin: 0;
  text-align: center;
}

@media (min-width: 768px) {
  .sectors__marquee { grid-area: 1 / 1 / 3 / 27; }
  .sectors__note { grid-area: 5 / 8 / 7 / 20; }
}


/* Why Canada ------------------------------------------------------------ */

.whycanada {
  --rows-m: 35;
  --rows: 22;
}

.whycanada__title { grid-area: 1 / 2 / 3 / 10; }
.whycanada__intro { grid-area: 4 / 2 / 15 / 10; }
.whycanada__more { grid-area: 15 / 2 / 36 / 10; }

@media (min-width: 768px) {
  .whycanada__title { grid-area: 1 / 15 / 4 / 25; }
  .whycanada__intro { grid-area: 4 / 15 / 11 / 25; }
  .whycanada__media { grid-area: 1 / 2 / 23 / 13; }
  .whycanada__more { grid-area: 11 / 15 / 23 / 25; }
}


/* Team ------------------------------------------------------------------
   Three columns on wide screens, one under the other on phones. The name,
   role, bio and link of a person deliberately share rows (as on the original
   site), each starting a little lower than the one before. Ghazaleh's
   shorter bio spans three rows instead of five, as on the original, which
   stretches those rows and leaves room above every LinkedIn link. */

.team {
  --rows-m: 66;
  --rows: 26;
}

.team__title { grid-area: 1 / 2 / 4 / 10; }

.team__photo {
  overflow: hidden;
  border-radius: 40px;
}

.team__photo img {
  object-position: 50% 30%;
}

.team__name,
.team__role,
.team__bio,
.team__link {
  margin: 0;
}

.team__photo--1 { grid-area: 4 / 2 / 15 / 10; }
.team__name--1 { grid-area: 16 / 2 / 18 / 10; }
.team__role--1 { grid-area: 17 / 2 / 19 / 10; }
.team__bio--1 { grid-area: 18 / 2 / 23 / 10; }
.team__link--1 { grid-area: 22 / 2 / 26 / 10; }

.team__photo--2 { grid-area: 25 / 2 / 35 / 10; }
.team__name--2 { grid-area: 36 / 2 / 38 / 10; }
.team__role--2 { grid-area: 37 / 2 / 41 / 10; }
.team__bio--2 { grid-area: 38 / 2 / 43 / 10; }
.team__link--2 { grid-area: 42 / 2 / 46 / 10; }

.team__photo--3 { grid-area: 46 / 2 / 57 / 10; }
.team__name--3 { grid-area: 57 / 2 / 59 / 10; }
.team__role--3 { grid-area: 58 / 2 / 60 / 10; }
.team__bio--3 { grid-area: 59 / 2 / 64 / 10; }
.team__link--3 { grid-area: 63 / 2 / 67 / 10; }

.team__link .link {
  font-weight: 700;
}

@media (min-width: 768px) {
  .team__title { grid-area: 1 / 2 / 4 / 8; }

  .team__photo--1 { grid-area: 4 / 2 / 19 / 8; }
  .team__name--1 { grid-area: 19 / 2 / 21 / 8; }
  .team__role--1 { grid-area: 20 / 2 / 21 / 8; }
  .team__bio--1 { grid-area: 21 / 2 / 26 / 8; }
  .team__link--1 { grid-area: 25 / 2 / 27 / 8; }

  .team__photo--2 { grid-area: 4 / 9 / 19 / 15; }
  .team__name--2 { grid-area: 19 / 9 / 21 / 15; }
  .team__role--2 { grid-area: 20 / 9 / 21 / 15; }
  .team__bio--2 { grid-area: 21 / 9 / 24 / 15; }
  .team__link--2 { grid-area: 25 / 9 / 27 / 15; }

  .team__photo--3 { grid-area: 4 / 16 / 19 / 22; }
  .team__name--3 { grid-area: 19 / 16 / 21 / 22; }
  .team__role--3 { grid-area: 20 / 16 / 21 / 22; }
  .team__bio--3 { grid-area: 21 / 16 / 26 / 22; }
  .team__link--3 { grid-area: 25 / 16 / 27 / 22; }
}


/* Contact --------------------------------------------------------------
   The hand-and-grid artwork is the section background. */

.contact {
  background: url("/assets/img/site/hand.webp") left bottom / cover no-repeat;
}

.contact__grid {
  --rows-m: 19;
  --rows: 12;
}

.contact__title { grid-area: 1 / 2 / 4 / 10; }
.contact__lead { grid-area: 3 / 2 / 5 / 10; margin: 0; }
.contact__form { grid-area: 6 / 2 / 20 / 10; }

.contact__form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.field__legend {
  margin-bottom: 0.25rem;
  padding: 0;
  font-size: var(--text-base);
  font-weight: 700;
}

.contact__submit {
  padding: 16px 21px;
  background: var(--color-red-button);
  font-size: 16px;
  letter-spacing: 0.04em;
}

@media (min-width: 768px) {
  .contact__title { grid-area: 2 / 2 / 5 / 12; }
  .contact__lead { grid-area: 5 / 2 / 8 / 11; }
  .contact__form { grid-area: 1 / 14 / 13 / 26; }
}