/* On mobile width, remove top margin from main, feels better on spot pages .. */
@media (max-width: 768px) {
  main {
    margin-top: 0 !important;
  }
}

article > .metadata,
article > .triptych,
article > section,
.values > h2,
.values > div {
  padding-left: var(--document-margin);
  padding-right: var(--document-margin);
}

/* Custom list styling as currently only used on spots */
ul {
  padding-left: .75rem;
}

ul > li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  
  line-height: 1.45;
}

ul > li::before {
  content: url("data:image/svg+xml,%0A%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.55283 8.51168C3.62524 8.37074 2.78161 7.81199 2.18688 7.06932C1.59214 6.32765 1.2323 5.41305 1.04438 4.47847C0.908445 3.80077 0.862465 3.08408 1.08437 2.43537C1.32726 1.72369 1.87901 1.15194 2.52373 0.781106C3.16844 0.41027 3.90212 0.224351 4.63779 0.117398C5.37846 0.00944613 6.13013 -0.0245388 6.8788 0.0174426C7.27163 0.0394329 7.67345 0.0854126 8.02729 0.264333C8.31716 0.411268 8.56005 0.642166 8.76396 0.898052C9.29973 1.57075 9.5836 2.41138 9.78951 3.24801C9.93844 3.85174 10.1174 4.49246 9.96043 5.0902C9.74753 5.89984 9.48664 6.40861 8.8979 7.01534C8.16323 7.75601 7.17867 8.20182 6.16312 8.42272C5.63535 8.53767 5.08859 8.59464 4.55283 8.51268V8.51168Z' fill='%23242124'/%3E%3C/svg%3E%0A");
  display: block;
}

ul > li:nth-of-type(2n+1)::before {
  content: url("data:image/svg+xml,%0A%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.56776 5.34091C8.47835 6.01395 8.29363 6.69582 7.88097 7.22835C7.42901 7.81394 6.73338 8.16961 6.01613 8.31011C5.29889 8.44963 4.55708 8.3897 3.83885 8.25509C3.11571 8.12049 2.40534 7.91317 1.72248 7.63512C1.36386 7.4897 1.00426 7.31973 0.733078 7.03971C0.510044 6.81078 0.357754 6.51897 0.249676 6.21536C-0.0352572 5.41952 -0.0313256 4.54703 0.042364 3.70402C0.096403 3.09584 0.132759 2.44246 0.468784 1.93646C0.923694 1.25163 1.32849 0.860588 2.06932 0.48428C2.98798 0.029369 4.04617 -0.072814 5.06014 0.0450894C5.58677 0.106006 6.11438 0.226856 6.586 0.47347C7.40346 0.899887 8.01067 1.68787 8.32802 2.56724C8.64538 3.4466 8.68959 4.41144 8.56678 5.33993L8.56776 5.34091Z' fill='%23242124'/%3E%3C/svg%3E%0A");
}

@media (min-width: 640px) {
  
  ul {
    padding-left: 2rem;
  }
  
  ul > li {
    gap: 1rem;
  }
  
  ul > li::before {
    content: url("data:image/svg+xml,%0A%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.44317 12.4931C4.08169 12.2863 2.84345 11.4661 1.97052 10.3761C1.09759 9.28749 0.569425 7.94508 0.293608 6.57333C0.0940807 5.57862 0.0265935 4.5267 0.352292 3.57455C0.708801 2.52996 1.51865 1.69078 2.46493 1.14648C3.41122 0.602179 4.48808 0.329294 5.56788 0.172313C6.65501 0.0138647 7.75828 -0.0360171 8.85714 0.0256016C9.43372 0.0578781 10.0235 0.125365 10.5429 0.387979C10.9683 0.603644 11.3248 0.942547 11.6241 1.31813C12.4105 2.30549 12.8272 3.53934 13.1294 4.76731C13.348 5.65345 13.6106 6.59386 13.3803 7.4712C13.0678 8.65956 12.6848 9.40632 11.8207 10.2969C10.7424 11.384 9.29728 12.0383 7.80669 12.3626C7.03206 12.5313 6.22954 12.6149 5.44317 12.4946V12.4931Z' fill='%23242124'/%3E%3C/svg%3E%0A");
  }
  
  ul > li:nth-of-type(2n+1)::before {
    content: url("data:image/svg+xml,%0A%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.198 7.8873C13.066 8.88122 12.7932 9.88819 12.1838 10.6746C11.5163 11.5394 10.4891 12.0646 9.42986 12.2721C8.37065 12.4782 7.27517 12.3897 6.21452 12.1909C5.1466 11.9921 4.09755 11.6859 3.08912 11.2753C2.55952 11.0606 2.02847 10.8096 1.628 10.396C1.29863 10.058 1.07373 9.62701 0.914124 9.17866C0.493343 8.00338 0.499149 6.71492 0.607972 5.46999C0.687775 4.57184 0.741465 3.60695 1.2377 2.8597C1.90949 1.84838 2.50729 1.27089 3.60132 0.71517C4.95798 0.0433713 6.52067 -0.10753 8.01807 0.0665866C8.79579 0.156547 9.57495 0.335014 10.2714 0.699207C11.4786 1.32893 12.3753 2.4926 12.844 3.79122C13.3127 5.08984 13.3779 6.51469 13.1966 7.88585L13.198 7.8873Z' fill='%23242124'/%3E%3C/svg%3E%0A");
  }
}

