/* ----------------------------------------------------------
   ADM NEWS — DESKTOP POST (FINAL COMPLETE SHEET)
   16:9 grey frame + 90% image + spot‑zoom + cursors
   ---------------------------------------------------------- */

@media (min-width: 992px) {

  /* 1. 16:9 GREY FRAME (MASTER CONTAINER) */
  .single .entry-thumbnail-area {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;        /* FIXED GEOMETRY */
    background-color: #e5e5e5;   /* GREY FRAME */
    overflow: hidden;            /* IMAGE STAYS INSIDE */
    border-radius: 2px;
    margin: 30px auto;
    cursor: url(https://abudhabimagazine.ae/wp-content/uploads/2026/01/icons8-zoom-in-24.png) 16 16, zoom-in;
  }

  /* 2. IMAGE INSIDE FRAME (90% × 90%) */
  .single .entry-thumbnail-area img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 90% !important;
    height: 90% !important;
    object-fit: contain !important;
		/* DESKTOP = COVER */
    object-position: center !important;
    transform-origin: center center;
    transition: transform 0.35s ease-out;
    z-index: 2;

    cursor: url(https://abudhabimagazine.ae/wp-content/uploads/2026/01/icons8-zoom-in-24.png) 16 16, zoom-in;
  }
}

/* --------------------------------------------- */
/* ARCHIVE THUMBNAILS — IMAGE DISPLAY ONLY      */
/* --------------------------------------------- */

.archive .adm-thumb-img,
.blog .adm-thumb-img,
.category .adm-thumb-img,
.rt-post-grid .adm-thumb-img,
.rt-post-list .adm-thumb-img,
.rt-related-post .adm-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* Landscape fills box */
  object-position: center;
  z-index: 1;
}

/* Portrait or square images */
.archive .adm-thumb-img[data-orientation="portrait"],
.archive .adm-thumb-img[data-orientation="square"],
.blog .adm-thumb-img[data-orientation="portrait"],
.blog .adm-thumb-img[data-orientation="square"],
.category .adm-thumb-img[data-orientation="portrait"],
.category .adm-thumb-img[data-orientation="square"],
.rt-post-grid .adm-thumb-img[data-orientation="portrait"],
.rt-post-grid .adm-thumb-img[data-orientation="square"],
.rt-post-list .adm-thumb-img[data-orientation="portrait"],
.rt-post-list .adm-thumb-img[data-orientation="square"],
.rt-related-post .adm-thumb-img[data-orientation="portrait"],
.rt-related-post .adm-thumb-img[data-orientation="square"] {
  object-fit: contain;        /* Portrait & square contained with adaptive color */
}

/* ----------------------------------------------------------
   ADM NEWS — MOBILE POST (FINAL COMPLETE SHEET)
   4:3 grey frame + 90% image + tap‑zoom
   ---------------------------------------------------------- */

@media (max-width: 991px) {

  /* 1. 4:3 GREY FRAME (MASTER CONTAINER) */
  .single .entry-thumbnail-area {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;          /* FIXED GEOMETRY */
    background-color: #e5e5e5;    /* GREY FRAME */
    overflow: hidden;             /* IMAGE STAYS INSIDE */
    border-radius: 2px;
    margin: 20px auto;

    cursor: default !important;
  }

  /* 2. IMAGE INSIDE FRAME (90% × 90%) */
  .single .entry-thumbnail-area img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 90% !important;
    height: 90% !important;
    object-fit: cover !important;       /* MOBILE = COVER */
    object-position: center !important;
    transform-origin: center center;
    transition: transform 0.35s ease-out;
    z-index: 2;

    pointer-events: auto; /* TAP TARGET */
  }
}


/* ----------------------------------------------------------
   GLOBAL TRANSITION (NO SIZING HERE)
   ---------------------------------------------------------- */

.single .entry-thumbnail-area img {
  transition: transform 0.25s ease-out;
  will-change: transform;
}


/* ----------------------------------------------------------
   POINTER‑EVENTS SAFETY (DESKTOP + MOBILE)
   ---------------------------------------------------------- */

.single .entry-thumbnail-area * {
  pointer-events: none;
}

.single .entry-thumbnail-area img {
  pointer-events: auto;
}


/* CLICK FIX — Ensure zoom triggers on the image (desktop) */
@media (min-width: 992px) {

  .single .entry-thumbnail-area * {
    pointer-events: none;
  }

  .single .entry-thumbnail-area img {
    pointer-events: auto;
  }
}


/* ----------------------------------------------------------
   ADM ZOOM + HI‑RES + STATIC GLARE (INTEGRATED)
   ---------------------------------------------------------- */

