/* =========================================================
   BLOG V2 (aïllat) - només s'aplica amb body.ms-blog-v2
   ========================================================= */

/* Fonts Inter (només V2) */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Tipografia base */
body.ms-blog-v2 .post-single,
body.ms-blog-v2 .post-single .post-content,
body.ms-blog-v2 .post-single .post-content p,
body.ms-blog-v2 .post-single .post-content li {
  font-family: 'Inter', sans-serif !important;
}

/* Amplia wrappers globals només dins single post V2 (com feies inline) */
body.ms-blog-v2.single-post #primary,
body.ms-blog-v2.single-post .content-area,
body.ms-blog-v2.single-post #primary .site-main,
body.ms-blog-v2.single-post .content-area .site-main{
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* Layout general post */
body.ms-blog-v2 .post-single {
  max-width: 1200px;
  width: 95%;
  margin: 0 auto 80px;
  padding: 32px 16px;
}

body.ms-blog-v2 .post-single .post-content,
body.ms-blog-v2 .post-single article.post-article {
  max-width: 1440px;
  width: 100%;
}

body.ms-blog-v2 .post-single .post-article {
  padding: 0 24px 40px;
}

/* Títol i meta */
body.ms-blog-v2 .post-single .post-title {
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
  color: #ffffff;
  text-transform: none !important;
  letter-spacing: 0;
}

body.ms-blog-v2 .post-single .post-subtitle {
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  color: #d0d0d0;
  margin-bottom: 6px;
}

body.ms-blog-v2 .post-single .post-date {
  display: block;
  text-align: center;
  font-size: 14px;
  color: #aaaaaa;
  margin-bottom: 26px;
}

/* Imatge capçalera */
body.ms-blog-v2 .post-single .post-thumb img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 32px;
}

/* Text */
body.ms-blog-v2 .post-single .post-content {
  color: #ffffff;
}

body.ms-blog-v2 .post-single .post-content p {
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 20px;
  font-weight: 400;
}

/* Headings dins contingut */
body.ms-blog-v2 .post-single .post-content h2,
body.ms-blog-v2 .post-single .post-content h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 48px;
  margin-bottom: 24px;
  padding-bottom: 6px;
  display: inline-block;
  position: relative;
}

body.ms-blog-v2 .post-single .post-content h2::after,
body.ms-blog-v2 .post-single .post-content h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #ffffff;
}

/* Enllaços */
body.ms-blog-v2 .post-single .post-content a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
body.ms-blog-v2 .post-single .post-content a:hover {
  opacity: 0.8;
}

/* STRONG: no cridar massa (com feies) */
body.ms-blog-v2 .post-single .post-content strong,
body.ms-blog-v2 .post-single .post-content b {
  font-weight: 400;
}
body.ms-blog-v2 .post-single .post-content h2 strong,
body.ms-blog-v2 .post-single .post-content h3 strong {
  font-weight: 700 !important;
}

/* =========================================================
   SISTEMA D'IMATGES (classes simples per maquetar)
   ========================================================= */

/* Base */
body.ms-blog-v2 .post-single .post-content img,
body.ms-blog-v2 .post-single .post-content .ms-media {
  display: block;
  height: auto;
  max-width: 100%;
}

/* Si poses una imatge normal sense class, no la toquem agressiu */
body.ms-blog-v2 .post-single .post-content img {
  margin: 36px auto;
  width: 100%;
}

/* Base per media “controlada” */
body.ms-blog-v2 .post-single .post-content .ms-media {
  margin: 18px 0 22px;
  width: 100%;
}

/* Float dreta/esquerra */
body.ms-blog-v2 .post-single .post-content .ms-left,
body.ms-blog-v2 .post-single .post-content .ms-right {
  width: min(42%, 420px);
}

body.ms-blog-v2 .post-single .post-content .ms-right {
  float: right;
  margin-left: 32px;
}

body.ms-blog-v2 .post-single .post-content .ms-left {
  float: left;
  margin-right: 32px;
}

/* Mides */
body.ms-blog-v2 .post-single .post-content .ms-small  { width: min(34%, 340px); }
body.ms-blog-v2 .post-single .post-content .ms-medium { width: min(42%, 420px); }
body.ms-blog-v2 .post-single .post-content .ms-large  { width: min(50%, 520px); }

