/*
  Macteck — 02 Components
  Classes à appliquer dans Divi Builder / Theme Builder.
*/

/* Header premium */
.mck-header-wrap {
  position: sticky;
  top: 16px;
  z-index: 999;
  padding-block: 16px;
}

.mck-header {
  min-height: 88px;
  width: min(var(--mck-site-max), calc(100% - var(--mck-pad-desktop) * 2));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--mck-space-md);
  padding: 0 24px;
  border: 1px solid var(--mck-border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--mck-surface) 92%, transparent);
  box-shadow: var(--mck-shadow-card);
  backdrop-filter: blur(20px);
}

.mck-logo {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}

.mck-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2vw, 30px);
  flex: 1 1 auto;
}

.mck-nav a {
  color: var(--mck-text);
  font-family: var(--mck-font-display);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.mck-nav a:hover,
.mck-nav a[aria-current="page"] {
  color: var(--mck-orange);
}

.mck-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Buttons */
.mck-btn,
.et_pb_button.mck-btn {
  min-height: 48px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px !important;
  border-radius: var(--mck-radius-md) !important;
  border: 1px solid transparent !important;
  font-family: var(--mck-font-display);
  font-size: 14px;
  font-weight: 750;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.mck-btn:hover,
.et_pb_button.mck-btn:hover {
  transform: translateY(-1px);
  text-decoration: none !important;
}

.mck-btn-primary,
.et_pb_button.mck-btn-primary {
  color: #FFFFFF !important;
  background: var(--mck-orange) !important;
  border-color: var(--mck-orange) !important;
  box-shadow: 0 10px 24px rgba(239, 80, 36, 0.22);
}

.mck-btn-support,
.et_pb_button.mck-btn-support {
  color: #FFFFFF !important;
  background: var(--mck-blue) !important;
  border-color: var(--mck-blue) !important;
  box-shadow: 0 10px 24px rgba(23, 158, 217, 0.20);
}

.mck-btn-secondary,
.et_pb_button.mck-btn-secondary {
  color: var(--mck-text) !important;
  background: var(--mck-surface) !important;
  border-color: var(--mck-border) !important;
}

.mck-btn-ghost,
.et_pb_button.mck-btn-ghost {
  color: var(--mck-text) !important;
  background: transparent !important;
  border-color: var(--mck-border) !important;
}

.mck-btn-danger,
.et_pb_button.mck-btn-danger {
  color: #FFFFFF !important;
  background: var(--mck-danger) !important;
  border-color: var(--mck-danger) !important;
}

.mck-btn-lg {
  min-height: 56px;
  padding-inline: 26px !important;
  border-radius: 16px !important;
}

/* Cards */
.mck-card {
  border: 1px solid var(--mck-border);
  border-radius: var(--mck-radius-lg);
  background: var(--mck-surface);
  box-shadow: var(--mck-shadow-card);
}

.mck-card-pad {
  padding: 24px;
}

.mck-card-premium {
  position: relative;
  overflow: hidden;
}

.mck-card-premium::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mck-blue), var(--mck-orange));
}

/* Hero */
.mck-hero-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--mck-border);
  border-radius: var(--mck-radius-xl);
  background:
    radial-gradient(circle at 72% 35%, rgba(23, 158, 217, 0.12), transparent 24rem),
    var(--mck-surface);
  box-shadow: var(--mck-shadow-soft);
}

.mck-hero-inner {
  min-height: 560px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--mck-space-2xl);
  align-items: center;
  padding: clamp(36px, 5vw, 72px);
}

.mck-hero-copy {
  display: grid;
  gap: var(--mck-space-md);
}

.mck-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.mck-hero-visual {
  min-height: 360px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(23, 158, 217, 0.10), rgba(239, 80, 36, 0.06)),
    var(--mck-surface-soft);
  border: 1px solid var(--mck-border);
}

/* Sidebar layout */
.mck-app-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  background: var(--mck-bg);
}

.mck-app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px;
  border-right: 1px solid var(--mck-border);
  background: var(--mck-surface);
}

.mck-app-main {
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
}

.mck-app-main-inner {
  width: min(1440px, calc(100% - 64px));
  margin-inline: auto;
  padding-block: 48px 80px;
}

.mck-app-page-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mck-space-md);
  padding-block: 18px;
  margin-bottom: 28px;
  background: color-mix(in srgb, var(--mck-bg) 92%, transparent);
  backdrop-filter: blur(18px);
}

.mck-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
}

.mck-surface-dark {
  background: var(--mck-bg-dark);
  color: var(--mck-text-dark);
}

@media (max-width: 1180px) {
  .mck-nav {
    display: none;
  }

  .mck-hero-inner,
  .mck-content-grid {
    grid-template-columns: 1fr;
  }

  .mck-app-layout {
    grid-template-columns: 88px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .mck-header {
    width: calc(100% - var(--mck-pad-mobile) * 2);
    min-height: 72px;
    padding-inline: 16px;
  }

  .mck-logo {
    width: 170px;
  }

  .mck-actions .mck-btn-secondary,
  .mck-actions .mck-btn-support {
    display: none !important;
  }

  .mck-hero-inner {
    min-height: auto;
    padding: 28px;
  }

  .mck-hero-actions {
    flex-direction: column;
  }

  .mck-hero-actions .mck-btn {
    width: 100%;
  }
}