/* Ultimate Post Kit - Post Grid Tab
 * Section 1: gridtab library base styles (bundled with the widget)
 * Section 2: widget styles
 * Note: `.gridtab*` class names belong to the gridtab library and must stay as-is.
 */
/* ============ 1. gridtab library base ============ */
.gridtab, .gridtab > dt, .gridtab > dd {
  position: relative;
}

.gridtab {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  box-sizing: border-box;
  margin: 0;
}

.gridtab > dt {
  border-style: solid;
}

.gridtab > dt.is-active {
  color: #FFF;
}

.gridtab > dd {
  z-index: 1;
  display: none;
  flex-basis: 100%;
  border-style: solid;
}

.gridtab > dd > .gridtab__controls {
  position: absolute;
  inset-inline-end: 10px;
  inset-block-start: 10px;
  display: flex;
}

.gridtab > dd > .gridtab__controls > .gridtab__close {
  order: 1;
  margin-inline-start: 5px;
}

.gridtab > dd > .gridtab__controls > .gridtab__close:before, .gridtab > dd > .gridtab__controls > .gridtab__close:after {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.gridtab > dd > .gridtab__controls > .gridtab__close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow, .gridtab > dd > .gridtab__controls > .gridtab__close {
  display: block;
  inline-size: 30px;
  block-size: 30px;
  overflow: hidden;
  background: #6d7882;
  text-indent: -999px;
  position: relative;
  border-radius: 50px;
  transition: all 300ms ease-out;
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow:hover, .gridtab > dd > .gridtab__controls > .gridtab__close:hover {
  background: #2a3438;
}

.gridtab > dd > .gridtab__controls > .gridtab__close:hover {
  transform: rotate(90deg);
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow:before, .gridtab > dd > .gridtab__controls > .gridtab__arrow:after, .gridtab > dd > .gridtab__controls > .gridtab__close:before, .gridtab > dd > .gridtab__controls > .gridtab__close:after {
  position: absolute;
  inline-size: 2px;
  block-size: 10px;
  content: "";
  display: block;
  background: #FFF;
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow:before, .gridtab > dd > .gridtab__controls > .gridtab__arrow:after {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: rotate(45deg);
  transform-origin: inline-end;
  margin-block-start: -6px;
  margin-inline-start: -3px;
  block-size: 8px;
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow:after {
  margin-block-start: -3px;
  transform: rotate(-45deg);
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow.is-disabled {
  opacity: 0.25;
}

.gridtab > dd > .gridtab__controls > .gridtab__next {
  transform: scale(-1);
  transform-origin: center;
}

.gridtab > dt {
  background: #f2f9ff;
  transition: background 1s;
}

.gridtab > dt:after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
}

.gridtab > dt.is-disabled {
  pointer-events: none;
}

.gridtab > dt.is-active {
  z-index: 2;
}

.gridtab > dt > img {
  max-inline-size: 100%;
  float: inline-start;
  block-size: auto;
}

.gridtab[dir=rtl] > dd > .gridtab__controls {
  inset-inline-end: auto;
  inset-inline-start: 5px;
}

.gridtab[dir=rtl] > dd > .gridtab__controls > .gridtab__next {
  transform: none;
}

.gridtab[dir=rtl] > dd > .gridtab__controls > .gridtab__prev {
  transform: scale(-1);
}

.gridtab[dir=rtl] > dd > .gridtab__controls > .gridtab__close {
  margin-inline-end: 5px;
  margin-inline-start: 0;
}

.bdt-post-grid-tab .gridtab > dt {
  line-height: normal;
}

.gridtab {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  box-sizing: border-box;
}

.gridtab > dd > .gridtab__controls > .gridtab__close::before, .gridtab > dd > .gridtab__controls > .gridtab__close::after {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.gridtab > dd > .gridtab__controls > .gridtab__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow, .gridtab > dd > .gridtab__controls > .gridtab__close {
  display: block;
  inline-size: 30px;
  block-size: 30px;
  overflow: hidden;
  background: #666;
  text-indent: -999px;
  position: relative;
  border-radius: 50px;
  transition: all 300ms ease-out;
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow:hover, .gridtab > dd > .gridtab__controls > .gridtab__close:hover {
  background: #333;
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow::before, .gridtab > dd > .gridtab__controls > .gridtab__arrow::after, .gridtab > dd > .gridtab__controls > .gridtab__close::before, .gridtab > dd > .gridtab__controls > .gridtab__close::after {
  position: absolute;
  inline-size: 2px;
  block-size: 10px;
  content: "";
  display: block;
  background: #fff;
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow::before, .gridtab > dd > .gridtab__controls > .gridtab__arrow::after {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: rotate(45deg);
  transform-origin: right;
  margin-block-start: -6px;
  margin-inline-start: -3px;
  block-size: 8px;
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow::after {
  margin-block-start: -3px;
  transform: rotate(-45deg);
}

.gridtab > dd > .gridtab__controls > .gridtab__next {
  transform: scaleX(-1);
}

.gridtab > dt {
  transition: background 1s;
  background: #f2f2f2;
}

.gridtab > dt::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
}

/* ============ 2. Widget styles ============ */
.upk-post-grid-tab img[data-src][src*="data:image"] {
  background: rgba(152, 152, 152, 0.07);
  background-image: url("../images/loading.svg");
  background-repeat: no-repeat;
  background-position: center;
}

.upk-post-grid-tab .gridtab > dt {
  line-height: normal;
}

.upk-post-grid-tab .upk-post-grid-tab-meta {
  display: inline-flex;
}

.upk-post-grid-tab-author {
  text-transform: capitalize;
}

.upk-post-grid-tab-thumbnail {
  overflow: hidden;
  cursor: pointer;
}

.upk-post-grid-tab-thumbnail img {
  block-size: 140px;
  inline-size: 100%;
  object-fit: cover;
  vertical-align: top;
  transition: transform 250ms cubic-bezier(0.3, 0.91, 0.58, 1);
}

.upk-post-grid-tab-thumbnail:hover img {
  transform: scale(1.1);
}

.upk-post-grid-tab-item-title {
  font-size: 1.5rem;
  line-height: 1.2;
}

.upk-post-grid-tab-title {
  cursor: pointer;
}

.upk-post-grid-desc-inner {
  padding: 50px;
}

.upk-post-grid-tab-image-inner {
  overflow: hidden;
  block-size: 100%;
}

.upk-post-grid-tab-image-inner img {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  vertical-align: top;
}

.upk-post-grid-tab-excerpt p:last-child {
  margin-block-end: 0;
}

.upk-post-grid-tab-readmore svg {
  inline-size: 1em;
  block-size: 1em;
}

.upk-post-grid-tab-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* GridTab v2.1.1 */
.gridtab,
.gridtab > dt,
.gridtab > dd {
  position: relative;
}

.gridtab {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  box-sizing: border-box;
}

.gridtab > dt {
  border-style: solid;
}

.gridtab > dd {
  z-index: 1;
  display: none;
  flex-basis: 100%;
  border-style: solid;
}

.gridtab > dd > .gridtab__controls {
  position: absolute;
  inset-inline-end: 10px;
  inset-block-start: 10px;
  display: flex;
}

.gridtab > dd > .gridtab__controls > .gridtab__close {
  order: 1;
  margin-inline-start: 5px;
}

.gridtab > dd > .gridtab__controls > .gridtab__close::before,
.gridtab > dd > .gridtab__controls > .gridtab__close::after {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.gridtab > dd > .gridtab__controls > .gridtab__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow,
.gridtab > dd > .gridtab__controls > .gridtab__close {
  display: block;
  inline-size: 30px;
  block-size: 30px;
  overflow: hidden;
  background: #666;
  text-indent: -999px;
  position: relative;
  border-radius: 50px;
  transition: all 300ms ease-out;
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow:hover,
.gridtab > dd > .gridtab__controls > .gridtab__close:hover {
  background: #333;
}

.gridtab > dd > .gridtab__controls > .gridtab__close:hover {
  transform: rotate(90deg);
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow::before,
.gridtab > dd > .gridtab__controls > .gridtab__arrow::after,
.gridtab > dd > .gridtab__controls > .gridtab__close::before,
.gridtab > dd > .gridtab__controls > .gridtab__close::after {
  position: absolute;
  inline-size: 2px;
  block-size: 10px;
  content: "";
  display: block;
  background: #fff;
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow::before,
.gridtab > dd > .gridtab__controls > .gridtab__arrow::after {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: rotate(45deg);
  transform-origin: right;
  margin-block-start: -6px;
  margin-inline-start: -3px;
  block-size: 8px;
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow::after {
  margin-block-start: -3px;
  transform: rotate(-45deg);
}

.gridtab > dd > .gridtab__controls > .gridtab__arrow.is-disabled {
  opacity: 0.25;
}

.gridtab > dd > .gridtab__controls > .gridtab__next {
  transform: scaleX(-1);
}

.gridtab > dt {
  transition: background 1s;
  background: #f2f2f2;
}

.gridtab > dt::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
}

.gridtab > dt.is-disabled {
  pointer-events: none;
}

.gridtab > dt.is-active {
  z-index: 2;
}

.gridtab > dt > img {
  max-inline-size: 100%;
  float: inline-start;
  block-size: auto;
}

/* ============ 3. Scoped layout utilities (replaces the uikit framework) ============ */
.upk-post-grid-tab {
  --upk-gt-gap: 30px;
}

.upk-post-grid-tab .upk-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-inline-start: calc(-1 * var(--upk-gt-gap, 30px));
}

.upk-post-grid-tab .upk-grid > * {
  box-sizing: border-box;
  padding-inline-start: var(--upk-gt-gap, 30px);
}

.upk-post-grid-tab .upk-grid-collapse {
  --upk-gt-gap: 0px;
}

.upk-post-grid-tab .upk-flex-middle {
  align-items: center;
}

.upk-post-grid-tab .upk-flex-row-reverse {
  flex-direction: row-reverse;
}

/* Child widths */
.upk-post-grid-tab .upk-child-width-1-1 > * {
  width: 100%;
}

.upk-post-grid-tab [class*=upk-child-width-] > * {
  width: 100%;
}

@media (min-width: 960px) {
  .upk-post-grid-tab .upk-child-width-1-2\@m > * {
    width: 50%;
  }
  .upk-post-grid-tab .upk-child-width-1-1\@m > * {
    width: 100%;
  }
}
/* Misc helpers */
.upk-post-grid-tab .upk-cover-container {
  overflow: hidden;
  position: relative;
}

.upk-post-grid-tab .upk-display-inline-block {
  display: inline-block;
}

.upk-post-grid-tab .upk-margin-remove {
  margin: 0 !important;
}

.upk-post-grid-tab .upk-margin-small-top {
  margin-block-start: 15px;
}

.upk-post-grid-tab .upk-post-grid-tab-category-above {
  display: block;
  margin-block-end: 15px;
}

/* Meta bar with dot separators */
.upk-post-grid-tab .upk-subnav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  color: #999;
}

.upk-post-grid-tab .upk-subnav * {
  font-size: 13px;
  font-weight: 400;
}

.upk-post-grid-tab .upk-subnav > span {
  display: inline-flex;
  align-items: center;
  color: inherit;
}

.upk-post-grid-tab .upk-subnav > span:not(:last-child)::after {
  content: "";
  display: inline-block;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: #adb5bd;
  margin-inline: 10px;
}

.upk-post-grid-tab .upk-subnav a {
  color: inherit;
  text-decoration: none;
}

/* ============ 4. Responsive refinements ============ */
/* Images never overflow their column */
.upk-post-grid-tab img {
  max-inline-size: 100%;
}

/* Tablet and below: the panel stacks, so tighten the generous desktop padding */
@media (max-width: 959px) {
  .upk-post-grid-tab .upk-post-grid-desc-inner {
    padding: 30px;
  }
  /* Keep a stacked panel compact instead of letting a tall image dominate */
  .upk-post-grid-tab .upk-post-grid-tab-image-inner {
    max-block-size: 320px;
  }
}
@media (max-width: 767px) {
  .upk-post-grid-tab .upk-post-grid-desc-inner {
    padding: 25px;
  }
  .upk-post-grid-tab .upk-post-grid-tab-item-title {
    font-size: clamp(1.05rem, 4.5vw, 1.5rem);
  }
  .upk-post-grid-tab .upk-post-grid-tab-image-inner {
    max-block-size: 260px;
  }
}
@media (max-width: 479px) {
  .upk-post-grid-tab .upk-post-grid-desc-inner {
    padding: 20px;
  }
  .upk-post-grid-tab .upk-post-grid-tab-thumbnail img {
    block-size: 110px;
  }
  /* Close button clears the panel edge on small screens */
  .upk-post-grid-tab .gridtab > dd > .gridtab__controls {
    inset-inline-end: 6px;
    inset-block-start: 6px;
  }
  .upk-post-grid-tab .upk-post-grid-tab-image-inner {
    max-block-size: 220px;
  }
}