/*=================================================
  KR Info Solutions — our-community.html stylesheet
  Rebuild of https://krinfosolutions.com/gallery/
  (the nav's "Our Community" entry points at /gallery/)

  Loaded AFTER css/style.css, which supplies the shared
  design tokens, reset, container/grid, header, nav,
  footer, title-area and the .industry-* tabs component
  (shared with the homepage). This file holds only what
  is specific to the Our Community page. Prefix: .oc-

  All values taken from the live theme stylesheet and
  the live Elementor page CSS (post-7053), not estimated.
=================================================*/

/* NOTE: as on the services page, the live site prints an empty
   `.breadcumb-wrapper` band above the hero. It is dead space with no
   content and was dropped at the client's request — the hero starts
   directly under the header. */

/* ---------- Page hero ----------
   Identical treatment to the services page: bg2.png, 50% black overlay,
   min-height 400 / 300 / 280px, Roboto 60px/600 white title. */
.oc-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px 0;
  background-image: url("../assets/images/bg2.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.oc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--black-color);
  opacity: 0.5;
}
.oc-hero .container { position: relative; z-index: 2; }
.oc-hero-title {
  font-family: var(--body-font);
  font-size: 60px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white-color);
  text-align: center;
  margin: 0 0 10px 0;
}
.oc-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.oc-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--white-color);
}
.oc-breadcrumb a { color: var(--white-color); }
.oc-breadcrumb a:hover { color: var(--accent-orange); }
.oc-breadcrumb .sep { width: 14px; height: 14px; flex: none; color: var(--accent-orange); }

/* ---------- Section labels ----------
   All three `.sub-title3` labels on this page are overridden to brand orange
   in the live Elementor page CSS (widgets 92c055d / 5824883 / 6ee8deb). The
   short rules either side stay --theme-color purple, and the shared
   `.sub-title3` rule in style.css supplies them. The homepage has no such
   override, so its "had a view" label stays purple — that matches live. */
.oc-events .sub-title3,
.oc-proud .sub-title3,
.oc-industries .sub-title3 { color: var(--accent-orange); }

/* ---------- Events & Gallery ----------
   Live container has `margin-top: 50px`. The carousel is an Elementor
   image-carousel: 4 / 3 / 2 slides, 20px spacing, 20px image radius,
   infinite autoplay with no arrows or dots. Reproduced as a seamless
   marquee — the same approach already used for the homepage brand strip,
   since the live autoplay delay (600ms) is shorter than its transition
   (900ms), which renders as continuous motion rather than stepping.
   Slide widths are set in js/main.js so 4 / 3 / 2 fit the container. */
.oc-events { padding: var(--inner-section-space) 0; }
/* Sits inside `.container` — the live container is `e-con-boxed`, i.e. the
   standard 1140px width, so the strip is NOT full-bleed. */
.oc-gallery {
  overflow: hidden;
  width: 100%;
  margin-top: 10px;
}
.oc-gallery-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  /* Stepping is driven from js/main.js: it holds for 2s, then slides.
     The transition is applied there and cleared for the silent wrap. */
  will-change: transform;
}
.oc-gallery-item { flex: 0 0 auto; }
/* Source photos are a mix of portrait and landscape, so a fixed 4:3 box with
   `object-fit: cover` keeps every slide the same width and height. */
.oc-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
}

/* ---------- Proud Moment ----------
   The live container is `flex-direction: column-reverse`, so its title
   widget (last in the DOM) renders above the media row. Written in
   natural order here instead. Live spacing was `margin-top: 80px`; it now
   uses the shared inner-page section rhythm like every other section. */
.oc-proud { padding: var(--inner-section-space) 0; }
.oc-proud-row {
  display: flex;
  align-items: flex-start;
  /* Elementor's default container gap. */
  gap: 20px;
}
.oc-proud-video { flex: 1 1 auto; min-width: 0; }
/* THE ROW HEIGHT COMES FROM THE VIDEO, NOT THE IMAGES.
   Live sets `--video-aspect-ratio: 1.77777` on the video wrapper, so the
   video is 16:9 and its width determines its height. Do not give the video
   `height: 100%` — that inverts the relationship and makes the whole
   section far too tall. */
.oc-proud-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
}
/* The image column is declared 37% on live but shrinks: the two images keep
   their natural aspect ratios (Kr.png 515x431, kr1.png 402x348) and together
   stack to exactly the video's height. Solving
   w/1.195 + w/1.155 + gap = (container - gap - w) / 1.7778
   gives w = 23.6% of the row, which is what live actually renders. Because
   both sides scale linearly with the container, the match holds at any width. */
.oc-proud-imgs {
  flex: 0 0 23.6%;
  max-width: 23.6%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.oc-proud-imgs img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  display: block;
}

/* ---------- Industries We Serve ----------
   Uses the shared .industry-* tabs component from style.css — the live
   homepage and this page run the identical widget with the identical
   11 tabs / 64 items. Live spacing was `padding: 120px 0 0`; now on the
   shared inner-page section rhythm. */
.industries-sec.oc-industries {
  padding: var(--inner-section-space) 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .oc-hero { min-height: 300px; }
}
@media (max-width: 767px) {
  .oc-hero { min-height: 280px; }
  .oc-hero-title { font-size: 40px; }
  .oc-breadcrumb li { font-size: 15px; }
  /* Live wraps the media row, turns the image column into a row and drops
     the corner radius to 5px. */
  .oc-proud-row { flex-wrap: wrap; }
  .oc-proud-video { flex: 1 1 100%; }
  .oc-proud-imgs {
    flex: 1 1 100%;
    max-width: 100%;
    flex-direction: row;
    align-items: flex-start;
  }
  .oc-proud-imgs img { border-radius: 5px; width: 50%; }
  .oc-proud-video video { border-radius: 5px; }
}