/**
 * Mercado Mayor — News / blog listing ("Noticias")
 * Loads on the posts page, archives and search results.
 *
 * Works with the theme's existing markup (.post-main-box > .datebox +
 * .section-title + .entry-content + .content-bttn), so posts stay editable and
 * no template part had to be rewritten.
 */

/* ========================================================================
   1. PAGE HEADER
   ======================================================================== */
.mm-blog .mm-blog-head {
  max-width: 760px;
  margin: 0 0 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--mm-border);
}

.mm-blog .mm-blog-head__kicker {
  margin: 0 0 8px;
  font-family: var(--mm-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mm-accent);
}

/* Restrained sizes — the headline was overpowering the listing at 100% zoom */
.mm-blog .mm-blog-head__title {
  margin: 0;
  font-family: var(--mm-font-display);
  font-size: clamp(1.625rem, 2.8vw, 2.125rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--mm-ink);
}

/* ========================================================================
   2. POST CARDS
   ======================================================================== */
.mm-blog article.inner-service {
  margin: 0 0 24px;
}

.mm-blog .post-main-box {
  position: relative;
  overflow: hidden;
  padding: 24px 26px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  transition: border-color 0.3s var(--mm-ease), box-shadow 0.3s var(--mm-ease),
    transform 0.3s var(--mm-ease);
}

/* Accent rail on the left edge, revealed on hover */
.mm-blog .post-main-box::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--mm-accent), #F87171);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.4s var(--mm-ease);
}

.mm-blog .post-main-box:hover {
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.10);
  transform: translateY(-3px);
}

.mm-blog .post-main-box:hover::before {
  transform: scaleY(1);
}

/* These posts carry no featured image, so the theme still prints an empty
   .box-image that reserved blank space at the top of every card. */
.mm-blog .post-main-box .box-image:empty {
  display: none;
}

.mm-blog .post-main-box .box-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 22px;
}

/* ========================================================================
   3. DATE BADGE — was two stacked red blocks; now one compact chip
   ======================================================================== */
.mm-blog .datebox {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  padding: 8px 0;
  background: var(--mm-surface-alt, #F9FAFB);
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  text-align: center;
  transition: background-color 0.3s var(--mm-ease),
    border-color 0.3s var(--mm-ease);
}

.mm-blog .post-main-box:hover .datebox {
  background: var(--mm-accent);
  border-color: var(--mm-accent);
}

.mm-blog .datebox .date-monthwrap,
.mm-blog .datebox .yearwrap {
  display: block;
  background: none;
  padding: 0;
  margin: 0;
}

.mm-blog .datebox .date-day {
  display: block;
  font-family: var(--mm-font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
}

.mm-blog .datebox .date-month {
  display: block;
  font-family: var(--mm-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

.mm-blog .datebox .date-year {
  display: block;
  font-family: var(--mm-font-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.72;
}

/* One rule for every link inside the chip — the theme wraps each part in
   its own anchor, which is why the parts used to look like separate buttons */
.mm-blog .datebox a {
  color: var(--mm-ink) !important;
  background: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.mm-blog .post-main-box:hover .datebox a {
  color: #fff !important;
}

/* ========================================================================
   4. TITLE, EXCERPT, LINK
   ======================================================================== */
.mm-blog .post-main-box .section-title {
  margin: 0 0 8px;
  font-family: var(--mm-font-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.mm-blog .post-main-box .section-title a {
  color: var(--mm-ink);
  text-decoration: none;
  transition: color 0.25s var(--mm-ease);
}

.mm-blog .post-main-box .section-title a:hover {
  color: var(--mm-accent);
}

.mm-blog .post-main-box .entry-content p {
  margin: 0;
  font-family: var(--mm-font-ui);
  font-size: 14px;
  line-height: 1.7;
  color: var(--mm-ink-muted);
}

.mm-blog .post-main-box .new-text {
  margin-bottom: 14px;
}

/* "Leer más" as an editorial link with a sliding arrow, rather than a
   heavy solid button competing with the title */
.mm-blog .post-main-box .content-bttn {
  margin: 0;
}

.mm-blog .post-main-box .content-bttn a.blogbutton-small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  font-family: var(--mm-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--mm-ink) !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none;
  transition: color 0.25s var(--mm-ease);
}

.mm-blog .post-main-box .content-bttn a.blogbutton-small::after {
  content: '\2192'; /* → */
  display: inline-block;
  font-size: 16px;
  transition: transform 0.25s var(--mm-ease);
}

/* b2b-marketplace.css lists .blogbutton-small among the global primary
   buttons, and its :hover forces a red fill with `color:#fff !important`.
   Against our flat link that produced white-on-white / red-on-red text, so
   the hover state is spelled out here instead of partially inherited. */
.mm-blog .post-main-box .content-bttn a.blogbutton-small:hover,
.mm-blog .post-main-box .content-bttn a.blogbutton-small:focus,
.mm-blog .post-main-box .content-bttn a.blogbutton-small:focus-visible {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--mm-accent) !important;
  -webkit-text-fill-color: var(--mm-accent) !important;
  transform: none !important;
}

/* Neutralise any sweep/fill overlay the theme's hover effects may add */
.mm-blog .post-main-box .content-bttn a.blogbutton-small::before {
  display: none !important;
}

.mm-blog .post-main-box .content-bttn a.blogbutton-small:hover::after {
  transform: translateX(4px);
}

/* Hide the empty wrapper when no button text is configured */
.mm-blog .post-main-box .content-bttn:empty {
  display: none;
}

/* ========================================================================
   5. SIDEBAR
   ======================================================================== */
.mm-blog #sidebar .widget,
.mm-blog #sidebar aside.widget {
  padding: 26px 24px;
  margin: 0 0 24px;
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.mm-blog #sidebar .widget h2,
.mm-blog #sidebar .widget h3,
.mm-blog #sidebar .widget .wp-block-heading,
.mm-blog #sidebar .widget .wp-block-search__label {
  display: block;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--mm-border);
  font-family: var(--mm-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-ink);
}

/* The search block's own layout put the "Buscar" label and the field on the
   same row; force the form to stack so the label reads as a heading. */
.mm-blog #sidebar form.wp-block-search {
  display: block;
  width: 100%;
}

.mm-blog #sidebar .wp-block-search__inside-wrapper {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: none;
}

.mm-blog #sidebar .wp-block-search__input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 40px;
  padding: 0 12px;
  font-family: var(--mm-font-ui);
  font-size: 14px;
  color: var(--mm-ink);
  background: #fff;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  box-sizing: border-box;
}

.mm-blog #sidebar .wp-block-search__input:focus {
  outline: none;
  border-color: var(--mm-ink);
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

/* nowrap stops "Buscar" breaking into "Busc / ar" in the narrow column */
.mm-blog #sidebar .wp-block-search__button {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 16px;
  margin: 0;
  font-family: var(--mm-font-ui);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background: var(--mm-ink);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mm-blog #sidebar .wp-block-search__button:hover {
  background: #374151;
}

