/* ==========================================================================
   Sense Wellness: blog listing (/blogs/skincare-guides) and article pages
   ========================================================================== */

/* ---------- Listing */

.main-blog-section {
  padding: 27px 0;
}

.title--primary {
  margin: 48px 0;
}

.blog-articles {
  display: grid;
  gap: var(--grid-gap);
}

.blog-articles__article {
  display: flex;
  align-items: center;
}

.blog-articles__article[hidden] {
  display: none;
}

.card-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
  text-decoration: none;
}

/* Image area: a fixed height, as the theme sets for "medium" blog images. */
.card__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.card__inner::before {
  content: "";
  width: 0;
  height: 0;
  padding-bottom: 264px;
}

.card__media {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  overflow: hidden;
}

/* Placeholder tint while an image loads (the theme's alternate scheme). */
.card .media {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: rgba(31, 31, 31, 0.1);
}

.card .media > img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card__content {
  display: grid;
  grid-template-rows: max-content minmax(0, 1fr) max-content auto;
  flex-grow: 1;
  width: 100%;
  padding: 0;
}

.card__information {
  grid-row-start: 2;
  padding: 15.6px 0;
}

.card__heading {
  margin: 0 0 7.2px;
}

.full-unstyled-link {
  display: block;
  color: currentColor;
  text-decoration: none;
}

/* The whole card is clickable through the title link. */
.card__heading a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.article-card__info {
  padding-top: 4.8px;
}

.article-card__excerpt {
  width: 100%;
  max-width: 984px;
  margin: 14.4px auto 24px;
}

/* A single date: no bullet after it. */
.circle-divider::after {
  content: "\2022";
  margin: 0 15.6px 0 18px;
}

.circle-divider:last-of-type::after {
  display: none;
}

@media (min-width: 750px) {
  .main-blog-section {
    padding: 36px 0;
  }

  .blog-articles {
    grid-template-columns: 1fr 1fr;
  }

  .card__inner::before {
    padding-bottom: 262.8px;
  }

  .card__information {
    padding: 20.4px 0;
  }

  /* Collage: the 1st, 4th, 7th… article (and a lone last one) spans the
     full width, centred, with a taller image. */
  .blog-articles--collage > :nth-child(3n + 1),
  .blog-articles--collage > :nth-child(3n + 2):last-child {
    grid-column: span 2;
    text-align: center;
  }

  .blog-articles--collage > :nth-child(3n + 1) .card,
  .blog-articles--collage > :nth-child(3n + 2):last-child .card {
    text-align: center;
  }

  .blog-articles--collage > :nth-child(3n + 1) .card__inner::before,
  .blog-articles--collage > :nth-child(3n + 2):last-child .card__inner::before {
    padding-bottom: 528px;
  }
}

@media (min-width: 990px) {
  .title--primary {
    margin: 24px 0;
  }

  .card__inner::before {
    padding-bottom: 368.4px;
  }

  .blog-articles--collage > :nth-child(3n + 1) .card__inner::before,
  .blog-articles--collage > :nth-child(3n + 2):last-child .card__inner::before {
    padding-bottom: 660px;
  }

  .card .media--hover-effect > img {
    transition: transform 0.5s ease;
  }

  .card-wrapper:hover .media--hover-effect > img {
    transform: scale(1.03);
  }

  .underline-links-hover:hover a {
    text-decoration: underline;
    text-underline-offset: 3.6px;
  }
}

/* ---------- Pagination (page 2 is ?page=2, shown by site.js) */

.pagination-wrapper {
  margin-top: 48px;
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__list > li {
  flex: 1 0 52.8px;
  max-width: 52.8px;
}

.pagination__list > li:not(:last-child) {
  margin-right: 12px;
}

.pagination__item {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 52.8px;
  padding: 0;
  color: rgb(var(--fg));
  text-decoration: none;
}

.pagination__item--link,
.pagination__item-arrow {
  cursor: pointer;
  font-size: 16.8px;
}

.pagination__item--current {
  opacity: 0.7;
}

.pagination__item--current::after,
.pagination__item--link:hover::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  display: block;
  width: 24px;
  height: 1.2px;
  background-color: currentColor;
  transform: translateX(-50%);
}