/* Zoom state (spot‑zoom, no panning) */
.single .entry-thumbnail-area.adm-zoom-active img {
  cursor: zoom-out;
}

/* Hi‑res overlay */
.adm-zoom-hires {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  max-width: none;
  max-height: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  z-index: 4;
}

.adm-zoom-hires.adm-zoom-hires-visible {
  opacity: 1;
}

/* --------------------------------------------- */
/* UNIVERSAL 16:9 FRAME (ADM THUMB BOX)         */
/* --------------------------------------------- */

.adm-thumb-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #e5e5e5; /* Neutral grey frame */
}

/* --------------------------------------------- */
/* ARCHIVE THUMBNAILS — FULL COVER + DARKENING   */
/* --------------------------------------------- */

@media (min-width: 992px) {

    /* Desktop archive thumbnail box */
    .archive .adm-thumb-box,
    .blog .adm-thumb-box,
    .category .adm-thumb-box,
    .rt-post-grid .adm-thumb-box,
    .rt-post-list .adm-thumb-box,
    .rt-related-post .adm-thumb-box {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background-color: #e5e5e5;
    }

    /* Images inside the box */
    .archive .adm-thumb-img,
    .blog .adm-thumb-img,
    .category .adm-thumb-img,
    .rt-post-grid .adm-thumb-img,
    .rt-post-list .adm-thumb-img,
    .rt-related-post .adm-thumb-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;          /* Landscape fills box */
        object-position: center;
        z-index: 0;                 /* Behind gradient */
    }

    /* Portrait/square images → contain with adaptive color */
    .archive .adm-thumb-img[data-orientation="portrait"],
    .archive .adm-thumb-img[data-orientation="square"],
    .blog .adm-thumb-img[data-orientation="portrait"],
    .blog .adm-thumb-img[data-orientation="square"],
    .category .adm-thumb-img[data-orientation="portrait"],
    .category .adm-thumb-img[data-orientation="square"],
    .rt-post-grid .adm-thumb-img[data-orientation="portrait"],
    .rt-post-grid .adm-thumb-img[data-orientation="square"],
    .rt-post-list .adm-thumb-img[data-orientation="portrait"],
    .rt-post-list .adm-thumb-img[data-orientation="square"],
    .rt-related-post .adm-thumb-img[data-orientation="portrait"],
    .rt-related-post .adm-thumb-img[data-orientation="square"] {
        object-fit: contain;
        z-index: 0; /* Behind gradient */
    }

    /* Gradient overlay — on top of the image */
    .archive .adm-thumb-box::after,
    .blog .adm-thumb-box::after,
    .category .adm-thumb-box::after,
    .rt-post-grid .adm-thumb-box::after,
    .rt-post-list .adm-thumb-box::after,
    .rt-related-post .adm-thumb-box::after {
        content: "";
        position: absolute;
        inset: 2;
        background: inherit; /* use theme’s gradient */
        z-index: 0;           /* above the image */
        pointer-events: none;
    }
}

/* ------------------------------------------------------ */
/* FORCE UNIFORM 4:3 BOX EVEN IF IMAGE IS SMALL           */
/* ------------------------------------------------------ */

.rt-post-grid-default .rt-item .rt-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #e5e5e5;

  min-height: 0 !important;
  min-width: 0 !important;
  height: auto !important;
}

/* Make the image fill the box */
.rt-post-grid-default .rt-item .rt-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 767px) {
  .rt-post-grid-default .rt-item {
    margin-bottom: 20px;
  }

  .rt-post-grid-default .rt-item .entry-title a {
    -webkit-line-clamp: 2;
  }
}


/* ------------------------------------------------------ */
/* MOBILE ARCHIVE — LIMIT TITLES TO ~10 WORDS             */
/* ------------------------------------------------------ */

@media (max-width: 767px) {

  .archive .entry-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;     /* ≈ 10 words on mobile */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
}

/* ---------------------------- */
/* Elementor Home Page Thumbnails */
/* ---------------------------- */

/* Elementor post thumbnail wrapper */
.elementor-post .elementor-post__thumbnail {
    position: relative;
    overflow: hidden;
    background-color: #e5e5e5; /* adaptive color fills extra space */
    aspect-ratio: 4 / 3;        /* default for landscape posts */
}

/* Default: all images fill the box */
.elementor-post .wp-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* landscape fills box */
    object-position: center;
}

/* Portrait or square images — mark manually in WP or use a class like `.portrait` or `.square` */
.elementor-post .wp-post-image.portrait,
.elementor-post .wp-post-image.square {
    object-fit: contain;
}