/*
* FooGallery Custom CSS
* This file is created by adding custom CSS on FooGallery Settings page in wp-admin
* Created : 7 Nov 2025, 12:01 pm
*/

/* ===== Inspiration & Blessing page only ===== */
body.page-id-3189 {

  /* 1) Make ALL FooGallery thumbs perfect circles, same size */
  /* Higher specificity + !important to beat inline gallery styles */
  /* Desktop/base size */
  --hb-thumb-size: 220px;

  /* Center content column */
  .entry-content, .thn_post_wrap, .elementor .e-con {
    text-align: center;
  }

  /* Force each gallery item box to reserve a square */
  .foogallery .fg-item .fg-image,
  .foogallery .fg-item .fg-thumb img,
  .foogallery .fg-item .fg-image img {
    width: var(--hb-thumb-size) !important;
    height: var(--hb-thumb-size) !important;
    border-radius: 50% !important;      /* circle */
    object-fit: cover !important;        /* crop nicely */
    display: inline-block !important;
  }

  /* Optional: neat frame + gentle shadow */
  .foogallery .fg-item .fg-thumb img {
    border: 3px solid #fff !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.15) !important;
    transition: transform .25s ease;
  }
  .foogallery .fg-item .fg-thumb img:hover { transform: scale(1.03); }

  /* 2) Normalize gutters across all the different galleries on this page */
  /* FooGallery uses CSS vars; set a consistent gap */
  #foogallery-gallery-3273,
  #foogallery-gallery-3192,
  #foogallery-gallery-3255,
  #foogallery-gallery-3361,
  #foogallery-gallery-3376,
  #foogallery-gallery-3385,
  #foogallery-gallery-3390,
  #foogallery-gallery-3394,
  #foogallery-gallery-3403,
  #foogallery-gallery-3408,
  #foogallery-gallery-3410,
  #foogallery-gallery-3415 {
    --fg-gutter: 14px !important;
  }

  /* 3) Keep the figure wrapper tight so the circle size rules apply cleanly */
  .foogallery .fg-item .fg-item-inner,
  .foogallery .fg-item figure.fg-item-inner,
  .foogallery .fg-image-wrap {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
  }

  /* 4) Make headings after galleries look consistent */
  .elementor-widget-heading h2.elementor-heading-title {
    margin: 8px 0 24px !important;
    font-weight: 700;
  }

  /* 5) Responsive sizes */
  @media (max-width: 1024px) {
    --hb-thumb-size: 190px;
  }
  @media (max-width: 768px) {
    --hb-thumb-size: 150px;
  }
  @media (max-width: 480px) {
    --hb-thumb-size: 120px;
  }
}