/* Welcome to The Island at West Bay: page layout (shared styles live in styles.css) */


/* Section 1: hero video */
.hero {
  height: 100vh;
  background: #000;
}

.hero-video {
  background-image: url("https://i.ytimg.com/vi/F5rBuRuRAE8/maxresdefault.jpg");
}


/* Section 2: beige spacer strip */
.strip {
  height: 50px;
  background: var(--beige);
}


/* Section 3: 365 Days of Adventure (parallax photo + green panel) */
.intro {
  min-height: 902.28px;
  background: #fff;
}

.intro-bg {
  background-image: url("../images/istock-1255493335-min-min_2.a55a5f945488.jpg");
}

.intro .row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
}

.intro .col-empty {
  padding: 19.62092vh 0 13.089vh 3.47222vw;
}

.intro .panel {
  padding: 100px 6.94059vw;
  background: var(--forest-75);
}

.intro h1 {
  margin-bottom: 0.55em;
  font-size: 4.5rem;
  font-weight: 100;
  line-height: 1;
  letter-spacing: 0.2em;
  color: #fff;
  text-align: center;
}

.intro .lede-wrap {
  margin-bottom: 25px;
}

.intro .lede {
  margin-bottom: 0.55em;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}

.intro .body {
  margin-bottom: 0.55em;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 2;
  color: #fff;
}


/* Section 4: Day One */
.day-one {
  min-height: 152.03px;
  background: var(--beige);
}

.day-one .col {
  padding: 30.35px 0 0;
  text-align: center;
}

.day-one h1 {
  margin-bottom: 0.55em;
  font-size: 3.5rem;
  font-weight: 200;
  line-height: 0;
  letter-spacing: 1em;
  color: #000;
}

.day-one h1 span {
  font-size: 1.875rem;
}


/* Section 5: Morning / Afternoon / Evening */
.times {
  min-height: 815.4px;
  background: #000;
}

.times .row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.times .col {
  padding: 0 3.49406vw 6.5445vh;
  background: #000;
}

.times .col.evening {
  padding: 0 3.48205vw 6.52504vh;
  background: none;
}

.morning-bg {
  background-image: url("../images/allan-nygren--xvkquntohi-unsplash_1-min.f965254e733f.jpg");
  background-position: 100% 100%;
}

.afternoon-bg {
  background-image: url("../images/adam-jaime-shht37a3scy-unsplash-min.23558a500356.jpg");
}

.evening-bg {
  background-image: url("../images/hans-isaacson-oz-jgjeysua-unsplash-min.9ec8f3387d06.jpg");
  background-position: 50% 100%;
}

.times h1 {
  margin: 0 0 0.3571428571em;
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.05;
  color: #fff;
}

.times h4 {
  margin: 0 0 1.5833333333em;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
}

.times .morning h4 {
  margin-bottom: 1.5625em;
  font-size: 1.3125rem;
  font-weight: 300;
}


/* Section 6: Let's Start Planning the Other 364 Days */
.plan {
  min-height: 330.05px;
  background: var(--beige);
}

.plan .col {
  padding: 33.61px 0 0 59.7px;
  justify-content: center;
  text-align: center;
}

.plan h1 {
  margin-bottom: 0.55em;
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.4em;
  color: #000;
}

.plan h1 .light {
  font-weight: 200;
}


/* Sections 7-8: "Days" tiles */
.tiles {
  background: var(--beige);
}

.tiles.r1 { min-height: 287.79px; }
.tiles.r2 { min-height: 319.69px; }

.tiles .row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 30px;
}

.tiles .col {
  padding: 0;
  align-items: stretch;
  text-align: center;
}

.tiles img {
  width: 100%;
  margin-bottom: 16px;
}

.tiles h4 {
  margin-bottom: 0.55em;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.3;
  color: #000;
}

.tiles h4 a {
  text-decoration: underline;
  color: inherit;
}


/* Section 9: footer */
.site-footer {
  min-height: 162.71px;
  background: #000;
}

