/* Corrections to the original theme styles. Loaded after them. */

/* Italic text (film and book titles) is set exactly like the surrounding
   text, only in italics. The phone theme shrank it to 12px, and its global
   `* { vertical-align: top !important }` lifted it above the baseline. */
.blog-item-short-desc em, .blog-item-short-desc i,
.movie_desc em, .movie_desc i,
.project_innner_information em, .project_innner_information i {
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline !important;
}

/* Awards (homepage and Awards page).
   Desktop: a grid of three per row (two at 1100px and narrower) instead of one
   1200px-wide image per row. Every award image is cropped to the same 3:2
   shape on desktop and phone, so rows line up. Award names 28px (phone 24px),
   level labels 13px (phone 12px). */
.award-img, .awards-grid img.award-img, .project_innner_information img.award-img { display: block; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; aspect-ratio: 3 / 2; object-fit: cover; }
.awards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 32px;
  max-width: 1200px;
  margin-left: auto; margin-right: auto;
  align-items: start;
}
.awards-grid > .news_item_path {
  width: auto !important; margin: 0 !important; padding: 0 !important;
  border-bottom: 0 !important;
}
.awards-grid .blog-item-top-image { width: 100% !important; max-width: none !important; }

/* Award card, centered, styled like the project cards: award name in the Card
   style (Figtree 600, white); level · year, project and client in the Meta
   style (Figtree 400, gray). Sizes follow the type system on desktop and phone. */
.award-card, .award-card > div { text-align: center !important; }
.award-card .blog-item-top-image { margin: 0 0 16px !important; }
.award-card .award-name {
  font-family: var(--sans); font-weight: 600; color: #fff;
  font-size: var(--card-size); line-height: var(--card-lh);
}
.award-card .award-level, .award-card .award-project, .award-card .award-meta {
  font-family: var(--sans); font-weight: var(--meta-weight); color: var(--gray);
  font-size: var(--meta-size); line-height: var(--meta-lh);
}
.award-card .award-level { margin-top: 4px; }
/* 8px more space between the award (level · year) and the work it was for. */
.award-card .award-project { margin-top: 8px; }
/* The work and client lines are 2px smaller than level · year (phone: 1px, 13px,
   to stay readable), so the card steps down: award name, level · year, then
   project and client. */
.award-card .award-project, .award-card .award-meta { font-size: calc(var(--meta-size) - 2px); }
:root.phone .award-card .award-project, :root.phone .award-card .award-meta { font-size: 13px; }
@media (max-width: 767px) { .award-card .award-project, .award-card .award-meta { font-size: 13px; } }

@media (max-width: 1100px) {
  .awards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Project grids (Experience Design, Media Production, and those sections on the
   homepage) use the same width and columns as the awards grid: up to 1200px,
   three per row (two at 1100px and narrower), 32px between columns. */
.work-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 32px;
  max-width: 1200px; width: 100% !important;
  margin-left: auto !important; margin-right: auto !important;
  align-items: start;
}
.work-grid > .project-item-list, .work-grid > .home__item {
  width: auto !important; max-width: none !important; float: none !important;
  margin: 0 !important; padding: 0 !important;
}
.work-grid .projects_list_itm, .work-grid .home__item_cont { width: auto !important; max-width: none !important; margin: 0 !important; }
.work-grid > div[style*="clear"] { display: none; }
@media (max-width: 1100px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ───────── Narrow desktop windows ─────────
   One page margin (gutter) that steps down with the window, a header that
   never collides, and grids that keep the gutter on both sides. */
:root { --gutter: 40px; }
@media (max-width: 1100px) { :root { --gutter: 32px; } }
@media (max-width: 767px)  { :root { --gutter: 20px; } }

/* Header: the old theme lays out the menu (left) and the icons (right) with
   absolute positions, so they overlap when the window is narrow.
   ≤1000px: hide Facebook / Instagram / LinkedIn (they are in the footer);
   ≤860px: tighter menu; ≤620px: the menu scrolls sideways instead of overlapping. */
.header_fixed { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; min-width: 0 !important; }
@media (max-width: 1000px) {
  .header_fixed_right .social-icons-item:not(:last-child) { display: none !important; }
}
@media (max-width: 860px) {
  .header_fixed_left_itm { margin-right: 14px !important; }
  .header_fixed_left_itm:first-child { margin-right: 18px !important; }
  .header_fixed_left_itm a { font-size: 15px !important; }
}
@media (max-width: 620px) {
  .header_fixed_left { right: 44px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
  .header_fixed_left::-webkit-scrollbar { display: none; }
}

/* Grids keep the gutter on both sides when the window is narrower than the grid. */
.awards-grid, .work-grid {
  width: min(1200px, calc(100vw - 2 * var(--gutter)), 100%) !important;
}
@media (max-width: 1100px) { .awards-grid, .work-grid { column-gap: 24px; } }

/* Section introductions (label, heading, paragraph) use the same gutter. */
.smart_content { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }

/* Page containers that set their own small side padding (0–20px) in the old
   theme use the shared gutter on narrower windows. */
@media (max-width: 1279px) {
  .companies-top-content, .about-top-content, .team-bottom-content,
  .main-footer-content, .movie_container {
    padding-left: var(--gutter) !important; padding-right: var(--gutter) !important;
  }
}