/* ============================================================
   MAKON MEDIA CONTRACT V1 — PUBLIC DISPLAY GUARANTEE
   2026-08-23

   Principle:
   The business media editor owns the crop. Public cards may scale
   the authored frame, but must never crop/zoom/reposition it again.

   Canonical frames:
   - listing / food / drink / product / pharmacy / service / procedure / activity: 4:3
   - car / room / office / event: 16:9
   - cinema poster: 2:3
   - master / avatar: 1:1

   This file is intentionally loaded LAST on public pages.
   It does NOT alter grids, card widths, typography, buttons or navigation.
   ============================================================ */

/* Shared image guarantee: never zoom a normalized business asset again. */
:is(
  body.home-page .home-card-media > img,
  body.overview-page .overview-card .media-wrap > img,
  body.afisha-page .event-card-media > img,
  body.event-detail-page .event-detail-cover > img,
  body.section-products-page .product-card-media > img,
  body.detail-page .catalog-product-image > img,
  body.detail-page .detail-menu-card-media > img,
  body.detail-page .room-card-photo > img,
  body.detail-page #carsContainer .car-photo > img,
  body.detail-page .service-card-client > img,
  body.detail-page .master-card-client > img,
  body.detail-page .movie-card-client > img,
  body.detail-page .movie-detail-poster > img
) {
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* Neutral canvas is visible only for legacy/non-normalized images. */
:is(
  body.home-page .home-card-media,
  body.overview-page .overview-card .media-wrap,
  body.afisha-page .event-card-media,
  body.event-detail-page .event-detail-cover,
  body.section-products-page .product-card-media,
  body.detail-page .catalog-product-image,
  body.detail-page .detail-menu-card-media,
  body.detail-page .room-card-photo,
  body.detail-page #carsContainer .car-photo,
  body.detail-page .movie-detail-poster
) {
  background: #f5f7f5 !important;
  overflow: hidden !important;
}

/* ------------------------------------------------------------
   HOME — company/listing photo is authored as 800x600 (4:3).
   Keep the existing card/grid; only media height follows its ratio.
   ------------------------------------------------------------ */
body.home-page .home-card-media {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}

body.home-page .home-card-media > img,
body.home-page .home-card-media .no-image {
  width: 100% !important;
  height: 100% !important;
}

/* ------------------------------------------------------------
   OVERVIEW — each rail follows the authoring contract.
   ------------------------------------------------------------ */
body.overview-page :is(
  #overviewFood,
  #overviewProducts,
  #overviewPharmacy,
  #overviewServices,
  #overviewProcedures,
  #overviewActivities
) .media-wrap {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}

body.overview-page :is(
  #overviewCars,
  #overviewRooms,
  #overviewOffices,
  #overviewEvents
) .media-wrap {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
}

/* Cinema artwork is authored as a vertical 900x1350 poster. */
body.overview-page #overviewCinema .movie-card .media-wrap {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2 / 3 !important;
}

body.overview-page .overview-card .media-wrap > img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

/* Preserve the compact V42.5/V42.6 tablet rails, fix ONLY their media frame. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.overview-page #overviewRooms .room-card .media-wrap,
  body.overview-page #overviewEvents .event-card-flat .media-wrap {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.overview-page #overviewRooms .room-card .media-wrap > img,
  body.overview-page #overviewEvents .event-card-flat .media-wrap > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
}

/* ------------------------------------------------------------
   AFISHA — business event editor exports 1600x900 (16:9).
   ------------------------------------------------------------ */
body.afisha-page .event-card-media,
body.event-detail-page .event-detail-cover {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
}

body.afisha-page .event-card-media > img,
body.event-detail-page .event-detail-cover > img {
  width: 100% !important;
  height: 100% !important;
}

/* ------------------------------------------------------------
   OVERVIEW SECTION PAGES
   Default cards are 4:3; module-specific media keeps its own ratio.
   ------------------------------------------------------------ */
body.section-products-page .product-card-media {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}

