/* cl-home.css: Giant Loop's home (templates/home.html), from their measurements at 1440 and in the 390 phone stage:
   the film still, the promise beside the photo in four strips, the ruled label rows, the featured product, the
   three collection tiles and the Popular products row. Their thin black rules and the two vertical guide lines at
   72px from each edge are drawn here. Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.gl-home { --gl-hero: 700px; --gl-band: 80px; --gl-edge: 72px; }

/* the hero: a still of their film, 700px tall (500 on a phone), less the vehicle band above it */
.gl-hero { height: calc(var(--gl-hero) - var(--gl-band, 0px)); min-height: 200px; background: #111; overflow: hidden; }
.gl-hero img { width: 100%; height: 100%; object-fit: cover; }

/* their guide lines, 72px in from each edge, down the whole page under the hero */
.gl-home { background:
  linear-gradient(var(--site-rule), var(--site-rule)) var(--gl-edge) 0 / 1px 100% no-repeat,
  linear-gradient(var(--site-rule), var(--site-rule)) calc(100% - var(--gl-edge)) 0 / 1px 100% no-repeat,
  var(--site-bg); }

/* the promise: the photo cut in four strips at the left, the slogan and the brand's line at the right */
.gl-promise { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 576px; padding: 48px 0; border-bottom: 1px solid var(--site-rule); }
.gl-promise__art { height: 500px;
  -webkit-mask-image: linear-gradient(to right, #000 0 19.9%, transparent 19.9% 25%, #000 25% 44.9%, transparent 44.9% 50.9%, #000 50.9% 72%, transparent 72% 78%, #000 78% 99.1%, transparent 99.1%);
  mask-image: linear-gradient(to right, #000 0 19.9%, transparent 19.9% 25%, #000 25% 44.9%, transparent 44.9% 50.9%, #000 50.9% 72%, transparent 72% 78%, #000 78% 99.1%, transparent 99.1%); }
.gl-promise__art img { width: 100%; height: 100%; object-fit: cover; }
.gl-promise__copy { position: relative; width: 432px; margin-left: 72px; padding-top: 80px; }
.gl-promise__cross { position: absolute; left: -72px; top: -4px; width: 92px; height: 92px;
  background: linear-gradient(var(--site-fg), var(--site-fg)) 50% 0 / 8px 100% no-repeat, linear-gradient(var(--site-fg), var(--site-fg)) 0 50% / 100% 8px no-repeat; }
.gl-promise__h { display: block; font: 600 54px/83px var(--site-font-heading); text-transform: uppercase; }

/* the label row: a thin black rule above and below, a black bar where their small mark sits, the spaced capitals */
.gl-label { display: flex; align-items: center; gap: 36px; min-height: 88px; padding: 32px 0 18px 18px; border-top: 1px solid var(--site-rule); border-bottom: 1px solid var(--site-rule); }
.gl-label--open { border: 0; padding-top: 48px; padding-bottom: 0; min-height: 104px; }
.gl-label__mark { flex: none; width: 90px; height: 6px; background: var(--site-fg); }
.gl-label__h { padding: 7px 0; font: 600 18px/21.6px var(--site-font-heading); letter-spacing: 9px; text-transform: uppercase; }

/* the featured product: the name, the photo, the words and the button in three columns of 420 */
.gl-featured { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 420px)); column-gap: 21px; justify-content: start; min-height: 498px; padding: 36px 88px 0 47px; border-bottom: 1px solid var(--site-rule); }
.gl-featured__name { padding-top: 36px; }
.gl-featured__h { font: 600 72px/86.4px var(--site-font-heading); text-transform: uppercase; }
.gl-featured__sub { font: 600 54px/64.8px var(--site-font-heading); text-transform: uppercase; }
.gl-featured__img img { width: 100%; max-width: 420px; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--site-photo-mat); }
.gl-featured__copy { position: relative; padding-top: 25px; }
.gl-featured__copy::before, .gl-featured__copy::after { content: ""; position: absolute; width: 36px; height: 36px; border: 0 solid var(--site-fg); }
.gl-featured__copy::before { left: -25px; top: 0; border-width: 6px 0 0 6px; }
.gl-featured__copy::after { right: 0; bottom: 96px; border-width: 0 6px 6px 0; }
.gl-featured__p { font: 400 18px/22px var(--site-font-body); }
.gl-featured__btn { display: flex; width: 100%; margin-top: 55px; }
.gl-featured__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(var(--site-fg), var(--site-fg)) 0 0 / 25% 100% no-repeat, var(--site-track); }

/* the collections: three square photos, the name in white capitals placed as theirs are */
.gl-collections { padding-bottom: 47px; border-bottom: 1px solid var(--site-rule); }
.gl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl-tile { position: relative; display: block; margin: 8px; aspect-ratio: 1; overflow: hidden; color: #FFFFFF; }
.gl-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gl-tile:hover img { transform: scale(1.03); }
.gl-tile__name { position: absolute; font: 600 54px/64.8px var(--site-font-heading); text-transform: uppercase; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.gl-tile--low .gl-tile__name { left: 8px; bottom: 26px; }
.gl-tile--mid .gl-tile__name { left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; }
.gl-tile--end .gl-tile__name { right: 8px; top: 50%; transform: translateY(-50%); }

/* Popular products: four product photos with their names, where their reviews sat */
.gl-popular { display: flex; align-items: center; min-height: 621px; padding: 48px 18px; }
.gl-popular__list { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.gl-card { display: grid; gap: 16px; text-align: center; }
.gl-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--site-plate); }
.gl-card__name { font: 600 18px/22px var(--site-font-body); text-transform: uppercase; }
.gl-card:hover .gl-card__name { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 979.98px) {
  .gl-home { --gl-hero: 500px; --gl-band: 281px; }
  .gl-home { --gl-edge: 20px; }
  .gl-promise { grid-template-columns: 1fr; padding: 48px 0; }
  .gl-promise__art { order: 2; height: 500px; }
  .gl-promise__copy { order: 1; width: auto; margin: 0 72px; padding: 98px 0 81px; }
  .gl-promise__cross { left: -77px; top: 17px; width: 90px; height: 90px; }
  .gl-promise__h { font-size: 36px; line-height: 61px; }

  .gl-label { gap: 18px; }
  .gl-label__h { max-width: 264px; }

  .gl-featured { grid-template-columns: 1fr; padding: 71px 33px 48px; min-height: 1166px; align-content: start; }
  .gl-featured__name { padding: 0; }
  .gl-featured__h { padding-bottom: 43px; }
  .gl-featured__img { margin-top: -41px; }
  :root[data-parts-theme="dark"] .gl-featured__img { margin-top: 0; }  /* its white plate would cover the heading's last line, which the bare photo only overlaps */
  .gl-featured__img img { width: 100%; height: auto; aspect-ratio: 1; }
  .gl-featured__copy { padding-top: 51px; }

  .gl-tiles { grid-template-columns: 1fr; }
  .gl-tile { margin: 0; }

  .gl-popular { padding: 48px 16px; }
  .gl-popular__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .gl-card__name { font-size: 15px; line-height: 19px; }
}

}