/* ==========================================================================
   meirune — news.css: the お知らせ free pages - the list (/f/news, news.html) and each
   article (/f/news-…, news-article.html). Loaded after base.css
   by the mr.css.news part in the head of the フリーページ layout.

   The breadcrumb, container and title type are shared with the other pages (base.css).
   The rows are the mr.news.list part, which the TOP draws as plain date and title lines
   (top.css); here each one gets its picture - the article's .mr-news__image, or the brand
   mark on the accent colour - beside the date and a title of up to four lines, and the
   page numbers from news.html's script sit under them. Measured from the Bagisto theme's
   news list (resources/views/news/index.blade.php).
   ========================================================================== */

.mr-news-page {
  padding: 32px 0;
}

.mr-news-page,
.mr-news-page * {
  box-sizing: border-box;
}

.mr-news-page__title {
  margin-bottom: 40px;
  text-align: center;
}

.mr-news-page .mr-news {
  margin: 0;
  border-top: 1px solid #000;
}

/* One grid per row: the picture on top, then the date and the title; from md the picture
   takes the left column across both. */
.mr-news-page .mr-news__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: 20px 10px;
  border-bottom: 1px solid #000;
  color: var(--mr-ink);
  text-decoration: none;
}

.mr-news-page .mr-news__item[hidden] {
  display: none;
}

/* The brand mark on the accent colour, always drawn; an article's own picture is laid
   over it in the same cell. */
.mr-news-page .mr-news__item::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: 100%;
  aspect-ratio: 13 / 10;
  background: var(--mr-red) url("https://sfgbeauty.itembox.cloud/item/meirune/img/logo.svg") center / 62% auto no-repeat;
}

.mr-news-page .mr-news__image {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 13 / 10;
  object-fit: cover;
}

.mr-news-page .mr-news__date {
  grid-column: 1;
  grid-row: 2;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.mr-news-page .mr-news__title {
  grid-column: 1;
  grid-row: 3;
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  transition: opacity var(--mr-ease);
}

.mr-news-page .mr-news__item:hover .mr-news__title {
  opacity: 0.65;
}

/* Page numbers (news.html): three at a time, … where more lie beyond, and the arrows. */
.mr-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
}

.mr-pager[hidden] {
  display: none;
}

.mr-pager__page {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--mr-line);
  border-radius: 50%;
  background: #fff;
  color: var(--mr-ink);
  font-family: var(--mr-en);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--mr-ease);
}

.mr-pager__page:hover {
  background: var(--mr-bg);
  color: var(--mr-ink);
}

.mr-pager__page.is-current,
.mr-pager__page.is-current:hover {
  border-color: var(--mr-ink);
  background: var(--mr-ink);
  color: #fff;
}

.mr-pager__gap {
  padding: 0 2px;
  color: var(--mr-ink);
  font-family: var(--mr-en);
  font-size: 15px;
}

/* Chevrons drawn from a rotated corner. */
.mr-pager__arrow {
  --mr-chevron: 9px;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 30px;
  transition: opacity var(--mr-ease);
}

.mr-pager__arrow::after {
  content: "";
  width: var(--mr-chevron);
  height: var(--mr-chevron);
  border-top: 2px solid var(--mr-ink);
  border-right: 2px solid var(--mr-ink);
}

.mr-pager__arrow--next::after {
  transform: translateX(-2px) rotate(45deg);
}

.mr-pager__arrow--prev::after {
  transform: translateX(2px) rotate(-135deg);
}

a.mr-pager__arrow:hover {
  opacity: 0.55;
}

/* The design leaves out the arrow with nowhere to go; its space is kept so the numbers do
   not shift from page to page. */
.mr-pager__arrow.is-disabled {
  visibility: hidden;
}

/* ==========================================================================
   One article (news-article.html, a フリーページ per article): a 900px column with the
   date, the picture - or the brand mark on the accent colour - the title, the text and
   お知らせ一覧に戻る. Measured from resources/views/news/show.blade.php; the picture keeps
   the list's 13:10, as the design draws it.
   ========================================================================== */

/* The last crumb is the article's title: kept on the crumbs' line and cut short with …
   rather than dropped onto a line of its own. */
.mr-breadcrumb__inner:has(> .mr-breadcrumb__current) {
  flex-wrap: nowrap;
}

.mr-breadcrumb__inner > .mr-breadcrumb__current {
  flex: 0 1 auto;
  min-width: 0;
}

.mr-breadcrumb__inner > :is(a, .mr-breadcrumb__sep) {
  flex: none;
}

.mr-news-article-page .mr-inner {
  max-width: 900px;
}

.mr-news-article-page .mr-news-page__title {
  margin-bottom: 40px;
}

.mr-news-article {
  color: var(--mr-ink);
}

