/*
Theme Name: Bricks Child
Template: bricks
Version: 1.0.0
*/

/* =========================================================
   Studio starter CSS pro Bricks (tokens + utility + components)
   Vlož do: Bricks → Nastavení → Vlastní kód → CSS
   ========================================================= */


body {
  font-family: "Urbanist", sans-serif;

}

/* -------------------------
   1) Design tokens (globální proměnné)
   ------------------------- */
:root {
  /* Layout */
  --container-max: 980px;
  --container-pad-x: 20px;
  --bg-logo-url: url("https://s60dam.fra1.cdn.digitaloceanspaces.com/tajemstvi-neexistuje/web/qf_logo_tile_opacity-20.png");
  /* Spacing */
  --space-header-y: 20px;
  --space-section-y: 80px;

  /* Radius & shadow */
  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 24px;

  --shadow-s: 0 6px 18px rgba(0, 0, 0, 0.12);
  --shadow-m: 0 12px 32px rgba(0, 0, 0, 0.18);

  /* Gradients */
  --bg-gradient-main: linear-gradient(90deg, #3f3d7a 0%, #2f7fa8 100%);
  --bg-gradient-main-horizontal: linear-gradient(0deg, #3f3d7a 0%, #2f7fa8 100%);
  --bg-gradient-soft: linear-gradient(180deg, #ffffff 0%, #eaf6ff 100%);

  /* Colors (volitelné – když chceš používat i v CSS) */
  --color-text-on-dark: #ffffff;
  --color-text-on-light: #0f172a;
  --color-card-bg: rgba(255, 255, 255, 0.08);
  --color-border-soft: rgba(255, 255, 255, 0.18);

  --btn-gradient: linear-gradient(0deg, #2f7fa8 0%, #3f3d7a 100%);

}

.c-btn-gradient, .bricks-button {
  background: var(--btn-gradient) !important;
  color: #fff !important;
  border: none;

  background-size: 200% 200%;
  background-position: 0% 0%;

  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    background-position 400ms ease;
}

.c-btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
  background-position: 100% 50%;
}
/* -------------------------
   2) Utilities (u-*)
   ------------------------- */

/* Full-width background gradients */
.u-bg-gradient {
  background: var(--bg-gradient-main);
}
.u-bg-gradient-horizontal {
  background: var(--bg-gradient-main-horizontal);
}
.u-bg-soft {
  background: var(--bg-gradient-soft);
}

/* Container (centered, max-width) */
.u-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad-x);
  padding-right: var(--container-pad-x);
}

.u-container-inner {
	padding: 20px;
}
/* karta */
.u-container-project{
  box-shadow: var(--shadow-s);
  border: 1px solid var(--color-border-soft);
  display: flex;
  flex-direction: column;
  min-height: 500px;
  height: 100%;
  text-align: center;
  padding: 2rem 20px;
	 background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.u-container-project .u-card-head,
.u-container-project .u-card-body,
.u-container-project .u-card-foot{
  width: 100%;  
}

.u-container-project .u-card-head{
  height: 240px;              /* ← PEVNÁ výška */
  flex: 0 0 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-container-project .u-card-head img {

  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.3));
}

.u-container-project .u-card-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
	font-size: 1.8rem;
}

.u-container-project .u-card-foot{
  margin-top: auto;
  align-items: center;        /* VERTIKÁLNÍ střed */
  justify-content: center;   
}

/* společný základ pro všechny varianty */
.brxe-button.btn-kt,
.brxe-button.btn-learnia,
.brxe-button.btn-betrue,
.brxe-button.btn-bp,
.brxe-button.btn-nogames,
.brxe-button.btn-aetv{
  border: 0;
  color: #fff;
	font-size: 2rem;
  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.3));
}

