.thaiartisan .exhibitionPage {
  background: #fafbfd;
}

.thaiartisan .exhibitionPage .container {
  max-width: 95vw;
  margin: auto;
  min-height: 100px;
  padding: 20px;
  display: flex;
  /* align-items: flex-start; */
}

.thaiartisan .exhibitionPage .container .filterContainer {
  width: 25%;
  background: #b23431;
  min-height: 100px;
  padding: 20px;
}

.thaiartisan .exhibitionPage .container .filterContainer .button {
  padding: 0 10px;
  width: 70px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
  background: #d3aa8a;
  border-radius: 3px;
  cursor: pointer;
}

.thaiartisan .exhibitionPage .container .filterContainer .search {
  width: calc(100% - 70px);
}

.thaiartisan .exhibitionPage .container .filterContainer .search input {
  background: #fff;
  border: 1px solid #ebeced;
  padding: 10px;
  width: 100%;
  border-radius: 3px;
  font-size: 23px;
  padding: 5px 15px;
  font-family: "Sarabun", sans-serif;
}

.thaiartisan .exhibitionPage .exhibitionCard .title {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0px;
  word-spacing: 0.1em;
  color: #bd2527;
}

.thaiartisan .exhibitionPage .exhibitionCard .title a {
  text-decoration: unset;
  color: unset;
}

.thaiartisan .exhibitionPage .title {
  text-align: center;
  font-size: 1.3rem;
  color: #fff;
}

.thaiartisan .exhibitionContainer .title {
  width: 30%;
  color: #bd2527;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5em;
}

.thaiartisan .exhibitionContainer .box .title {
  padding: 0px 40px 0px 60px;
}

.thaiartisan .exhibitionPage .artType {
  display: flex;
  gap: 10px;
  font-weight: bold;
  font-family: "Sarabun", Sans-serif;
  font-size: 24px;
  color: #fff;
}

.thaiartisan .exhibitionPage .exhibitionCard .footer .artType {
  font-family: "Sarabun", Sans-serif;
  font-size: 23px;
  font-weight: 300;
  letter-spacing: 0px;
  word-spacing: 0.1em;
  color: #a7a9ac;
  display: block;
}
.thaiartisan .exhibitionPage .artType input {
  cursor: pointer;
}

.thaiartisan .exhibitionPage .artType label {
  user-select: none;
  cursor: pointer;
}
.thaiartisan .exhibitionContainer .profile .artType {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1;
}

.thaiartisan .exhibitionPage .container .content {
  width: 75%;
  min-height: 100px;
  display: flex;
  gap: 10px;
  padding-left: 10px;
  flex-wrap: wrap;
}

/* must stay as specific as the `.container .content` rule above, or that one's
   `display: flex` wins and the grid template is ignored */
.thaiartisan .exhibitionPage .container .content {
  display: grid;
  /* 3 columns while each is over 300px, then wraps to 2 and 1.
       auto-fill (not auto-fit) keeps the empty tracks, so 1-2 items stay
       one-third wide instead of stretching across the whole row. */
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, max(300px, (100% - 20px) / 3)), 1fr)
  );
  /* align-items: stretch; */
  gap: 10px;
  /* padding: 10px; */
  background: #fafbfd;
  border-radius: 5px;
}

.thaiartisan .exhibitionPage .container .content .exhibition-item {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  height: auto;
}

.thaiartisan .exhibitionPage .exhibitionCardContent {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
}
.thaiartisan .exhibitionPage .exhibitionStatus .exhibitionTextStatus {
  padding: 5px 10px;
  width: fit-content;
  border-radius: 24px;
  background: #e1f5ee;
  color: #0f6e56;
  font-size: 14px;
  font-family: "Sarabun", sans-serif;
}

.thaiartisan .exhibitionPage h3 {

  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0px;
  word-spacing: 0.1em;
  color: #bd2527;
  font-family: "kanit", sans-serif;
}

.thaiartisan .exhibitionPage .exhibitionCard span {

  font-weight: 500;
  letter-spacing: 0px;
  word-spacing: 0.1em;
  font-size: 14px;
  font-family: "Sarabun", sans-serif;
}

/* scoped to .exhibitionCard so the modal's image (also inside .exhibition-item)
   does not inherit the fixed 400px height */
.thaiartisan
  .exhibitionPage
  .container
  .content
  .exhibition-item
  .exhibitionCard
  img {
  width: 100%;
  box-sizing: border-box;
  object-fit: cover;
  display: block;
  background: #fff;
  border-bottom: 1px solid #bd2527;
  height: 400px;
}

.thaiartisan .exhibitionCard {
  width: 100%;
  text-align: start;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding-bottom: 5px;
  transition: all 0.3s;
  cursor: pointer;
}

