/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

// .wp-block-wpogc-link-preview-cards
//   background-color: #21759b;
//   color: #fff;
//   padding: 2px;
// }



.wp-block-link-preview-cards-card .link-preview-card {
  display: block;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin-right: auto;
  margin-left: auto;

  &:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    //   transform: translateY(-1px);
    transform: scale(1.005);
    //   transform: translateY(-1px) scale(1.01);
    .link-preview-card-title {
      text-decoration: underline;
    }
  }

  .link-preview-card-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .link-preview-card-content {
    padding: 16px;
  }

  .link-preview-card-title {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 8px;
  }

  .link-preview-card-description {
    color: #555;
    margin-bottom: 12px;
  }

  .link-preview-card-url {
    font-size: 0.85em;
    color: #888;
  }
}



// .card {
//   // > div {
//   //   // this darkens the base color by 5%
//   //   // background-color: lch( from var(--wp--preset--color--base) calc(l - 5) 0 0);
//   //   // background-color: var(--wp--preset--color--accent-1);
//   // }
// }

// .wp-block-link-preview-cards-og-card {
//   // Default width for normal alignment
//   // .card {
//   //   max-width: 500px;
//   //   width: 100%;
//   // }

//   .aligncenter {
//     margin-left: auto;
//     margin-right: auto;
//   }

//   .alignright {
//     margin-left: auto;
//     margin-right: 0;
//   }

//   .alignleft {
//     margin-right: auto;
//     margin-left: 0;
//   }

//   .alignwide {
//     .card {
//       max-width: var(--wp--style--global--wide-size, 1200px); // Uses WordPress wide size
//     }
//   }

//   .alignfull {
//     .card {
//       max-width: none; // Full width
//       width: 100%;
//     }
//   }
// }