/* Centrat / amplades */
body.ms-blog-v2 .post-single .post-content .ms-center {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.ms-blog-v2 .post-single .post-content .ms-wide {
  width: min(80%, 900px);
}

body.ms-blog-v2 .post-single .post-content .ms-full {
  width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Offsets verticals (microajustos) - robustos (mouen de veritat) */
body.ms-blog-v2 .ms-up-1,
body.ms-blog-v2 .ms-up-2,
body.ms-blog-v2 .ms-down-1,
body.ms-blog-v2 .ms-down-2{
  position: relative !important;
}

body.ms-blog-v2 .ms-up-1   { top: -6px !important; }
body.ms-blog-v2 .ms-up-2   { top: -12px !important; }
body.ms-blog-v2 .ms-down-1 { top: 6px !important; }
body.ms-blog-v2 .ms-down-2 { top: 12px !important; }


/* Clear */
body.ms-blog-v2 .post-single .post-content .ms-clear {
  clear: both;
  height: 0;
  margin: 0;
  padding: 0;
}

/* =========================================================
   MÒBIL: adéu floats, layout net
   ========================================================= */
@media (max-width: 720px) {

  body.ms-blog-v2 .post-single {
    padding-top: 96px;
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 56px;
  }

  body.ms-blog-v2 .post-single .post-title {
    font-size: 18px;
    line-height: 1.3;
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
  }

  body.ms-blog-v2 .post-single .post-subtitle {
    font-size: 16px;
  }

  body.ms-blog-v2 .post-single .post-content p {
    font-size: 16px;
    line-height: 1.7;
  }

  body.ms-blog-v2 .post-single .post-content h2,
  body.ms-blog-v2 .post-single .post-content h3 {
    font-size: 20px;
    margin-top: 36px;
    margin-bottom: 16px;
    padding-bottom: 0;
  }

  /* al mòbil, sense línia sota els títols */
  body.ms-blog-v2 .post-single .post-content h2::after,
  body.ms-blog-v2 .post-single .post-content h3::after {
    content: none;
  }

  /* Floats off */
  body.ms-blog-v2 .post-single .post-content .ms-left,
  body.ms-blog-v2 .post-single .post-content .ms-right,
  body.ms-blog-v2 .post-single .post-content .ms-small,
  body.ms-blog-v2 .post-single .post-content .ms-medium,
  body.ms-blog-v2 .post-single .post-content .ms-large,
  body.ms-blog-v2 .post-single .post-content .ms-wide {
    float: none !important;
    width: 100% !important;
    margin: 22px 0 !important;
  }

/* offsets al mòbil: mantenim els teus valors (no els aixafem a 22px) */
body.ms-blog-v2 .post-single .post-content .ms-up-1   { margin-top: -6px !important; }
body.ms-blog-v2 .post-single .post-content .ms-up-2   { margin-top: -12px !important; }
body.ms-blog-v2 .post-single .post-content .ms-down-1 { margin-top: 6px !important; }
body.ms-blog-v2 .post-single .post-content .ms-down-2 { margin-top: 12px !important; }


  /* la X del teu tema */
  body.ms-blog-v2.single-post .mfp-close,
  body.ms-blog-v2.single-post .close-btn,
  body.ms-blog-v2.single-post .js-close {
    top: 16px !important;
    right: 16px !important;
  }
}


/* =========================================================
   MS SPLIT (anti-drames): imatge a un costat, text a l'altre
   Només V2. No depèn de floats. No depèn de clears.
   ========================================================= */

body.ms-blog-v2 .post-single .post-content .ms-split{
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin: 26px 0 34px;
}

body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-media{
  flex: 0 0 min(42%, 420px);
}

body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-media img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 !important;
  border-radius: 14px;
}

body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-text{
  flex: 1 1 auto;
  min-width: 0;
}

/* Mòbil: una sota l’altra */
@media (max-width: 720px){
  body.ms-blog-v2 .post-single .post-content .ms-split{
    display: block;
    margin: 22px 0;
  }
  body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-media{
    max-width: 100%;
    margin: 0 0 18px;
  }
}

/* =========================================================
   MS SPLIT - NUDGES (pujar/baixar sense drames)
   Funciona amb .ms-split, no depèn de margins de la img
   ========================================================= */

/* Per defecte, deixem que es pugui "moure" amb transform */
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-media,
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-text{
  transform: translateY(0);
}

/* NUDGES PER LA IMATGE (aplica-ho a .ms-split-media) */
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-media.ms-up-1   { transform: translateY(-6px); }
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-media.ms-up-2   { transform: translateY(-12px); }
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-media.ms-up-3   { transform: translateY(-18px); }
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-media.ms-down-1 { transform: translateY(6px); }
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-media.ms-down-2 { transform: translateY(12px); }
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-media.ms-down-3 { transform: translateY(18px); }

/* NUDGES PEL TEXT (aplica-ho a .ms-split-text) */
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-text.ms-up-1   { transform: translateY(-6px); }
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-text.ms-up-2   { transform: translateY(-12px); }
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-text.ms-up-3   { transform: translateY(-18px); }
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-text.ms-down-1 { transform: translateY(6px); }
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-text.ms-down-2 { transform: translateY(12px); }
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-text.ms-down-3 { transform: translateY(18px); }

/* Mòbil: anul·lem nudges (perquè no faci “microdrames”) */
@media (max-width: 720px){
  body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-media,
  body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-text{
    transform: none !important;
  }
}

/* =========================================================
   MS SPLIT - valor manual en px
   Usa CSS variables: --ms-y
   ========================================================= */
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-media,
body.ms-blog-v2 .post-single .post-content .ms-split .ms-split-text{
  transform: translateY(var(--ms-y, 0px));
}

/* Ajust fi: text que ve just després d’un ms-split */
body.ms-blog-v2 .post-single .post-content .ms-split + p {
  margin-top: 0 !important;
  
}

/* Gutenberg buttons: no underline, mai */
.wp-block-button__link {
  text-decoration: none !important;
}