/* Recent posts — a divided list instead of red diamond bullets */
.mm-blog #sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-blog #sidebar ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--mm-border);
}

.mm-blog #sidebar ul li:last-child {
  border-bottom: none;
}

.mm-blog #sidebar ul li::before,
.mm-blog #sidebar ul li::marker {
  content: none !important;
}

.mm-blog #sidebar ul li a {
  display: block;
  padding: 12px 0;
  font-family: var(--mm-font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mm-ink-muted);
  text-decoration: none;
  transition: color 0.25s var(--mm-ease), padding-left 0.25s var(--mm-ease);
}

.mm-blog #sidebar ul li a:hover {
  color: var(--mm-accent);
  padding-left: 4px;
}

/* The widget group block adds another nested box; keep it flat */
.mm-blog #sidebar .wp-block-group,
.mm-blog #sidebar .wp-block-group__inner-container {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
}

/* ========================================================================
   6. PAGINATION
   ======================================================================== */
.mm-blog .navigation {
  margin-top: 8px;
}

/* ========================================================================
   7. RESPONSIVE
   ======================================================================== */
/* Tablet: the theme keeps the sidebar at col-md-4 (33%) from 768px up, which
   squeezes the search row. Give both columns the full width instead. */
@media (max-width: 991px) {
  .mm-blog .services,
  .mm-blog #sidebar {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .mm-blog .mm-blog-head {
    margin-bottom: 28px;
    padding-bottom: 18px;
  }

  .mm-blog #sidebar {
    margin-top: 28px;
  }

  /* Two cards side by side reads better than one very wide one on tablets */
  .mm-blog #sidebar .sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }

  .mm-blog #sidebar .widget,
  .mm-blog #sidebar aside.widget {
    margin: 0;
  }
}

@media (max-width: 600px) {
  .mm-blog #sidebar .sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .mm-blog .post-main-box {
    padding: 24px 22px;
  }

  /* Date chip sits inline above the title on narrow screens */
  .mm-blog .datebox {
    flex-direction: row;
    gap: 8px;
    width: auto;
    padding: 6px 12px;
    margin-bottom: 16px;
  }

  .mm-blog .datebox .date-day {
    font-size: 16px;
  }

  .mm-blog .datebox .date-monthwrap,
  .mm-blog .datebox .yearwrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}