/* MangaSocial - Identidade visual por página v6 */

:root {
  --ms-decor-border: rgba(167, 139, 250, .18);
  --ms-decor-glow: rgba(139, 92, 246, .18);
}

body[data-page-id] {
  position: relative;
}

/* =========================
   MENU PADRONIZADO
========================= */

header nav a,
.main-nav a,
.social-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  border-radius: 14px;

  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

header nav a:hover,
.main-nav a:hover,
.social-nav a:hover,
header nav a:focus-visible,
.main-nav a:focus-visible,
.social-nav a:focus-visible {
  transform: translateY(-1px);
}

.ms-inline-nav-icon {
  width: 18px;
  height: 18px;

  object-fit: contain;

  flex: 0 0 18px;

  filter:
    drop-shadow(
      0 0 5px
      rgba(139, 92, 246, .3)
    );
}

.ms-current-page,
.main-nav a.active,
.main-nav a[aria-current="page"] {
  background: rgba(139, 92, 246, .14) !important;

  border-color:
    rgba(167, 139, 250, .3) !important;

  box-shadow:
    0 10px 25px
    rgba(76, 29, 149, .14);
}

/* =========================
   DIVISORES
========================= */

.ms-page-divider-wrap {
  display: flex;
  justify-content: center;

  margin:
    10px 0
    22px;
}

.ms-page-divider {
  width: min(100%, 520px);
  max-height: 48px;

  object-fit: contain;

  opacity: .9;

  filter:
    drop-shadow(
      0 8px 20px
      rgba(76, 29, 149, .18)
    );
}

/* =========================
   ESTRELAS NOS TÍTULOS
========================= */

.ms-title-row {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  flex-wrap: wrap;
}

.ms-title-sparkle {
  width: 18px;
  height: 18px;

  object-fit: contain;

  opacity: .95;

  filter:
    drop-shadow(
      0 0 8px
      rgba(167, 139, 250, .45)
    );
}

/* =========================
   FUNDO DECORATIVO
========================= */

.ms-page-backdrop {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background-repeat: repeat;
  background-size: 480px auto;

  opacity: .13;

  z-index: 0;
}

main {
  position: relative;

  z-index: 1;
}

/* =========================
   RECOMENDAÇÕES
========================= */

body[data-page-id="recomendacoes"] .social-hero,
body[data-page-id="recomendacoes"] .ms-social-banner,
body[data-page-id="recommendations"] .social-hero,
body[data-page-id="recommendations"] .ms-social-banner {

  background:
    linear-gradient(
      135deg,
      rgba(9,8,19,.85),
      rgba(29,22,53,.64)
    ),
    url('/images/brand/decor/fundo.webp')
    center / cover
    no-repeat;

  border:
    1px solid
    var(--ms-decor-border);

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.18);
}

/* =========================
   COMUNIDADE / MENSAGENS
========================= */

body[data-page-id="feed"] .social-hero,
body[data-page-id="feed"] .ms-social-banner,
body[data-page-id="mensagens"] .social-hero,
body[data-page-id="messages"] .social-hero {

  background:
    linear-gradient(
      135deg,
      rgba(10,9,20,.88),
      rgba(28,23,46,.66)
    ),
    url('/images/brand/decor/fundo4.webp')
    center / cover
    no-repeat;

  border:
    1px solid
    var(--ms-decor-border);

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.18);
}

/* =========================
   HISTÓRICO
========================= */

body[data-page-id="historico"] .social-hero,
body[data-page-id="history"] .social-hero {

  background:
    linear-gradient(
      135deg,
      rgba(10,9,20,.88),
      rgba(28,23,46,.66)
    ),
    url('/images/brand/decor/fundo5.webp')
    center / cover
    no-repeat;

  border:
    1px solid
    var(--ms-decor-border);

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.18);
}

/* =========================
   NOITE.WEBP
========================= */

.ms-page-spotlight {
  display: block;

  width: min(100%, 360px);

  margin:
    18px auto
    0;

  border-radius: 24px;

  border:
    1px solid
    rgba(255,255,255,.08);

  box-shadow:
    0 16px 38px
    rgba(0,0,0,.22);
}

/* =========================
   AUTOR
========================= */

body[data-page-id="autor"] #authorProfile,
body[data-page-id="author"] #authorProfile {

  position: relative;
  overflow: hidden;
}

