src/css/layout.css

/**
 * Apache Ignite Layout Utilities
 * Layout system extracted from legacy utils.css
 *
 * Provides container system, flexbox utilities, spacing utilities,
 * and positioning helpers for page layout.
 */

/* === Box Sizing === */
*,
::after,
::before {
  box-sizing: inherit;
}

/* === Container System === */
/* Responsive containers with max-widths at various breakpoints */

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

/* Small devices */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

/* Medium devices */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

/* Large devices */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

/* Extra large devices */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

/* XXL devices */
@media (min-width: 1300px) {
  .container {
    max-width: 1300px;
  }
}

/* === Flexbox Utilities === */

/* Base flex container with common defaults */
.flexi {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
}

/* === Spacing Utilities === */
/* Padding top utilities */

.pt-1,
.py-1 {
  padding-top: var(--ai-spacing-xs);
}

.pt-1x,
.py-1x {
  padding-top: var(--ai-spacing-sm);
}

.pt-2,
.py-2 {
  padding-top: var(--ai-spacing-md);
}

.pt-3,
.py-3 {
  padding-top: var(--ai-spacing-lg);
}

.pt-4,
.py-4 {
  padding-top: var(--ai-spacing-xl);
}

.pt-5,
.py-5 {
  padding-top: var(--ai-spacing-2xl);
}

/* Padding bottom utilities */

.pb-1,
.py-1 {
  padding-bottom: var(--ai-spacing-xs);
}

.pb-1x,
.py-1x {
  padding-bottom: var(--ai-spacing-sm);
}

.pb-2,
.py-2 {
  padding-bottom: var(--ai-spacing-md);
}

.pb-3,
.py-3 {
  padding-bottom: var(--ai-spacing-lg);
}

.pb-4,
.py-4 {
  padding-bottom: var(--ai-spacing-xl);
}

.pb-5,
.py-5 {
  padding-bottom: var(--ai-spacing-2xl);
}

/*
 * PHASE 3 OPTIMIZATION: Responsive spacing media queries removed.
 * All spacing utilities now use fluid clamp() values that automatically
 * scale with viewport size. No breakpoint-specific overrides needed.
 */

/* === Scroll to Top Button === */

.scrollTop {
  display: flex;
  pointer-events: none;
  width: 50px;
  height: 50px;
  background-color: var(--ai-blue);
  border-radius: var(--ai-radius-md);
  position: fixed;
  opacity: 0.8;
  right: 15px;
  bottom: 15px;
  transition: transform var(--ai-transition-slow), opacity var(--ai-transition-slow);
  transform: translateY(10px);
  opacity: 0;
  z-index: var(--ai-z-fixed);
}

.scrollTop.active {
  pointer-events: auto;
  transform: translateY(0);
  opacity: 1;
}

.scrollTop svg {
  stroke: var(--ai-text-inverse);
  display: block;
  margin: auto;
  width: 50%;
  transform: translateY(-1px);
}

/* === JavaScript Utility Classes === */

/* Collapsible/expandable content container */
.jsOpener {
  height: 0;
  transition: height var(--ai-transition-slower);
  overflow: hidden;
}

/* Toggle visibility utilities */
*[data-hideopen] span {
  display: none;
}

*[data-hideopen].isopen span {
  display: block;
}

*[data-hideopen].isopen i {
  display: none;
}

/* === Dash List === */
/* List style with dash bullets */

.dashlist {
  padding-left: 3rem;
}

.dashlist li {
  position: relative;
  list-style-position: outside;
  padding-left: var(--ai-spacing-xs);
  margin-bottom: var(--ai-spacing-xs);
}

@media (max-width: 767px) {
  .dashlist li {
    margin-bottom: 5px;
  }
}

/* === Picture Wrapper === */
/* Centered image container with background */

.picwrap {
  background: var(--ai-bg-secondary);
  border-radius: var(--ai-radius-md);
  padding: 6rem 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.picwrap img {
  display: block;
  margin: auto;
}

/* === Arrow Link === */
/* Link with animated arrow */

.arrowlink {
  position: relative;
  display: inline-block;
  padding-right: 2.2rem;
}

.arrowlink::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: -0.7rem;
  /* Arrow icon will be added when images are migrated in later work packages */
  /* background: url(../img/usecases/arrow.svg) no-repeat; */
  background-size: contain;
  color: var(--ai-link);
  transition: transform var(--ai-transition-normal);
}

.arrowlink:hover::after {
  transform: translateX(2px);
}

@media (max-width: 767px) {
  .arrowlink::after {
    width: 10px;
    height: 10px;
  }
}