.weblodge-portfolio {
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-align: center;
}

.weblodge-portfolio *,
.weblodge-portfolio *::before,
.weblodge-portfolio *::after {
 box-sizing: border-box;
}


/* TOP SECTION */

/* SPACING ONLY  BADGE APPEARANCE COMES FROM GLOBAL CSS */
.weblodge-agency-portfolio-top > .wla-badge {
  margin-bottom: 12px;
}

.weblodge-agency-portfolio-top {
 text-align: center;
 max-width: 850px;
 margin: 0 auto 25px;
 position: relative;
 z-index: 2;
}

/* =========================================

PORTFOLIO DETAILS SECTION

\========================================= */

.weblodge-portfolio-details {
 display: grid;
 grid-template-columns: 1fr 1fr;
 align-items: center;
 gap: 40px;
 margin-top: 25px;
 padding: 35px;
 text-align: left;
}

.weblodge-portfolio-details-text .wla-badge {
 align-self: flex-start;
 margin: 0 0 20px;
}

.weblodge-portfolio-details-text .wla-badge > span {
 display: block;
 flex: 0 0 10px;
 width: 10px;
 height: 10px;
}

.weblodge-portfolio-details-text {
 min-width: 0;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 text-align: left;
}

/* Layout only - heading style from global .wla-subtittle-text,
   paragraph style from global .wla-description-text */
.weblodge-portfolio-details-text h3 {
 margin: 0 0 15px;
}

.weblodge-portfolio-details-text p {
 margin: 0;
}

.weblodge-portfolio-details-text h3,
.weblodge-portfolio-details-text p {
 width: 100%;
 text-align: left;
}

/* Top description style comes from global .wla-description-text
   (the old !important size rules are removed at all breakpoints,
   otherwise they would override the global class) */

.weblodge-portfolio-details-image {
 width: 100%;
 min-width: 0;
 aspect-ratio: 16 / 9;
 overflow: hidden;
 background: #ffffff;
 border-radius: 16px;
 position: relative;
 isolation: isolate;
}

.weblodge-portfolio-details-image img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: blur(0.3px) brightness(0.85);
 transform: scale(1.02);
}

/* ONE SHARED VIEW MORE BUTTON */

.weblodge-portfolio-view-more-wrap {
 text-align: center;
 margin-top: 25px;
}

/* =========================================

TAB BUTTONS

\========================================= */

.weblodge-tab-buttons {
  display: grid;
  grid-template-columns: repeat(3, 260px);
  gap: 25px;
  justify-content: center;
  margin: 0 auto 30px;
}

.weblodge-tab-btn.wla-button {
  width: 100%;
  min-width: 0;
  outline: none;
}

.weblodge-tab-btn.wla-button .weblodge-button-text {
  display: flex;
}

/* =========================================
PORTFOLIO GRID

\========================================= */

.weblodge-portfolio-grid {
 display: grid;
 grid-template-columns: 1.05fr 1.4fr 1.05fr;
 grid-template-rows: repeat(2, auto);
 gap: 30px;
 justify-content: center;
 align-items: center;
 padding-bottom: 20px;
}

.weblodge-work-box {
 position: relative;
 min-width: 0;
 width: 100%;
 aspect-ratio: 16 / 9;
}

.weblodge-work-box > a {
 display: block;
 width: 100%;
 height: 100%;
}

.weblodge-work-box video,
.weblodge-work-box img {
 display: block;
 width: 100%;
 height: 100%;
}

.weblodge-work-box dotlottie-wc {
 display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}

.weblodge-work-box video {
 object-fit: cover;
}

.weblodge-work-box img {
 object-fit: contain;
}

.weblodge-work-box.weblodge-small video,
.weblodge-work-box.weblodge-small img,
.weblodge-work-box.weblodge-small dotlottie-wc {
 object-fit: contain;
}

/* GRID POSITIONING */
.weblodge-portfolio-grid .weblodge-work-box:nth-child(1) {
 grid-column: 1;
 grid-row: 1;
}

.weblodge-portfolio-grid .weblodge-work-box:nth-child(2) {
 grid-column: 1;
 grid-row: 2;
}

.weblodge-portfolio-grid .weblodge-work-box:nth-child(3) {
 grid-column: 2;
 grid-row: 1 / span 2;
}

.weblodge-portfolio-grid .weblodge-work-box:nth-child(4) {
 grid-column: 3;
 grid-row: 1;
}

.weblodge-portfolio-grid .weblodge-work-box:nth-child(5) {
 grid-column: 3;
 grid-row: 2;
}

/* =========================================

TAB CONTENT

\========================================= */

.weblodge-tab-content {
 display: none;
}

.weblodge-tab-content.weblodge-active {
 display: block;
}

/* Center the Dribbble button over the image */

.weblodge-portfolio-dribbble-link {
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 2;
 transform: translate(-50%, -50%);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: max-content;
 max-width: calc(100% - 20px);
 text-decoration: none;
}

/* Preserve your existing global button design */

.weblodge-portfolio-dribbble-link .wla-button {
 margin: 0;
 white-space: nowrap;
}

/* Optional subtle hover effect */

.weblodge-portfolio-dribbble-link:hover {
 filter: brightness(1.12);
}













/* TABLET */

@media (max-width: 1024px) {

 .weblodge-portfolio-details {
  gap: 25px;
  padding: 25px;
  }

  /* Details text sizes now come from the global file */

  .weblodge-tab-buttons {
  grid-template-columns: repeat(3, minmax(0, 250px));
  gap: 16px;
  }

  .weblodge-portfolio-grid {
  grid-template-columns: 1.05fr 1.2fr 1.05fr;
  gap: 20px;
  }

  .weblodge-work-box {
  border-radius: 21px;
  }
}












/* MOBILE */

@media (max-width: 767px) {

 .weblodge-portfolio-details {
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 20px;
  padding: 20px 15px;
  }

  .weblodge-portfolio-details-text {
 align-items: center;
 text-align: center;
 }

 .weblodge-portfolio-details-text .wla-badge {
 align-self: center;
 margin: 0 auto 20px;
 }

  /* Details and top text sizes now come from the global file */

  .weblodge-portfolio-details-text h3,
 .weblodge-portfolio-details-text p {
 text-align: center;
 }

  .weblodge-agency-portfolio-top {
 margin-bottom: 20px;
 }

 .weblodge-tab-buttons {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 5px;
 margin-bottom: 22px;
 }

 .weblodge-tab-btn .weblodge-button-text {
  overflow: hidden;
  text-overflow: ellipsis;
  }

 .weblodge-portfolio-grid {
 grid-template-columns: 1fr;
 grid-template-rows: auto;
 gap: 16px;
 }

 .weblodge-portfolio-grid .weblodge-work-box:nth-child(1),
 .weblodge-portfolio-grid .weblodge-work-box:nth-child(2),
 .weblodge-portfolio-grid .weblodge-work-box:nth-child(3),
 .weblodge-portfolio-grid .weblodge-work-box:nth-child(4),
 .weblodge-portfolio-grid .weblodge-work-box:nth-child(5) {
 grid-column: auto;
 grid-row: auto;
 }

 .weblodge-work-box {
 width: 100%;
 aspect-ratio: 16 / 9;
 border-radius: 18px;
 }
}