/* static/css/post_media.css */

/*
Readable project overrides for post-media rendering.

Policy:
- Do not append custom CSS to compiled/minified app.css or starter.css.
- Keep project-specific styles in separate readable files loaded after the bundle.

Scope:
- Shared renderer: templates/components/posts/post_media.html
- Upload modal layout corrections for templates/components/modals/upload_photos_modal.html
- Single-image posts honor post.single_image_display_mode:
  - default: cropped cover presentation
  - FIT: contained presentation
- Multi-image posts render as collages.
*/

/* ------------------------------------------------------------------------- */
/* Upload modal overrides                                                    */
/* ------------------------------------------------------------------------- */

/*
The legacy compiled bundle styles `.box` directly and, when advanced upload is
enabled, applies a dashed outline to the form itself.

For the reusable upload modal we do NOT want the dashed outline on the whole
form, because that causes the checkbox row below the dropzone to get crossed by
the outline. We move the visible drag/drop surface to a nested block instead.
*/

.upload-modal-form.box {
  background-color: transparent;
  padding: 0;
  position: relative;
  outline: none;
  outline-offset: 0;
}

/* Neutralize bundle-level dashed-outline behavior on the form itself. */
.upload-modal-form.box.has-advanced-upload,
.upload-modal-form.box.is-dragover {
  outline: none;
  outline-offset: 0;
  background-color: transparent;
}

.upload-modal-form .upload-modal-dropzone {
  background-color: rgba(41, 60, 76, 0.15);
  position: relative;
  padding: 100px 20px;
}

.upload-modal-form.box.has-advanced-upload .upload-modal-dropzone {
  outline: 2px dashed rgba(41, 60, 76, 0.8);
  outline-offset: -10px;
  -webkit-transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
  transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
}

.upload-modal-form.box.is-dragover .upload-modal-dropzone {
  outline-offset: -20px;
  outline-color: rgba(41, 60, 76, 0.3);
  background-color: #fff;
}

.upload-modal-form.box.is-uploading .box__input,
.upload-modal-form.box.is-success .box__input,
.upload-modal-form.box.is-error .box__input {
  visibility: hidden;
}

.upload-modal-form.box.is-uploading .box__uploading,
.upload-modal-form.box.is-success .box__success,
.upload-modal-form.box.is-error .box__error {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.upload-modal-form .upload-modal-options {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
}

.upload-modal-form .upload-modal-options .form-check {
  min-height: 1.5rem;
}

.upload-modal-form .upload-modal-options .form-check-label {
  font-weight: 500;
}

/* ------------------------------------------------------------------------- */
/* Post media                                                                */
/* ------------------------------------------------------------------------- */

.post-media {
  width: 100%;
}

.post-media .gallery-img {
  width: 100%;
  overflow: hidden;
  border-radius: 0.25rem;
  background-color: #f8f9fa;
}

.post-media .gallery-img img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* Single image ------------------------------------------------------------ */

.post-media .post-media-single {
  height: 28rem;
}

.post-media .post-media-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
FIT mode:
- Preserve the full image.
- Avoid awkward crop on tall or wide uploads.
*/
.post-media .post-media-single.fit-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 12rem;
  max-height: 32rem;
  padding: 0.25rem;
  background-color: #f8f9fa;
}

.post-media .post-media-single.fit-img img {
  width: 100%;
  height: auto;
  max-height: 31.5rem;
  object-fit: contain;
}

/* Two-image collage ------------------------------------------------------- */

.post-media .gallery-img-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  height: 20rem;
}

.post-media .gallery-img-2 .post-media-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.25rem;
  background-color: #e9ecef;
}

.post-media .gallery-img-2 .post-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Three-or-more collage --------------------------------------------------- */

.post-media .gallery-img-3 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  height: 22rem;
}

.post-media .gallery-img-3 .post-media-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.25rem;
  background-color: #e9ecef;
}

.post-media .gallery-img-3 .post-media-item:first-child {
  grid-row: 1 / span 2;
}

.post-media .gallery-img-3 .post-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-media .post-media-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(41, 60, 76, 0.55);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

/* Mobile tuning ----------------------------------------------------------- */

@media (max-width: 767.98px) {
  .post-media .post-media-single {
    height: 18rem;
  }

  .post-media .post-media-single.fit-img {
    max-height: 24rem;
  }

  .post-media .post-media-single.fit-img img {
    max-height: 23.5rem;
  }

  .post-media .gallery-img-2 {
    height: 14rem;
    gap: 0.25rem;
  }

  .post-media .gallery-img-3 {
    height: 16rem;
    gap: 0.25rem;
  }

  .post-media .post-media-more {
    font-size: 1.4rem;
  }

  .upload-modal-form .upload-modal-dropzone {
    padding: 80px 16px;
  }
}

@media (max-width: 575.98px) {
  .post-media .post-media-single {
    height: 15rem;
  }

  .post-media .gallery-img-2 {
    height: 11rem;
  }

  .post-media .gallery-img-3 {
    height: 13rem;
  }

  .upload-modal-form .upload-modal-dropzone {
    padding: 64px 14px;
  }
}