.footer-bg {
  background-image: url("../images/omid-armin-fnzke3owm1o-unsplash-min.858aba037a1b.jpg");
}

.site-footer .row {
  grid-template-columns: minmax(0, 5fr) minmax(0, 14fr) minmax(0, 5fr);
}

.site-footer .c-logo   { padding: 48.75px 25px 25px; }
.site-footer .c-info   { padding: 45.25px 25px 25px; text-align: center; }
.site-footer .c-kolter { padding: 50.03px 25px 0; }

.site-footer .c-logo img,
.site-footer .c-kolter img {
  width: 188px;
  margin-bottom: 16px;
}

.site-footer p {
  margin-bottom: 0.55em;
  font-weight: 300;
  line-height: 1.5;
  color: #fff;
}

.site-footer .gallery {
  font-size: 1rem;
}

.site-footer .gallery strong {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 26px;
}

.site-footer .copy {
  font-size: 0.875rem;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 999px) {
  .intro .row,
  .times .row,
  .tiles .row,
  .site-footer .row {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .hero { height: 420.58px; }

  .intro { min-height: 595.5px; }
  .intro .col-empty { padding: 0 6.5vw; }
  .intro .panel { padding: 50px 6.51042vw 6.33714vh 6.5vw; }
  .intro h1 { font-size: 3.75rem; }

  .day-one .col { padding: 50px 6.5vw 25.23px; }

  .times .col,
  .times .col.evening { padding: 400px 39.0625vw 50px 6.5vw; }
  .times h1 { font-size: 3rem; }

  .plan .col { padding: 50px 6.5vw 25px; }

  .tiles .col { padding: 0 6.5vw; }
  .tiles .col.t-pt50 { padding-top: 50px; }
  .tiles .col.t-pb50 { padding-bottom: 50px; }
  .tiles img { margin-bottom: 50px; }
  .tiles .col.t-mb-em img { margin-bottom: 3.125em; }
  .tiles .col.t-mb-em2 img { margin-bottom: 3.0625em; }

  .site-footer .c-logo { padding: 50px 3.72569vw 0 39.0625vw; }
  .site-footer .c-logo img { width: 167px; }
  .site-footer .c-info { padding: 25px 6.5vw; }
  .site-footer .c-kolter { padding: 0 6.5vw 25px 39.0625vw; }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 749px) {
  .hero { height: 304.25px; }

  .intro { min-height: 513.17px; }
  .intro .col-empty { padding: 0 6.667vw; }
  .intro .panel { padding: 25px 5.33333vw 3.27225vh; }
  .intro h1 { font-size: 2.375rem; }
  .intro .lede { font-size: 1.0625rem; }
  .intro .body { font-size: 1.0625rem; line-height: 1.7; }

  .day-one { min-height: 64.4px; }
  .day-one .col { padding: 25px 6.667vw 0; }
  .day-one h1 { letter-spacing: 0.5em; }

  .times .col,
  .times .col.evening { padding: 250px 6.667vw 3.27225vh; }
  .times h1 { font-size: 2rem; }
  .times .morning h4 { font-size: 1.25rem; }
  .times .btn { font-size: 0.9375rem; }

  .plan { min-height: 175.65px; }
  .plan .col { padding: 25px 6.667vw 0; }
  .plan h1 { font-size: 1.875rem; }

  .tiles .col,
  .tiles .col.t-pt50,
  .tiles .col.t-pb50 { padding: 0 6.667vw 25px; }
  .tiles .col.m-pt25 { padding-top: 25px; }
  .tiles img,
  .tiles .col.t-mb-em img,
  .tiles .col.t-mb-em2 img { margin-bottom: 25px; }
  .tiles h4 { font-size: 1.0625rem; }
  .tiles h4.m-18 { font-size: 1.125rem; }

  .site-footer .c-logo { padding: 25px 24px 0 26.71979vw; }
  .site-footer .c-info { padding: 25px 24px; }
  .site-footer .c-kolter { padding: 0 24px 25px 26.66667vw; }
  .site-footer .c-kolter img { width: 188px; }
}