body[data-page-id="autor"] #authorProfile::before,
body[data-page-id="author"] #authorProfile::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    url('/images/brand/decor/molduras2.webp')
    center / cover
    no-repeat;

  opacity: .15;

  pointer-events: none;
}

/* =========================
   REVIEWS
========================= */

body[data-page-id="reviews"]
#reviewCompose,
body[data-page-id="reviews"]
#reviewComments {

  position: relative;

  overflow: hidden;
}

body[data-page-id="reviews"]
#reviewCompose::before,
body[data-page-id="reviews"]
#reviewComments::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    url('/images/brand/decor/divisores3.webp')
    center / cover
    no-repeat;

  opacity: .08;

  pointer-events: none;
}

/* =========================
   RANKING
========================= */

body[data-page-id="ranking"]
.social-hero {

  position: relative;

  overflow: hidden;
}

body[data-page-id="ranking"]
.social-hero::after {

  content: "";

  position: absolute;

  inset: 0;

  background:
    url('/images/brand/decor/molduras4.webp')
    center / cover
    no-repeat;

  opacity: .11;

  pointer-events: none;
}

/* =========================
   GUIAS INICIAIS
========================= */

.ms-guides {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 18px;

  margin:
    28px 0
    12px;
}

.ms-guide-card {

  display: grid;

  grid-template-columns:
    auto 1fr;

  align-items: center;

  gap: 14px;

  padding: 18px;

  border-radius: 24px;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      rgba(25,20,40,.92),
      rgba(16,14,28,.92)
    );

  box-shadow:
    0 18px 40px
    rgba(0,0,0,.18);

  text-decoration: none;

  color: inherit;

  transition:
    transform .2s ease,
    border-color .2s ease;
}

.ms-guide-card:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(167,139,250,.28);
}

.ms-guide-card img {

  width: 58px;
  height: 58px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 8px 20px
      rgba(139,92,246,.22)
    );
}

.ms-guide-card strong {

  display: block;

  margin-bottom: 4px;
}

.ms-guide-card span {

  font-size: 14px;

  line-height: 1.45;
}

/* =========================
   RESPONSIVO
========================= */

@media (max-width: 920px) {

  .ms-guides {

    grid-template-columns:
      1fr;
  }

  .ms-page-divider {

    max-height: 38px;
  }
}

@media (max-width: 640px) {

  .ms-inline-nav-icon {

    width: 17px;
    height: 17px;

    flex-basis: 17px;
  }

  .ms-guide-card {

    grid-template-columns:
      48px 1fr;

    padding: 16px;
  }

  .ms-guide-card img {

    width: 48px;
    height: 48px;
  }
}
/* =========================================
   CORREÇÕES MOBILE - MANGASOCIAL
========================================= */

