/*
 * BESTWOO Mobile Batch 15
 * Resource detail page mobile refinement
 * Scope: viewport <= 820px only
 */

@media (max-width: 820px) {
  body .BESTWOO-resource-detail-page,
  body .BESTWOO-resource-detail,
  body [class*="BESTWOO-resource-detail"] {
    box-sizing: border-box;
  }

  body .BESTWOO-resource-detail-page,
  body .BESTWOO-resource-detail {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body .BESTWOO-resource-detail-page *,
  body .BESTWOO-resource-detail *,
  body [class*="BESTWOO-resource-detail"] * {
    box-sizing: border-box;
  }

  body .BESTWOO-resource-detail-page img,
  body .BESTWOO-resource-detail img,
  body [class*="BESTWOO-resource-detail"] img,
  body .BESTWOO-resource-content img,
  body .BESTWOO-resource-article img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  body .BESTWOO-resource-detail-page video,
  body .BESTWOO-resource-detail video,
  body .BESTWOO-resource-content iframe,
  body .BESTWOO-resource-article iframe {
    max-width: 100%;
  }

  body .BESTWOO-resource-detail-page .BESTWOO-container,
  body .BESTWOO-resource-detail .BESTWOO-container,
  body .BESTWOO-resource-detail-container {
    width: min(100%, 820px);
    max-width: 100%;
    padding-inline: clamp(16px, 4.8vw, 32px);
  }

  body .BESTWOO-resource-back {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 40px;
    margin-bottom: 16px;
    white-space: normal;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-detail-hero,
  body .BESTWOO-resource-hero-detail,
  body .BESTWOO-resource-article-hero {
    padding-block: clamp(28px, 7vw, 58px);
  }

  body .BESTWOO-resource-detail-hero-grid,
  body .BESTWOO-resource-detail-grid,
  body .BESTWOO-resource-hero-detail-grid,
  body .BESTWOO-resource-article-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 5vw, 36px);
    align-items: start;
  }

  body .BESTWOO-resource-detail-copy,
  body .BESTWOO-resource-detail-main,
  body .BESTWOO-resource-article-main,
  body .BESTWOO-resource-detail-content {
    min-width: 0;
    max-width: 100%;
  }

  body .BESTWOO-resource-detail-cover,
  body .BESTWOO-resource-detail-media,
  body .BESTWOO-resource-article-cover,
  body .BESTWOO-resource-cover {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: clamp(18px, 5vw, 28px);
  }

  body .BESTWOO-resource-detail-cover img,
  body .BESTWOO-resource-detail-media img,
  body .BESTWOO-resource-article-cover img,
  body .BESTWOO-resource-cover img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  body .BESTWOO-resource-kicker {
    display: inline-flex;
    max-width: 100%;
    margin-bottom: 10px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-detail-page h1,
  body .BESTWOO-resource-detail h1,
  body .BESTWOO-resource-article h1,
  body .BESTWOO-resource-detail-title {
    max-width: 22ch;
    margin-block: 0 14px;
    font-size: clamp(29px, 7.8vw, 50px);
    line-height: 1.1;
    letter-spacing: -0.035em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-detail-summary,
  body .BESTWOO-resource-article-summary,
  body .BESTWOO-resource-detail-lead {
    max-width: 65ch;
    margin-block: 0;
    font-size: clamp(15px, 3.8vw, 18px);
    line-height: 1.75;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-meta,
  body .BESTWOO-resource-detail-meta,
  body .BESTWOO-resource-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 18px;
  }

  body .BESTWOO-resource-meta > *,
  body .BESTWOO-resource-detail-meta > *,
  body .BESTWOO-resource-article-meta > * {
    min-width: 0;
    max-width: 100%;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-detail-actions,
  body .BESTWOO-resource-article-actions,
  body .BESTWOO-resource-download-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 22px;
  }

  body .BESTWOO-resource-detail-actions > *,
  body .BESTWOO-resource-article-actions > *,
  body .BESTWOO-resource-download-actions > * {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-detail-layout,
  body .BESTWOO-resource-article-layout,
  body .BESTWOO-resource-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 6vw, 40px);
    align-items: start;
    padding-block: clamp(36px, 8vw, 68px);
  }

  body .BESTWOO-resource-detail-sidebar,
  body .BESTWOO-resource-article-sidebar,
  body .BESTWOO-resource-content-sidebar {
    min-width: 0;
    width: 100%;
    position: static;
    inset: auto;
    order: 2;
  }

  body .BESTWOO-resource-detail-main,
  body .BESTWOO-resource-article-main,
  body .BESTWOO-resource-content-main {
    min-width: 0;
    width: 100%;
    order: 1;
  }

  body .BESTWOO-resource-content,
  body .BESTWOO-resource-article,
  body .BESTWOO-resource-content-body,
  body .BESTWOO-resource-article-body {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(15px, 3.8vw, 17px);
    line-height: 1.82;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-content > :first-child,
  body .BESTWOO-resource-article > :first-child,
  body .BESTWOO-resource-content-body > :first-child,
  body .BESTWOO-resource-article-body > :first-child {
    margin-top: 0;
  }

  body .BESTWOO-resource-content h2,
  body .BESTWOO-resource-article h2,
  body .BESTWOO-resource-content-body h2,
  body .BESTWOO-resource-article-body h2 {
    margin-block: clamp(30px, 7vw, 48px) 14px;
    font-size: clamp(23px, 6vw, 34px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-content h3,
  body .BESTWOO-resource-article h3,
  body .BESTWOO-resource-content-body h3,
  body .BESTWOO-resource-article-body h3 {
    margin-block: 26px 10px;
    font-size: clamp(19px, 4.9vw, 25px);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-content p,
  body .BESTWOO-resource-article p,
  body .BESTWOO-resource-content-body p,
  body .BESTWOO-resource-article-body p {
    margin-block: 0 16px;
    line-height: 1.82;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-content ul,
  body .BESTWOO-resource-content ol,
  body .BESTWOO-resource-article ul,
  body .BESTWOO-resource-article ol,
  body .BESTWOO-resource-content-body ul,
  body .BESTWOO-resource-content-body ol {
    margin-block: 16px 22px;
    padding-left: 1.3em;
  }

  body .BESTWOO-resource-content li,
  body .BESTWOO-resource-article li,
  body .BESTWOO-resource-content-body li,
  body .BESTWOO-resource-article-body li {
    margin-top: 8px;
    padding-left: 2px;
    line-height: 1.72;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-content blockquote,
  body .BESTWOO-resource-article blockquote,
  body .BESTWOO-resource-content-body blockquote,
  body .BESTWOO-resource-article-body blockquote {
    margin: 22px 0;
    padding: 18px 18px 18px 20px;
    border-radius: 14px;
  }

  body .BESTWOO-resource-content pre,
  body .BESTWOO-resource-article pre,
  body .BESTWOO-resource-content-body pre,
  body .BESTWOO-resource-article-body pre {
    max-width: 100%;
    overflow-x: auto;
    padding: 16px;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
  }

  body .BESTWOO-resource-content code,
  body .BESTWOO-resource-article code,
  body .BESTWOO-resource-content-body code,
  body .BESTWOO-resource-article-body code {
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-content table,
  body .BESTWOO-resource-article table,
  body .BESTWOO-resource-content-body table,
  body .BESTWOO-resource-article-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-block: 22px;
    overflow-x: auto;
    white-space: nowrap;
    border-collapse: collapse;
    -webkit-overflow-scrolling: touch;
  }

  body .BESTWOO-resource-content th,
  body .BESTWOO-resource-content td,
  body .BESTWOO-resource-article th,
  body .BESTWOO-resource-article td,
  body .BESTWOO-resource-content-body th,
  body .BESTWOO-resource-content-body td {
    min-width: 126px;
    padding: 12px;
    white-space: normal;
    vertical-align: top;
  }

  body .BESTWOO-resource-content a,
  body .BESTWOO-resource-article a,
  body .BESTWOO-resource-content-body a,
  body .BESTWOO-resource-article-body a {
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-purpose-grid,
  body .BESTWOO-resource-detail-info-grid,
  body .BESTWOO-resource-fit-grid,
  body .BESTWOO-resource-brief-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body .BESTWOO-resource-purpose-grid > *,
  body .BESTWOO-resource-detail-info-grid > *,
  body .BESTWOO-resource-fit-grid > *,
  body .BESTWOO-resource-brief-grid > * {
    min-width: 0;
    height: auto;
    padding: clamp(17px, 4.6vw, 24px);
    border-radius: clamp(15px, 4vw, 22px);
  }

  body .BESTWOO-resource-purpose-grid h3,
  body .BESTWOO-resource-detail-info-grid h3,
  body .BESTWOO-resource-fit-grid h3,
  body .BESTWOO-resource-brief-grid h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: clamp(18px, 4.8vw, 23px);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-purpose-grid p,
  body .BESTWOO-resource-detail-info-grid p,
  body .BESTWOO-resource-fit-grid p,
  body .BESTWOO-resource-brief-grid p {
    margin: 0;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-next,
  body .BESTWOO-resource-detail-next,
  body .BESTWOO-resource-next-step {
    padding-block: clamp(38px, 8vw, 66px);
  }

  body .BESTWOO-resource-next-card,
  body .BESTWOO-resource-detail-next-card,
  body .BESTWOO-resource-next-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: clamp(21px, 5.5vw, 34px);
    border-radius: clamp(18px, 5vw, 28px);
  }

  body .BESTWOO-resource-next-card h2,
  body .BESTWOO-resource-detail-next-card h2,
  body .BESTWOO-resource-next-box h2,
  body .BESTWOO-resource-next-card h3,
  body .BESTWOO-resource-detail-next-card h3,
  body .BESTWOO-resource-next-box h3 {
    margin: 0;
    font-size: clamp(23px, 6vw, 34px);
    line-height: 1.2;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-next-actions,
  body .BESTWOO-resource-detail-next-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body .BESTWOO-resource-next-actions > *,
  body .BESTWOO-resource-detail-next-actions > * {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-related,
  body .BESTWOO-resource-related-section,
  body .BESTWOO-resource-detail-related {
    padding-block: clamp(38px, 8vw, 66px);
  }

  body .BESTWOO-resource-related-grid,
  body .BESTWOO-resource-detail-related-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body .BESTWOO-resource-related-card,
  body .BESTWOO-resource-detail-related-card {
    min-width: 0;
    height: auto;
    overflow: hidden;
    border-radius: clamp(16px, 4vw, 24px);
  }

  body .BESTWOO-resource-related-card img,
  body .BESTWOO-resource-detail-related-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  body .BESTWOO-resource-related-card h3,
  body .BESTWOO-resource-detail-related-card h3 {
    overflow-wrap: anywhere;
  }

  body .BESTWOO-resource-detail-sidebar > *,
  body .BESTWOO-resource-article-sidebar > *,
  body .BESTWOO-resource-content-sidebar > * {
    min-width: 0;
    max-width: 100%;
    margin-bottom: 14px;
    padding: clamp(16px, 4.4vw, 23px);
    border-radius: clamp(15px, 4vw, 22px);
  }

  html:lang(en) body .BESTWOO-resource-detail-page h1,
  html:lang(en) body .BESTWOO-resource-detail h1,
  html:lang(en) body .BESTWOO-resource-article h1,
  html:lang(en) body .BESTWOO-resource-detail-title {
    max-width: 25ch;
    font-size: clamp(27px, 7.2vw, 46px);
  }

  html:lang(en) body .BESTWOO-resource-detail-page h1,
  html:lang(en) body .BESTWOO-resource-detail-page h2,
  html:lang(en) body .BESTWOO-resource-detail-page h3,
  html:lang(en) body .BESTWOO-resource-detail-page p,
  html:lang(en) body .BESTWOO-resource-detail-page li,
  html:lang(en) body .BESTWOO-resource-detail-page a,
  html:lang(en) body .BESTWOO-resource-detail h1,
  html:lang(en) body .BESTWOO-resource-detail h2,
  html:lang(en) body .BESTWOO-resource-detail h3,
  html:lang(en) body .BESTWOO-resource-detail p,
  html:lang(en) body .BESTWOO-resource-detail li,
  html:lang(en) body .BESTWOO-resource-detail a {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }
}

@media (min-width: 600px) and (max-width: 820px) {
  body .BESTWOO-resource-detail-hero-grid,
  body .BESTWOO-resource-detail-grid,
  body .BESTWOO-resource-hero-detail-grid,
  body .BESTWOO-resource-article-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
    gap: 28px;
    align-items: center;
  }

  body .BESTWOO-resource-detail-actions,
  body .BESTWOO-resource-article-actions,
  body .BESTWOO-resource-download-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .BESTWOO-resource-purpose-grid,
  body .BESTWOO-resource-detail-info-grid,
  body .BESTWOO-resource-fit-grid,
  body .BESTWOO-resource-brief-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .BESTWOO-resource-related-grid,
  body .BESTWOO-resource-detail-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .BESTWOO-resource-next-card,
  body .BESTWOO-resource-detail-next-card,
  body .BESTWOO-resource-next-box {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.62fr);
    align-items: center;
  }
}

@media (max-width: 599px) {
  body .BESTWOO-resource-detail-cover,
  body .BESTWOO-resource-detail-media,
  body .BESTWOO-resource-article-cover,
  body .BESTWOO-resource-cover {
    order: -1;
  }

  body .BESTWOO-resource-detail-layout,
  body .BESTWOO-resource-article-layout,
  body .BESTWOO-resource-content-layout {
    padding-block: 34px 46px;
  }

  body .BESTWOO-resource-detail-sidebar,
  body .BESTWOO-resource-article-sidebar,
  body .BESTWOO-resource-content-sidebar {
    order: 2;
  }

  body .BESTWOO-resource-content iframe,
  body .BESTWOO-resource-article iframe,
  body .BESTWOO-resource-content-body iframe,
  body .BESTWOO-resource-article-body iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

@media (max-width: 419px) {
  body .BESTWOO-resource-detail-page .BESTWOO-container,
  body .BESTWOO-resource-detail .BESTWOO-container,
  body .BESTWOO-resource-detail-container {
    padding-inline: 16px;
  }

  body .BESTWOO-resource-detail-page h1,
  body .BESTWOO-resource-detail h1,
  body .BESTWOO-resource-article h1,
  body .BESTWOO-resource-detail-title {
    font-size: clamp(27px, 8.8vw, 37px);
  }

  body .BESTWOO-resource-content blockquote,
  body .BESTWOO-resource-article blockquote,
  body .BESTWOO-resource-content-body blockquote,
  body .BESTWOO-resource-article-body blockquote {
    padding: 16px;
  }

  body .BESTWOO-resource-content th,
  body .BESTWOO-resource-content td,
  body .BESTWOO-resource-article th,
  body .BESTWOO-resource-article td,
  body .BESTWOO-resource-content-body th,
  body .BESTWOO-resource-content-body td {
    min-width: 116px;
    padding: 10px;
  }

  body .BESTWOO-resource-next-card,
  body .BESTWOO-resource-detail-next-card,
  body .BESTWOO-resource-next-box {
    padding: 19px 17px;
  }
}

@media (max-width: 360px) {
  body .BESTWOO-resource-detail-page .BESTWOO-container,
  body .BESTWOO-resource-detail .BESTWOO-container,
  body .BESTWOO-resource-detail-container {
    padding-inline: 14px;
  }

  body .BESTWOO-resource-detail-page h1,
  body .BESTWOO-resource-detail h1,
  body .BESTWOO-resource-article h1,
  body .BESTWOO-resource-detail-title {
    font-size: 27px;
  }

  body .BESTWOO-resource-content h2,
  body .BESTWOO-resource-article h2,
  body .BESTWOO-resource-content-body h2,
  body .BESTWOO-resource-article-body h2 {
    font-size: 23px;
  }

  html:lang(en) body .BESTWOO-resource-detail-page h1,
  html:lang(en) body .BESTWOO-resource-detail h1,
  html:lang(en) body .BESTWOO-resource-article h1,
  html:lang(en) body .BESTWOO-resource-detail-title {
    font-size: 26px;
  }
}