/*
 * pellicarnos-flex.css
 *
 * Optimized, mobile-first flexbox utilities for Pellicarnos theme.
 *
 * Key features:
 * - Individual flex-basis control per breakpoint
 * - Optional flex-wrap control per breakpoint
 * - Simple, intuitive naming
 *
 * @package    Pellicarnos
 * @author     Sky Design Studio Reklamy
 * @license    GPL-2.0-or-later
 * @version    1.1.0
 */

/* Flex gap variables */
:root {
  --flex-gap: 15px;
}
@media (min-width: 550px) {
  :root { --flex-gap: 1.5rem; }
}
@media (min-width: 1024px) {
  :root {--flex-gap: 25px; }
}

/* Core flex container */
.flex {
  display: flex;
  gap: var(--flex-gap);
}

/* Optional wrap control */
.flex-wrap  { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* Alignment utilities */
.jc-start   { justify-content: flex-start; }
.jc-center  { justify-content: center; }
.jc-end     { justify-content: flex-end; }
.jc-between { justify-content: space-between; }
.jc-around  { justify-content: space-around; }
.ai-start   { align-items: flex-start; }
.ai-center  { align-items: center; }
.ai-end     { align-items: flex-end; }
.ai-stretch { align-items: stretch; }

/* Direction utilities */
.fd-row         { flex-direction: row; }
.fd-row-reverse { flex-direction: row-reverse; }
.fd-col         { flex-direction: column; }
.fd-col-reverse { flex-direction: column-reverse; }

/* Base flex-basis columns */
.flex-col-1 > * { flex: 1 1 100%; }
.flex-col-2 > * { 	flex: 1 1 calc((100% - var(--flex-gap)) / 2); }
.flex-col-3 > * { 
	flex: 1 1 calc((100% - 2 * var(--flex-gap)) / 3);
	max-width: calc((100% - 2 * var(--flex-gap)) / 3);}
.flex-col-4 > * { flex: 1 1 calc((100% - 3 * var(--flex-gap)) / 4); }
.flex-col-6 > * { flex: 1 1 calc((100% - 5 * var(--flex-gap)) / 6); }

/* Responsive overrides (mobile-first) */
/* Base one-column available across all breakpoints */
/* Use .flex-col-1 > * to force single-column */

/* small: ≥599px */
@media (max-width: 599px) {
  .sm-flex-col-1 > * { 
  flex: 1 1 100%; 
  max-width: 100%;}
  .sm-flex-col-2 > * { flex: 1 1 calc((100% - var(--flex-gap)) / 2); }
  .sm-flex-col-3 > * { flex: 1 1 calc((100% - 2 * var(--flex-gap)) / 3); }
  .sm-flex-col-4 > * { flex: 1 1 calc((100% - 3 * var(--flex-gap)) / 4); }
  .sm-flex-wrap   { flex-wrap: wrap; }
}

/* medium: ≥768px */
@media (max-width: 799px) {
  .md-flex-col-1 > * { flex: 1 1 100%; }
  .md-flex-col-2 > * { flex: 1 1 calc((100% - var(--flex-gap)) / 2); }
  .md-flex-col-3 > * { 
	flex: 1 1 calc((100% - 2 * var(--flex-gap)) / 3);
	max-width: calc((100% - 2 * var(--flex-gap)) / 3);}
  .md-flex-col-4 > * { flex: 1 1 calc((100% - 3 * var(--flex-gap)) / 4); }
  .md-flex-wrap   { flex-wrap: wrap; }
}

/* large: ≥1024px */
@media (max-width: 1024px) {
  .lg-flex-col-1 > * { flex: 1 1 100%; }
  .lg-flex-col-2 > * { flex: 1 1 calc((100% - var(--flex-gap)) / 2); }
  .lg-flex-col-3 > * { flex: 1 1 calc((100% - 2 * var(--flex-gap)) / 3); }
  .lg-flex-col-4 > * { flex: 1 1 calc((100% - 3 * var(--flex-gap)) / 4); }
  .lg-flex-wrap   { flex-wrap: wrap; }
}