@media (max-width: 768px) {

    /* evita estouro horizontal */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    main {
        width: 100%;
        max-width: 100%;
    }

    /* =========================
       MENU
    ========================= */

    .social-header,
    .header,
    .main-header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .social-nav,
    .main-nav,
    header nav {
        width: 100%;

        display: flex;
        flex-wrap: wrap;

        justify-content: center;

        gap: 8px 12px;

        padding: 12px 6px;
    }

    .social-nav a,
    .main-nav a,
    header nav a {
        font-size: 14px;

        padding: 7px 10px;

        line-height: 1.2;

        white-space: nowrap;
    }

    .ms-inline-nav-icon,
    .ms-nav-icon {
        width: 17px;
        height: 17px;

        flex-basis: 17px;
    }

    /* =========================
       FUNDO
    ========================= */

    .ms-page-backdrop {
        opacity: .055;

        background-size:
            300px auto;
    }

    /* =========================
       BANNER SUPERIOR
    ========================= */

    .ms-social-banner {
        margin:
            14px 12px
            22px;

        border-radius: 22px;

        overflow: hidden;
    }

    .ms-social-banner img {
        display: block;

        width: 100%;
        height: auto;

        max-height: 190px;

        object-fit: cover;

        object-position: center;
    }

    /* =========================
       HERO
    ========================= */

    .social-hero,
    .intro {
        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 18px !important;

        width: auto !important;

        margin:
            0 12px
            22px !important;

        padding:
            22px 18px !important;

        min-height: 0 !important;

        overflow: hidden;
    }

    /* remove layouts desktop */
    .social-hero > * {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;
    }

    /* =========================
       TEXTO DO HERO
    ========================= */

    .social-eyebrow,
    .eyebrow {
        display: block;

        font-size: 11px !important;

        line-height: 1.5 !important;

        letter-spacing: .16em !important;

        margin-bottom: 10px !important;

        max-width: 100%;
    }

    .social-hero h1,
    .intro h1,
    main h1 {
        width: 100% !important;

        max-width: 100% !important;

        font-size:
            clamp(
                30px,
                9vw,
                42px
            ) !important;

        line-height: 1.05 !important;

        letter-spacing: -.035em !important;

        margin:
            0 0
            12px !important;

        overflow-wrap: normal;

        word-break: normal;
    }

    .social-hero p,
    .intro p {
        width: 100% !important;

        max-width: 100% !important;

        font-size: 16px !important;

        line-height: 1.65 !important;

        margin: 0 !important;

        word-break: normal !important;

        overflow-wrap: normal !important;
    }

    /* =========================
       ESTRELAS NOS TÍTULOS
    ========================= */

    .ms-title-row {
        display: flex;

        align-items: center;

        gap: 7px;

        width: 100%;
    }

    .ms-title-sparkle {
        width: 13px;
        height: 13px;

        flex-shrink: 0;
    }

    /* =========================
       DIVISORES
    ========================= */

    .ms-page-divider-wrap {
        margin:
            8px 0
            15px;
    }

    .ms-page-divider {
        width: 72%;

        max-height: 26px;

        opacity: .65;
    }

    /* =========================
       IMAGEM NOITE.WEBP
    ========================= */

    .ms-page-spotlight {
        display: block;

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        max-height: 220px;

        margin:
            16px 0
            0 !important;

        border-radius: 20px;

        object-fit: cover;

        object-position: center;
    }

    /* =========================
       MASCOTES / SOCIAL ART
    ========================= */

    .social-art {
        display: block;

        width: min(
            150px,
            45vw
        ) !important;

        height: auto !important;

        margin:
            8px auto
            0 !important;

        object-fit: contain;
    }

    /* =========================
       PAINÉIS
    ========================= */

    .social-panel {
        width: auto !important;

        margin-left: 12px !important;
        margin-right: 12px !important;

        padding:
            18px !important;

        border-radius: 20px !important;
    }

    /* =========================
       CARDS GUIA
    ========================= */

    .ms-guides {
        display: grid;

        grid-template-columns:
            1fr !important;

        gap: 12px;

        margin:
            20px 12px;
    }

    .ms-guide-card {
        grid-template-columns:
            44px 1fr;

        gap: 12px;

        padding: 14px;

        border-radius: 18px;
    }

    .ms-guide-card img {
        width: 44px;
        height: 44px;
    }

    /* =========================
       MOLDURAS
    ========================= */

    body[data-page-id="ranking"]
    .social-hero::after {

        opacity: .06 !important;
    }

    /* =========================
       ESPAÇAMENTO
    ========================= */

    main > section,
    main > div {
        max-width: 100%;
    }

}

/* CELULARES PEQUENOS */

@media (max-width: 430px) {

    .social-nav a,
    .main-nav a,
    header nav a {
        font-size: 13px;

        padding:
            6px 8px;
    }

    .social-hero,
    .intro {
        margin-left: 10px !important;
        margin-right: 10px !important;

        padding:
            20px 16px !important;
    }

    .social-hero h1,
    .intro h1,
    main h1 {
        font-size:
            clamp(
                28px,
                9vw,
                36px
            ) !important;
    }

    .social-hero p,
    .intro p {
        font-size:
            15px !important;
    }

    .ms-social-banner {
        margin-left: 10px;
        margin-right: 10px;
    }

    .ms-social-banner img {
        max-height:
            165px;
    }

    .ms-page-spotlight {
        max-height:
            190px;
    }

}
@media (max-width: 768px) {

    /* Card principal da comunidade */
    .social-hero,
    .intro {
        text-align: center;
    }

    /* linha pequena de cima */
    .social-eyebrow,
    .eyebrow {
        text-align: center !important;
        justify-content: center;
    }

    /* título */
    .social-hero h1,
    .intro h1,
    main h1 {
        text-align: center !important;
        justify-content: center;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* estrelas ao redor do título */
    .ms-title-row {
        width: 100%;
        justify-content: center !important;
        text-align: center;
    }

    /* texto abaixo do título */
    .social-hero p,
    .intro p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* mascote */
    .social-art {
        display: block !important;
        margin: 18px auto 10px !important;
    }

    /* imagem da cidade */
    .ms-page-spotlight {
        display: block;
        margin: 18px auto 0 !important;
    }
}