body.section-products-page[data-section-module="cars"] .product-card-media,
body.section-products-page[data-section-module="rooms"] .product-card-media,
body.section-products-page[data-section-module="offices"] .product-card-media,
body.section-products-page[data-section-module="office"] .product-card-media {
  aspect-ratio: 16 / 9 !important;
}

body.section-products-page[data-section-module="cinema"] .product-card-media {
  aspect-ratio: 2 / 3 !important;
}

body.section-products-page .product-card-media > img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

/* ------------------------------------------------------------
   COMPANY DETAIL — preserve authored media without touching layout.
   ------------------------------------------------------------ */
/* Catalog products / pharmacy: 4:3 */
body.detail-page .catalog-product-image {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}

/* Menu and drinks: 4:3 on every breakpoint, including the later V22 mobile rule. */
body.detail-page .detail-menu-card-media {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}

body.detail-page .detail-menu-card-media > img {
  width: 100% !important;
  height: 100% !important;
}

/* Rental cars: 16:9 */
body.detail-page #carsContainer .car-photo {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
}

body.detail-page #carsContainer .car-photo > img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

/* Rooms and offices: 16:9 */
body.detail-page #roomsContainer .room-card-detail:not(.procedure-card-detail):not(.activity-card-detail) .room-card-photo,
body.detail-page #officeContainer .office-space-detail .room-card-photo {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
}

/* Procedures and leisure/sport resources: 4:3 */
body.detail-page #proceduresContainer .procedure-card-detail .room-card-photo,
body.detail-page #activityContainer .activity-card-detail .room-card-photo {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}

body.detail-page .room-card-photo > img {
  width: 100% !important;
  height: 100% !important;
}

/* Services keep their existing compact thumbnail geometry; only stop cropping it. */
body.detail-page .service-card-client > img {
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  background: #f5f7f5 !important;
}