.pagination__item .svg-wrapper {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pagination__item .icon-caret {
  width: 100%;
  height: 7.2px;
}

.pagination__item--next-page .icon {
  margin-right: -2.4px;
  transform: rotate(-90deg);
}

.pagination__item--next-page:hover .icon {
  transform: rotate(-90deg) scale(1.07);
}

.pagination__item--prev-page .icon {
  margin-left: -2.4px;
  transform: rotate(90deg);
}

.pagination__item--prev-page:hover .icon {
  transform: rotate(90deg) scale(1.07);
}

@media (min-width: 990px) {
  .pagination-wrapper {
    margin-top: 60px;
  }
}

/* ---------- Article page */

.article-template__hero-container {
  max-width: 1560px;
  margin: 0 auto;
}

.article-template__hero-adapt {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: rgba(var(--fg), 0.1);
}

.article-template__hero-adapt > img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.article-template header {
  margin-top: 52.8px;
  margin-bottom: 24px;
  line-height: 0.6667;
}

.article-template__title {
  margin: 0 0 12px;
}

.article-template__social-sharing {
  margin-top: 36px;
}

.article-template__content {
  margin-top: 18px;
  margin-bottom: 36px;
}

.article-template__back {
  margin-top: 60px;
  margin-bottom: 38.4px;
}

.article-template__link {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(var(--link));
  font-size: 21.6px;
  text-decoration: none;
  cursor: pointer;
}

.article-template__link .icon-wrap {
  display: flex;
  margin-right: 12px;
  transform: rotate(180deg);
}

.svg-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.svg-wrapper > svg {
  width: 100%;
  height: 100%;
}

.article-template__link .icon-arrow path {
  transform: translateX(-3px);
  transition: transform 0.1s ease;
}

.article-template__link:hover .icon-arrow path {
  transform: translateX(-0.6px);
}

@media (min-width: 750px) {
  .article-template header {
    margin-top: 60px;
  }
}

/* ---------- Share button */

.share-button {
  position: relative;
  display: block;
}

.share-button__details {
  width: fit-content;
}

.share-button__details[hidden],
.share-button__native[hidden] {
  display: none;
}

.share-button__button {
  display: flex;
  align-items: center;
  min-height: 52.8px;
  margin-left: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(var(--link));
  font: inherit;
  font-size: 16.8px;
  letter-spacing: inherit;
  cursor: pointer;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 3.6px;
}

/* The icon's box is 20px wide but the icon carries a 12px margin, so it
   overflows its box and sits close to the label, as on the original. */
.share-button__button .icon-share {
  flex-shrink: 1;
  width: 100%;
  min-width: 15.6px;
  height: 14.4px;
  margin-right: 12px;
}

/* Where the device has a share sheet, the original showed a plain <button>,
   which the theme styles in capitals with the system font. */
.share-button__native {
  padding: 15px 40px 15px 0;
  font-family: var(--font-system);
  font-size: 16.8px;
  line-height: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
  .share-button__details[open] > .share-button__fallback {
    animation: share-open 0.2s ease;
  }
}

.share-button__fallback {
  position: absolute;
  top: 36px;
  left: 1.2px;
  z-index: 3;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: max-content;
  border: 0;
}

.share-button__fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-page);
  pointer-events: none;
}

.share-button__fallback::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  border: 1.2px solid transparent;
  box-shadow: 0 0 0 1px rgba(var(--fg), 0.55);
  pointer-events: none;
}

.share-button__fallback .field {
  position: relative;
  display: flex;
  width: 100%;
}

.share-button__fallback .field__input {
  flex-grow: 1;
  width: 100%;
  height: 54px;
  margin: 1px;
  padding: 26.4px 18px 9.6px 24px;
  border: 0;
  border-radius: 0;
  background-color: var(--color-page);
  color: rgb(var(--fg));
  font-family: var(--font-body);
  font-size: 19.2px;
  line-height: 1.4167;
  letter-spacing: 0.48px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.share-button__fallback .field__input:focus {
  outline: 2.4px solid rgba(var(--fg), 0.5);
  outline-offset: 1.2px;
  box-shadow: 0 0 0 1.2px var(--color-page), 0 0 6px 4.8px rgba(var(--fg), 0.3);
}

.share-button__fallback .field__label {
  position: absolute;
  top: 7px;
  left: 25px;
  margin: 0;
  color: rgba(var(--fg), 0.75);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.48px;
  pointer-events: none;
}

.share-button__message {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 1px;
  padding: 9.6px 0 9.6px 18px;
}

.share-button__message[hidden] {
  display: none;
}

/* While the "copied" message shows, it replaces the link field. */
.share-button__message:not([hidden]) ~ * {
  display: none;
}

.share-button__fallback button {
  position: relative;
  right: 1px;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 52.8px;
  height: 52.8px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: rgb(var(--fg));
  cursor: pointer;
}

.share-button__fallback button[hidden] {
  display: none;
}

.share-button__fallback button:hover {
  color: rgba(var(--fg), 0.75);
}

.share-button__fallback button:hover .svg-wrapper {
  transform: scale(1.07);
}

.share-button__fallback .icon {
  width: 18px;
  height: 18px;
}

@keyframes share-open {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}