/* 1) Kvantová terapie (fialová) */
.brxe-button.btn-qt{
  background: linear-gradient(0deg, #5b2a86, #3b1b5a) !important;
}

/* 2) Learnia (zlatá) */
.brxe-button.btn-learnia{
  background: linear-gradient(0deg, #c9a34a, #8a6b1f) !important;
}

/* 3) BeTrue (modrá) */
.brxe-button.btn-betrue{
  background: linear-gradient(0deg, #3b82f6, #1d4ed8) !important;
}

/* 4) Byznys parťák (červená) */
.brxe-button.btn-bp{
  background: linear-gradient(0deg, #ef4444, #991b1b) !important;
}

/* 5) NoGames (tyrkys) */
.brxe-button.btn-nogames{
  background: linear-gradient(0deg, #2dd4bf, #0f766e) !important;
}

/* 6) AETV (šedá) */
.brxe-button.btn-aetv{
  background: linear-gradient(0deg, #9ca3af, #4b5563) !important;
}

/* hover (stejné chování pro všechny) */
.brxe-button.btn-qt:hover,
.brxe-button.btn-learnia:hover,
.brxe-button.btn-betrue:hover,
.brxe-button.btn-bp:hover,
.brxe-button.btn-nogames:hover,
.brxe-button.btn-aetv:hover{
  filter: brightness(0.95);
}


/* Vertical spacing presets */
.u-header {
  padding-top: var(--space-header-y);
  padding-bottom: var(--space-header-y);
}
.u-section {
  padding-top: var(--space-section-y);
  padding-bottom: var(--space-section-y);
}


/* Common helpers */
.u-center {
  text-align: center;
}
.u-text-dark {
  color: var(--color-text-on-light);
}
.u-text-light {
  color: var(--color-text-on-dark);
}

/* Simple responsive grid helper */
.u-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px) {
  .u-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .u-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* -------------------------
   3) Components (c-*)
   (používej pro opakované bloky: karty, CTA, testimonial)
   ------------------------- */

/* Card base */
.c-card {
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  border: 1px solid var(--color-border-soft);
  padding: 24px;
}

/* Card variant for dark backgrounds */
.c-card--glass {
  background: var(--color-card-bg);
  backdrop-filter: blur(10px);
}

/* CTA block */
.c-cta {
  border-radius: var(--radius-l);
  padding: 40px 24px;
  box-shadow: var(--shadow-m);
  border: 1px solid var(--color-border-soft);
}
.c-cta--glass {
  background: var(--color-card-bg);
  backdrop-filter: blur(10px);
}

/* Testimonial */
.c-testimonial {
  border-radius: var(--radius-m);
  padding: 24px;
  box-shadow: var(--shadow-s);
  border: 1px solid var(--color-border-soft);
}

/* -------------------------
   4) Header layout helper (optional)
   ------------------------- */
.l-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (max-width: 900px) {
  .l-header-row {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.c-logo {
  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.25));
}

.u-drop-shadow-s {
  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.8));
}

.u-drop-shadow-m {
  filter: drop-shadow(0px 6px 12px rgba(0,0,0,0.35));
}

.u-drop-shadow-l {
  filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.5));
}

:root {
  --p-1: #3f3d7a;
  --p-2: #2f7fa8;
  --p-3: #1aa6c8;
}

:root {
  /* Brand */
  --color-primary: var(--p-1);
  --color-secondary: var(--p-2);
  --color-accent: var(--p-3);

  /* Text */
  --text-on-dark: #fff;
  --text-on-light: #0f172a;

  /* Backgrounds */
  --bg-main: #fff;
  --bg-hero: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-secondary) 55%,
    var(--color-accent) 100%
  );

  /* Buttons */
  --btn-primary-bg: linear-gradient(
    90deg,
    var(--color-secondary),
    var(--color-primary)
  );

  /* Borders */
  --border-on-dark: rgba(255,255,255,0.25);

  /* States */
  --success: #22c55e;
  --error: #ef4444;
}

body {
  background-image: var(--bg-logo-url);
  background-repeat: repeat;
  background-position: 20% 20%;
  background-size: auto;
  background-attachment: fixed;
}

.u-text-white {
	color: white !important;
}

.u-link {
	color: var(--color-accent) !important;
	text-decoration: underline !important;
}