/* Comunidad Ferrymas: blogs, redes sociales y buscador de tiendas.
   Se carga en displayHeader (fuera de la caché combinada del theme): necesario cuando el bloque se inserta con shortcode. */
.ferrymas-community {
  --fmc-accent: #b6be35;
  --fmc-overlay: rgba(182, 190, 53, 0.86);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 5vw, 84px) clamp(16px, 4vw, 48px);
  background: var(--fmc-accent);
  color: #fff;
  font-family: inherit;
  text-align: left;
}

/* Foto de la tienda difuminada + capa verde (como en el diseño) */
.ferrymas-community::before,
.ferrymas-community::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.ferrymas-community::before {
  inset: -12px;
  background: var(--fmc-bg, none) center / cover no-repeat;
  filter: blur(3px);
}
.ferrymas-community::after {
  background: var(--fmc-overlay);
}

.ferrymas-community * { box-sizing: border-box; }

.ferrymas-community__inner {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 600px);
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 7vw, 130px);
  max-width: 1400px;
  margin: 0 auto;
}

.ferrymas-community__section + .ferrymas-community__section { margin-top: clamp(22px, 2.4vw, 34px); }

.ferrymas-community h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(19px, 1.45vw, 26px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}
.ferrymas-community h2 strong { font-weight: 800; }

/* ---------- Blogs ---------- */
.ferrymas-community__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}
.ferrymas-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  color: #191919;
}
.ferrymas-card__image {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: clamp(110px, 9vw, 160px);
  overflow: hidden;
  padding: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}
.ferrymas-card__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 44%, rgba(0, 0, 0, 0.38)); }
.ferrymas-card__image span { position: relative; z-index: 1; }
.ferrymas-card__image--tools { background: linear-gradient(125deg, #764a33 0 17%, #c9d5bc 17% 31%, #255a4b 31% 43%, #995a38 43% 59%, #e2dfc2 59% 72%, #5d4736 72%); }
.ferrymas-card__image--sky { background: linear-gradient(145deg, #f0f4ef 0 35%, #55abc9 35% 72%, #1e7798 72%); }
.ferrymas-card__body { padding: 12px 14px 14px; text-align: left; }
.ferrymas-card__meta { display: block; margin-bottom: 6px; color: #777; font-size: 11px; font-weight: 600; }
.ferrymas-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 6px;
  color: #191919;
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}
.ferrymas-card p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 10px;
  color: #555;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
}
.ferrymas-card__button {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  color: #222;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}
.ferrymas-card__button:hover { border-color: var(--fmc-accent); color: #222; }

/* ---------- Redes sociales (formato vertical como en el diseño) ---------- */
.ferrymas-community__social-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 26px);
  max-width: 560px;
}
.ferrymas-social-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  padding: 12px;
  border-radius: 4px;
  background: #252525;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  color: #fff;
  text-decoration: none;
}
.ferrymas-social-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, #1d1d1d 0 38%, #68732d 38% 42%, #202020 42%); }
.ferrymas-social-card--2::before { background: radial-gradient(circle at 50% 36%, #d68e47 0 14%, #86a045 15% 35%, transparent 36%), linear-gradient(135deg, #bc613b, #263e26); }
.ferrymas-social-card--3::before { background: radial-gradient(circle, #b6be35 0 11%, #202020 12% 30%, #121212 31%); }
.ferrymas-social-card i,
.ferrymas-social-card span,
.ferrymas-social-card small { position: relative; z-index: 1; font-style: normal; }
.ferrymas-social-card i { position: absolute; top: 8px; right: 9px; font-size: 12px; }
.ferrymas-social-card span { font-size: 14px; font-weight: 800; }
.ferrymas-social-card small { margin-top: 3px; font-size: 10px; }

/* ---------- Mapa y llamada a la acción ---------- */
.ferrymas-community__locator {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ferrymas-community__map {
  display: block;
  width: min(100%, 600px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.55));
}
.ferrymas-community__arrow {
  display: block;
  align-self: center;
  width: clamp(54px, 5vw, 84px);
  height: auto;
  margin: -6% 0 4px clamp(80px, 14vw, 230px);
  color: #fff;
}
.ferrymas-community__cta {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(22px, 2vw, 36px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.08;
  text-align: center;
  text-transform: uppercase;
}
.ferrymas-community__map-button {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  color: #222;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.ferrymas-community__map-button:hover { color: #222; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .ferrymas-community__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 40px; }
}

/* ---------- Tablet vertical / móvil: el mapa arriba ---------- */
@media (max-width: 800px) {
  .ferrymas-community__inner { grid-template-columns: 1fr; gap: 40px; max-width: 560px; }
  .ferrymas-community__locator { order: -1; }
  .ferrymas-community__map { width: min(100%, 420px); }
  .ferrymas-community__arrow { margin-left: 45%; }
}

@media (max-width: 500px) {
  .ferrymas-community { padding: 36px 16px; }
  .ferrymas-community h2 { font-size: 19px; }
  .ferrymas-community__cards { grid-template-columns: 1fr; }
  .ferrymas-community__cards--blog .ferrymas-card--placeholder { display: none; }
  .ferrymas-card__image { height: 150px; }
  .ferrymas-community__social-grid { gap: 9px; }
  .ferrymas-social-card { padding: 8px; }
  .ferrymas-social-card span { font-size: 11px; }
  .ferrymas-social-card small { font-size: 8px; }
  .ferrymas-community__cta { font-size: 21px; }
}