/* Masters are authored square and already displayed as compact avatars. */
body.detail-page .master-card-client > img {
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Cinema: poster card and detail poster are always 2:3. */
body.detail-page .movie-card-client > img,
body.detail-page .movie-no-poster {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2 / 3 !important;
}

body.detail-page .movie-detail-poster {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2 / 3 !important;
}

body.detail-page .movie-detail-poster > img {
  width: 100% !important;
  height: 100% !important;
}

/* Dark mode canvas only; media/content geometry stays identical. */
body.dark :is(
  .home-card-media,
  .overview-card .media-wrap,
  .event-card-media,
  .event-detail-cover,
  .product-card-media,
  .catalog-product-image,
  .detail-menu-card-media,
  .room-card-photo,
  #carsContainer .car-photo,
  .movie-detail-poster
),
body.dark-theme :is(
  .home-card-media,
  .overview-card .media-wrap,
  .event-card-media,
  .event-detail-cover,
  .product-card-media,
  .catalog-product-image,
  .detail-menu-card-media,
  .room-card-photo,
  #carsContainer .car-photo,
  .movie-detail-poster
) {
  background: #181b18 !important;
}

/* ============================================================
   MAKON MEDIA CONTRACT V1.1 — PRIVATE / CONTROL SURFACES
   2026-08-23

   Extends the same rule to User, Business, Courier and Admin UI:
   a normalized business image may scale, but must never be cropped again.
   This block intentionally does not change grids, typography, actions,
   navigation, forms or business logic.
   ============================================================ */

/* ------------------------------------------------------------
   BUSINESS PROFILE
   ------------------------------------------------------------ */
body.business-profile-page :is(
  .business-listing-media,
  .company-mini-media,
  .menu-card-media,
  #businessPostsList .business-post-card,
  #catalogProductsList .business-post-card,
  #pharmacyMedicinesList .business-post-card,
  #roomsList .business-post-card,
  #proceduresList .business-post-card,
  #activityResourcesList .business-post-card,
  #officeSpacesList .business-post-card,
  #carsList .car-card,
  #servicesList .service-card,
  #cinemaMoviesList .movie-card,
  .business-event-thumb,
  .business-event-cover-preview,
  .business-event-preview-panel
) {
  min-width: 0;
}

body.business-profile-page :is(
  .business-listing-media > img,
  .company-mini-media > img,
  .menu-card-media > img,
  #businessPostsList .business-post-card > img,
  #catalogProductsList .business-post-card > img,
  #pharmacyMedicinesList .business-post-card > img,
  #roomsList .business-post-card > img,
  #proceduresList .business-post-card > img,
  #activityResourcesList .business-post-card > img,
  #officeSpacesList .business-post-card > img,
  #carsList .car-card > img,
  #servicesList .service-card > img,
  #mastersList .master-card > img,
  #cinemaMoviesList .movie-card > img,
  .movie-bookings-poster img,
  .business-event-thumb img,
  .business-event-cover-preview img,
  .business-event-preview-cover,
  .car-request-media img
) {
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: #f5f7f5 !important;
}

/* Listing / menu / post / product / medicine / service / procedure / activity: 4:3 */
body.business-profile-page :is(
  .business-listing-media,
  .company-mini-media,
  .menu-card-media
) {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: #f5f7f5 !important;
}

body.business-profile-page :is(
  #businessPostsList .business-post-card > img,
  #catalogProductsList .business-post-card > img,
  #pharmacyMedicinesList .business-post-card > img,
  #proceduresList .business-post-card > img,
  #activityResourcesList .business-post-card > img,
  #servicesList .service-card > img
) {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}

body.business-profile-page :is(
  .business-listing-media > img,
  .company-mini-media > img,
  .menu-card-media > img
) {
  width: 100% !important;
  height: 100% !important;
}

/* Cars / rooms / offices / events: 16:9 */
body.business-profile-page :is(
  #carsList .car-card > img,
  #roomsList .business-post-card > img,
  #officeSpacesList .business-post-card > img,
  .business-event-cover-preview,
  .business-event-preview-cover
) {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
}

body.business-profile-page .business-event-cover-preview {
  overflow: hidden !important;
  background: #f5f7f5 !important;
}

body.business-profile-page .business-event-cover-preview > img {
  width: 100% !important;
  height: 100% !important;
}

body.business-profile-page .business-event-preview-cover {
  width: 100% !important;
  height: auto !important;
}

/* Event list thumbnail stays compact; only cropping is disabled. */
body.business-profile-page .business-event-thumb img,
body.business-profile-page .car-request-media img,
body.business-profile-page .movie-bookings-poster img {
  width: 100% !important;
  height: 100% !important;
}

/* Masters: 1:1 */
body.business-profile-page #mastersList .master-card > img {
  aspect-ratio: 1 / 1 !important;
}

/* Cinema: 2:3 */
body.business-profile-page #cinemaMoviesList .movie-card > img,
body.business-profile-page #cinemaMoviesList .movie-no-poster {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2 / 3 !important;
}

/* ------------------------------------------------------------
   USER PROFILE
   ------------------------------------------------------------ */
body.user-profile-page :is(
  .favorite-img,
  .item-detail-image img,
  .activity-media img
) {
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: #f5f7f5 !important;
}

/* Favorites are listing cards: 4:3. */
body.user-profile-page .favorite-img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}

/* Small order item thumbnail remains square, but never crops menu/product media. */
body.user-profile-page .item-detail-image img {
  width: 100% !important;
  height: 100% !important;
}

/* Booking/service and table cards keep their existing card height; no crop. */
body.user-profile-page :is(
  .booking-activity-card .activity-media,
  .table-activity-card .activity-media
) {
  overflow: hidden !important;
  background: #f5f7f5 !important;
}

body.user-profile-page :is(
  .booking-activity-card .activity-media img,
  .table-activity-card .activity-media img
) {
  width: 100% !important;
  height: 100% !important;
}

/* Cinema poster: 2:3. */
body.user-profile-page .cinema-activity-card .poster-media {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2 / 3 !important;
  overflow: hidden !important;
  background: #f5f7f5 !important;
}