.mr-news-article__date {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.mr-news-article__visual {
  position: relative;
  margin-top: 14px;
  overflow: hidden;
  aspect-ratio: 13 / 10;
  background: var(--mr-red) url("https://sfgbeauty.itembox.cloud/item/meirune/img/logo.svg") center / 52% auto no-repeat;
}

.mr-news-article__visual img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mr-news-article__title {
  margin: 20px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.mr-news-article__body {
  margin-top: 18px;
  color: #666;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.mr-news-article__body p {
  margin: 0;
}

.mr-news-article__body p + p {
  margin-top: 1.6em;
}

.mr-news-article__body img {
  max-width: 100%;
  height: auto;
}

.mr-news-article__body a {
  color: var(--mr-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mr-news-article__back {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* The label centred on the pill, the arrow against its left edge. */
.mr-news-article__back-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 0 44px;
  border-radius: 999px;
  background: var(--mr-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: opacity var(--mr-ease);
}

.mr-news-article__back-link:hover {
  color: #fff;
  opacity: 0.85;
}

.mr-news-article__back-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  width: 18px;
  height: 15px;
  background: url("https://sfgbeauty.itembox.cloud/item/meirune/img/icons/back-arrow.svg") center / contain no-repeat;
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .mr-news-page {
    padding: 44px 0;
  }

  .mr-news-page__title {
    margin-bottom: 28px;
  }

  .mr-news-page .mr-news__item {
    grid-template-columns: 140px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 22px;
  }

  .mr-news-page .mr-news__item::before,
  .mr-news-page .mr-news__image {
    grid-row: 1 / span 2;
  }

  .mr-news-page .mr-news__date {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .mr-news-page .mr-news__title {
    grid-column: 2;
    grid-row: 2;
  }

  .mr-pager {
    gap: 12px;
    margin-top: 40px;
  }

  .mr-pager__page {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .mr-pager__arrow {
    width: 28px;
    height: 40px;
  }

  .mr-news-article-page .mr-news-page__title {
    margin-bottom: 28px;
  }

  .mr-news-article__date {
    font-size: 13px;
  }

  .mr-news-article__visual {
    margin-top: 20px;
  }

  .mr-news-article__title {
    margin-top: 28px;
    font-size: 16px;
  }

  .mr-news-article__body {
    margin-top: 24px;
    font-size: 13px;
  }

  .mr-news-article__back {
    margin-top: 30px;
  }

  .mr-news-article__back-link {
    width: 200px;
    font-size: 13px;
  }
}

@media (min-width: 1280px) {
  .mr-news-page {
    padding: 58px 0;
  }

  .mr-news-page__title {
    margin-bottom: 34px;
  }

  .mr-news-page .mr-news__item {
    grid-template-columns: 190px minmax(0, 1fr);
    column-gap: 30px;
  }

  .mr-news-page .mr-news__date {
    font-size: 13px;
  }

  .mr-news-page .mr-news__title {
    margin-top: 10px;
    font-size: 13px;
  }

  .mr-pager {
    gap: 14px;
    margin-top: 46px;
  }

  .mr-pager__page {
    width: 48px;
    height: 48px;
    font-size: 17px;
  }

  .mr-pager__arrow {
    --mr-chevron: 11px;
    width: 32px;
    height: 48px;
  }

  .mr-news-article-page .mr-news-page__title {
    margin-bottom: 34px;
  }

  .mr-news-article__date {
    font-size: 14px;
  }

  .mr-news-article__visual {
    margin-top: 26px;
  }

  .mr-news-article__title {
    margin-top: 34px;
    font-size: 18px;
  }

  .mr-news-article__body {
    margin-top: 28px;
    font-size: 14px;
  }

  .mr-news-article__back {
    margin-top: 40px;
  }

  .mr-news-article__back-link {
    width: 300px;
    height: 48px;
    font-size: 14px;
  }

  .mr-news-article__back-link::before {
    left: 18px;
  }
}

@media (min-width: 1600px) {
  .mr-news-page {
    padding: 70px 0;
  }

  .mr-news-page__title {
    margin-bottom: 100px;
  }

  .mr-news-page .mr-news__item {
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 50px;
    padding: 20px;
  }

  .mr-news-page .mr-news__date {
    font-size: 20px;
  }

  .mr-news-page .mr-news__title {
    margin-top: 20px;
    font-size: 20px;
  }

  .mr-pager {
    gap: 16px;
    margin-top: 56px;
  }

  .mr-pager__page {
    width: 58px;
    height: 58px;
    font-size: 20px;
  }

  .mr-pager__gap {
    font-size: 20px;
  }

  .mr-pager__arrow {
    --mr-chevron: 13px;
    width: 38px;
    height: 58px;
  }

  .mr-news-article-page .mr-news-page__title {
    margin-bottom: 42px;
  }

  .mr-news-article__date {
    font-size: 20px;
  }

  .mr-news-article__visual {
    margin-top: 30px;
  }

  .mr-news-article__title {
    margin-top: 40px;
    font-size: 20px;
  }

  .mr-news-article__body {
    margin-top: 32px;
    font-size: 16px;
  }

  .mr-news-article__back {
    margin-top: 50px;
  }

  .mr-news-article__back-link {
    width: 360px;
    height: 60px;
    font-size: 20px;
  }

  .mr-news-article__back-link::before {
    left: 20px;
  }
}