/* Order sections for more control */
article > .triptych    { order: 1; }
article > header       { order: 2; }
article > .metadata    { order: 3; }
article > section      { order: 4; }
article > .values    { order: 5; }

@media (min-width: 768px) {

  article > header       { order: 1; }
  article > .metadata    { order: 2; }
  article > .triptych    { order: 3; }
  article > section      { order: 4; }
  article > .values    { order: 5; }
}

.metadata {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.column .item {
  display: flex;
}

.column:not(:last-of-type) .item {
  align-items: center;
}

.column:nth-of-type(1) .item:first-of-type {
  /* Keeps address from pushing content too much .. */
  min-width: min(100%, 37.5rem);
  max-width: 37.5rem;
}

.column .item.hours > p {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.column .item > div svg {
  display: block;

  width: 1.5rem;
  height: auto;
}

.column .item > p {
  margin-left: 1rem;
  line-height: 1;
  white-space: normal;
}

.column .item > p a {
  text-decoration: none;
  color: inherit;
}

.column .item > p a:hover {
  text-decoration: underline;
}

.column .item > p span {
  display: block;
  white-space: nowrap; /* TODO: Targets hours .. fix naming */
}

@media (min-width: 768px) {

  .metadata {
    flex-direction: row;
    gap: 4rem;
  }
  
  .column .item > div svg {
    width: 2rem;
  }
}

.triptych {
  display: flex;

  /* 16px < ... > 24px */
  gap: clamp(1rem, 0.7727rem + 0.9091vw, 1.5rem);

  overflow-x: auto;
  overflow-y: visible;

  -webkit-overflow-scrolling: touch;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  -ms-scroll-snap-points-x: repeat(100%);
  scroll-snap-points-x: repeat(100%);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.triptych > div {
  position: relative;
  width: 100%;
  min-width: 14rem;
  overflow: hidden;
  border-radius: var(--border-radius-md);
}

.triptych > div::before {
  content: '';
  display: block;
  height: 0;
  padding-bottom: 150%;
}

.triptych > div:nth-of-type(1) { background-color: var(--wine-02); }
.triptych > div:nth-of-type(2) { background-color: var(--cosmos-02) }
.triptych > div:nth-of-type(3) { background-color: var(--ocean-02) }

.triptych > div img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {

  .triptych {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

.values {
  overflow: hidden;
}

.values > div {
  display: flex;
  overflow-x: auto;
  overflow-y: visible;

  -webkit-overflow-scrolling: touch;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  -ms-scroll-snap-points-x: repeat(100%);
  scroll-snap-points-x: repeat(100%);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.values > div div {
  min-width: 15.625rem;

  text-align: center;
  scroll-snap-align: center;
}

.values > div > div > a {
  position: relative;
  display: flex;
}

.values > div > div > a > img {
  display: block;
}

.values > div > div p {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  white-space: normal;
}

.values > div > div p a {
  color: inherit;
  text-decoration: none;
}

@media (min-width: 768px) {

  .values > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr));
    gap: 1.25rem;
    row-gap: 1.25rem;
  }

  .values > div > div p {
    padding-left: .125rem;
    padding-right: .125rem;
  }
}