body.user-profile-page .cinema-activity-card .poster-media img {
  width: 100% !important;
  height: 100% !important;
}

/* Rental car: 16:9. */
body.user-profile-page .car-activity-card .car-media {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #f5f7f5 !important;
}

body.user-profile-page .car-activity-card .car-media img {
  width: 100% !important;
  height: 100% !important;
}

/* ------------------------------------------------------------
   COURIER PROFILE
   Listing/company/application imagery is the same normalized 4:3 listing media.
   ------------------------------------------------------------ */
body.courier-profile-page :is(
  .listing-card-image,
  .application-image,
  .business-image
) {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: #f5f7f5 !important;
}

body.courier-profile-page :is(
  .listing-card-image img,
  .application-image img,
  .business-image img,
  .order-item-tag img,
  .item-chip-img
) {
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: #f5f7f5 !important;
}

body.courier-profile-page :is(
  .listing-card-image img,
  .application-image img,
  .business-image img
) {
  width: 100% !important;
  height: 100% !important;
}

/* Courier transport photo is a landscape asset; preserve full frame. */
body.courier-profile-page .vehicle-photo {
  overflow: hidden !important;
  background: #f5f7f5 !important;
}
body.courier-profile-page .vehicle-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* ------------------------------------------------------------
   ADMIN CONTROL PANEL
   ------------------------------------------------------------ */
/* Main listing cards are canonical 4:3 instead of the legacy 16:10 crop. */
body.admin-page .admin-card-media {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: #f5f7f5 !important;
}

body.admin-page .admin-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* Listing modal and menu library are already 4:3; make the contract explicit. */
body.admin-page :is(
  .admin-listing-summary-photo,
  .admin-menu-library-media
) {
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: #f5f7f5 !important;
}

body.admin-page :is(
  .admin-listing-summary-photo img,
  .admin-menu-library-media img
) {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* Older listing detail surfaces inside admin. */
body.admin-page .detail-hero img,
body.admin-page .detail-item img {
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: #f5f7f5 !important;
}

/* Finance company thumbnails remain compact/square but do not crop listing media. */
body.admin-page .finance-company-photo img {
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: #f5f7f5 !important;
}

/* Event moderation/preview: authored as 16:9. */
body.admin-page .event-moderation-cover {
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #f5f7f5 !important;
}
body.admin-page .event-moderation-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: #f5f7f5 !important;
}
body.admin-page .admin-event-preview-cover {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  background: #f5f7f5 !important;
}

/* Advertising creative is already authored to its exact preview ratios.
   Do not alter its geometry; only block accidental secondary zoom. */
body.admin-page .ad-admin-preview img {
  object-position: center center !important;
  transform: none !important;
}

/* Dark canvas only; geometry stays identical. */
body.dark.business-profile-page :is(
  .business-listing-media,
  .company-mini-media,
  .menu-card-media,
  .business-event-cover-preview
),
body.dark-theme.business-profile-page :is(
  .business-listing-media,
  .company-mini-media,
  .menu-card-media,
  .business-event-cover-preview
),
body.dark.user-profile-page :is(.activity-media, .item-detail-image),
body.dark-theme.user-profile-page :is(.activity-media, .item-detail-image),
body.dark.courier-profile-page :is(.listing-card-image, .application-image, .business-image, .vehicle-photo),
body.dark-theme.courier-profile-page :is(.listing-card-image, .application-image, .business-image, .vehicle-photo),
body.dark.admin-page :is(.admin-card-media, .admin-listing-summary-photo, .admin-menu-library-media, .event-moderation-cover),
body.dark-theme.admin-page :is(.admin-card-media, .admin-listing-summary-photo, .admin-menu-library-media, .event-moderation-cover) {
  background: #181b18 !important;
}

/* ============================================================
   MAKON MEDIA CONTRACT V1.2 — DETAIL COMPANY HERO
   The main Listing.photo is authored as 4:3. The decorative blurred backdrop
   is intentionally excluded: it may use cover, while the real image may not.
   ============================================================ */
body.detail-page .detail-company-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}