/**
 * Social Share Plugin Styles
 * 
 * Styles for Pinterest pin overlay on images
 */

/* Pin button on images (featured + content images) */
.pin-wrapper {
  position: relative;
  display: block;
}

/* Content images specific styling */
.pin-wrapper.content-image {
  margin: var(--mo-gap, 24px) 0;
  max-width: 100%;
}

.pin-wrapper.content-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pinterest Pin Button - Classic Style */
.pin-wrapper .pin,
a.pin {
  position: absolute;
  height: 34px;
  background-color: #bd081c !important;
  color: #fff !important;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 4px;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}

/* Position variants */
.pin.pin--top-left,
.pin-wrapper .pin.pin--top-left {
  top: 16px;
  left: 16px;
  right: auto;
  bottom: auto;
}

.pin.pin--top-right,
.pin-wrapper .pin.pin--top-right {
  top: 16px;
  right: 16px;
  left: auto;
  bottom: auto;
}

.pin.pin--bottom-left,
.pin-wrapper .pin.pin--bottom-left {
  bottom: 56px;
  left: 16px;
  top: auto;
  right: auto;
}

.pin.pin--bottom-right,
.pin-wrapper .pin.pin--bottom-right {
  bottom: 56px;
  right: 16px;
  top: auto;
  left: auto;
}

.pin.pin--center,
.pin-wrapper .pin.pin--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  right: auto;
  bottom: auto;
}

/* Default position (top-left) for pins without position class */
.pin:not([class*="pin--"]),
.pin-wrapper .pin:not([class*="pin--"]) {
  top: 16px;
  left: 16px;
}

/* Style variants */
.pin.pin--icon .txt-s {
  display: none;
}

.pin.pin--text .icon {
  display: none;
}

.pin.pin--icon-text .icon,
.pin.pin--icon-text .txt-s {
  display: inline-flex;
}

/* Icon inside pin button */
.pin-wrapper .pin .icon,
a.pin .icon,
.pin .icon {
  width: 18px;
  height: 18px;
  fill: #fff !important;
  color: #fff !important;
}

.pin-wrapper .pin:hover,
a.pin:hover {
  background-color: #a00d1c !important;
}

/* Text inside button */
.pin .txt-s {
  color: #fff !important;
  font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .pin-wrapper .pin,
  a.pin {
    top: 8px;
    left: 8px;
    padding: 6px 10px;
    height: 30px;
  }
}