/* ---- Exhibition modal ---------------------------------------------------
   Desktop: centered dialog, X at the top right.
   Mobile (<= 600px): fills the window, back arrow at the top left. */

.thaiartisan .exhibitionPage .exhibitionModal {
  position: fixed;
  /* covers the whole window, header included — it dims behind the modal */
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);

}

.thaiartisan .exhibitionPage .exhibitionModal .modalContent {
  position: relative;
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  padding-top: 80px;
  text-align: center;
  background: #fff;
  border: 2px solid #bd2527;
}

.thaiartisan .exhibitionPage .exhibitionModal .modalContent img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 3px;
}

/* image left, text right — stacks below 600px */
.thaiartisan .exhibitionPage .exhibitionModal .exhibitionModalContent {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
}

/* a fixed box is what makes zooming possible: the image scales inside it and
   gets clipped, instead of growing and pushing the layout around */
.thaiartisan .exhibitionPage .exhibitionModal .modalImage {
  position: relative;
  flex: 0 0 45%;
  width: 45%;
  /* height: 60vh; */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* background: #f4f4f4; */
}

.thaiartisan .exhibitionPage .exhibitionModal .modalImage img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.2s;
}

.thaiartisan .exhibitionPage .exhibitionModal .zoomControls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  /* the scaled image makes its own stacking context — stay above it */
  z-index: 2;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.thaiartisan .exhibitionPage .exhibitionModal .zoomButton {
  display: flex;
  padding: 5px;
  line-height: 0;
  color: #000;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  cursor: pointer;
}

.thaiartisan .exhibitionPage .exhibitionModal .zoomButton:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* mobile full-screen image viewer — above the modal itself */
.thaiartisan .exhibitionPage .exhibitionModal .imageViewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
}

.thaiartisan .exhibitionPage .exhibitionModal .imageViewer img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.thaiartisan .exhibitionPage .exhibitionModal .closeImageViewer {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px;
  line-height: 0;
  color: #fff;
  cursor: pointer;
}

.thaiartisan .exhibitionPage .exhibitionModal .contentDisplay {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: start;
  font-family: "Sarabun", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.thaiartisan .exhibitionPage .exhibitionModal .artTypeTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
}

.thaiartisan .exhibitionPage .exhibitionModal .artTypeTag {
  padding: 2px 4px;
  font-size: 14px;
  font-family: "kanit", sans-serif;
  border: 1px solid #000000;
}

.thaiartisan .exhibitionPage .exhibitionModal .closeModal {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px;
  line-height: 0;
  color: #bd2527;
  cursor: pointer;
}

.thaiartisan .exhibitionPage .exhibitionModal .backIcon {
  display: none;
}

/* must stay above the 600px block below — media queries add no specificity,
   so on a narrow phone the later 100% rules have to win */
@media only screen and (max-width: 790px) {
  .thaiartisan .exhibitionPage .container .filterContainer {
    width: 50%;
  }

  /* the two are still side by side, so the cards give up the other half —
     otherwise 50% + 75% overflows and flexbox shrinks the panel back to ~40% */
  .thaiartisan .exhibitionPage .container .content {
    width: 50%;
  }
}

@media only screen and (max-width: 600px) {
  /* filter panel stacks above the cards, both edge to edge */
  .thaiartisan .exhibitionPage .container {
    flex-direction: column;
    max-width: 100%;
    padding: 10px;
    gap: 10px;
  }

  .thaiartisan .exhibitionPage .container .filterContainer {
    width: 100%;
  }

  .thaiartisan .exhibitionPage .container .content {
    width: 100%;
    padding-left: 0;
  }

  /* fills the window below the header, which stays visible and undimmed.
     --backdropTop is the header's measured height, set in ExhibitionCard */
  .thaiartisan .exhibitionPage .exhibitionModal {
    padding: 0;
    top: var(--backdropTop, 0px);
  }

  .thaiartisan .exhibitionPage .exhibitionModal .modalContent {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding-top: 55px;
    border-radius: 0;
  }

  .thaiartisan .exhibitionPage .exhibitionModal .modalContent img {
    max-height: 50vh;
  }

  .thaiartisan .exhibitionPage .exhibitionModal .exhibitionModalContent {
    flex-direction: column;
  }

  .thaiartisan .exhibitionPage .exhibitionModal .modalImage {
    flex: none;
    width: 100%;
    height: 40vh;
  }

  .thaiartisan .exhibitionPage .exhibitionModal .modalImage img {
    cursor: zoom-in;
  }

  .thaiartisan .exhibitionPage .exhibitionModal .closeModal {
    top: 12px;
    left: 12px;
    right: auto;
  }

  .thaiartisan .exhibitionPage .exhibitionModal .closeIcon {
    display: none;
  }

  .thaiartisan .exhibitionPage .exhibitionModal .backIcon {
    display: inline-block;
  }
}