/* Obata Portfolio Swiper Block - v1.0.4 */

.obata-portfolio-swiper,
.obata-portfolio-swiper__inner,
.obata-portfolio-swiper__swiper {
  background: transparent !important;
}

.obata-portfolio-swiper__card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.obata-portfolio-swiper__media {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  aspect-ratio: 2560 / 1441;
}

.obata-portfolio-swiper__img,
.obata-portfolio-swiper__img-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.obata-portfolio-swiper__img {
  display: block;
  object-fit: cover;
  transform: scale(1);
  transition: transform 400ms ease;
  will-change: transform;
}

.obata-portfolio-swiper__card:hover .obata-portfolio-swiper__img {
  transform: scale(1.05);
}

.obata-portfolio-swiper__img-fallback {
  background: rgba(0, 0, 0, 0.06);
}

.obata-portfolio-swiper__content {
  display: grid;
}

/* Typography */
.obata-portfolio-swiper__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: var(--color-graphite-gray);
}

.obata-portfolio-swiper__desc {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.5;
  opacity: 1;
  color: var(--color-graphite-gray);

  /* Clamp to ~6 lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

.obata-portfolio-swiper__card:hover .obata-portfolio-swiper__title,
.obata-portfolio-swiper__card:hover .obata-portfolio-swiper__desc {
  color: var(--color-graphite-gray);
}

/* Minimal .obata-button fallback (matches your plugin behavior closely) */
.obata-portfolio-swiper .obata-button {
  color: var(--obata-color, var(--color-passion-red)) !important;
  background: var(--obata-bg, transparent) !important;
  text-decoration: none !important;
  font-size: calc(var(--obata-font-size, 16)*1px);
  font-weight: var(--obata-font-weight, 600);
  line-height: 22px;
  padding: var(--obata-padding, 0);
  border-radius: calc(var(--obata-radius, 0)*1px);
  display: inline-block;
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease;
  border: 1px solid var(--obata-border-color, transparent);
}

.obata-portfolio-swiper .obata-button:hover,
.obata-portfolio-swiper .obata-button:active {
  color: var(--obata-hover-color, var(--color-sunset-red)) !important;
  background: var(--obata-hover-bg, transparent) !important;
  border-color: var(--obata-hover-border-color, var(--obata-border-color, transparent));
}

/* Arrow styles (bootstrap icon) */
.obata-portfolio-swiper .arrow-wrap {
  white-space: nowrap;
  display: inline-block;
}

.obata-portfolio-swiper .injected-arrow {
  display: inline-block;
  margin-left: 5px;
  color: currentColor !important;
  transform: translateX(0);
  transition: transform .3s ease, color .3s ease;
  vertical-align: -4px;
  line-height: 1;
  font-style: normal;
}

.obata-portfolio-swiper .injected-arrow::before {
  font-family: bootstrap-icons !important;
  content: "\f138";
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1;
}

.obata-portfolio-swiper a.obata-button:hover .injected-arrow,
.obata-portfolio-swiper a.obata-button:active .injected-arrow {
  transform: translateX(6px);
}

/* CTA */
.obata-portfolio-swiper__cta {
  margin-top: 16px;
}

.obata-portfolio-swiper__ctaBtn {
  border: 0;
  padding: 0;
  background: transparent;
  font-weight: 400 !important;
}

.obata-portfolio-swiper__card:hover .obata-portfolio-swiper__ctaBtn .injected-arrow {
  transform: translateX(6px);
}

/* Controls */
.obata-portfolio-swiper__topnav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.obata-portfolio-swiper__bottomnav {
  margin-top: 50px;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.obata-portfolio-swiper__midbtn {
  text-align: center;
  white-space: nowrap;
}

/* Prev/Next buttons - white with graphite border, hover bg */
.obata-portfolio-swiper__navBtn {
  appearance: none;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.12);
  border: 0px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  /* transition: background 250ms ease; */
}

.obata-portfolio-swiper__navBtn:hover {
  /* background: var(--color-white-gray); */
}

.obata-portfolio-swiper__navBtn .injected-arrow {
  margin-left: 0;
  vertical-align: 0;
  color: var(--color-graphite-gray) !important;
}

.obata-portfolio-swiper__navBtn--prev .injected-arrow {
  transform: rotate(180deg) translateX(0);
}

.obata-portfolio-swiper__navBtn--prev:hover .injected-arrow {
  transform: rotate(180deg) translateX(3px);
}

.obata-portfolio-swiper__navBtn--next:hover .injected-arrow {
  transform: translateX(3px);
}

.obata-portfolio-swiper__navBtn--next .arrow-wrap {
  margin-top: 5px !important;
}

/* Pagination dots (desktop + mobile) */
.obata-portfolio-swiper__pagination {
  display: block;
  text-align: center;
}

.obata-portfolio-swiper__pagination .swiper-pagination-bullet {
  width: 20px;
  height: 6px;
  border-radius: 0;
  opacity: 1;
  background: rgba(0, 0, 0, 0.18);
  margin: 0 5px !important;
}

.obata-portfolio-swiper__pagination .swiper-pagination-bullet-active {
  background: #ED1C24;
}

/* Mobile: hide top arrows, keep dots + button */
@media (max-width: 767px) {
  .obata-portfolio-swiper__topnav {
    display: none;
  }

  .obata-portfolio-swiper__bottomnav {
    margin-top: 40px;
    margin-bottom: 40px;
    gap: 28px;
  }
}


/* Slider bottom CTA: force arrow-wrap to a clean second line */
.obata-portfolio-swiper__midbtn,
.obata-news-swiper__midbtn {
  display: inline-block;
  /* keep button sizing sane */
  white-space: normal;
  /* allow the main text to wrap */
}

.obata-portfolio-swiper__midbtn .arrow-wrap,
.obata-news-swiper__midbtn .arrow-wrap {
  display: block;
  /* <-- this is the key: arrow-wrap becomes its own line */
  white-space: nowrap;
  /* keep last word + arrow glued */
  margin-top: 6px;
  /* match your screenshot spacing */
}

.obata-portfolio-swiper__midbtn:hover .injected-arrow,
.obata-news-swiper__midbtn:hover .injected-arrow {
  transform: translateX(6px);
}