/* ==========================================================================
   mydev-guides — front-end styles
   Design system mirrors mydev-formation exactly.
   All colours derived via color-mix() from the same Elementor global tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Root tokens  (same variable architecture as mydev-formation)
   -------------------------------------------------------------------------- */
.mydev-guides-wrap {
  /* ── Elementor global tokens ── */
  --mg-text:     var(--e-global-color-text,      #1f2937);
  --mg-accent:   var(--e-global-color-primary,   #e53935);
  --mg-surface:  var(--e-global-color-secondary, #ffffff);

  /* ── Derived colours (color-mix, same formulas as formation) ── */
  --mg-heading:       color-mix(in srgb, var(--mg-accent)  80%, #0f172a 20%);
  --mg-surface-bg:    color-mix(in srgb, var(--mg-surface)  8%, #ffffff 92%);
  --mg-surface-soft:  color-mix(in srgb, var(--mg-surface)  4%, #f8fafc 96%);
  --mg-border:        color-mix(in srgb, var(--mg-text)    14%, transparent);
  --mg-border-strong: color-mix(in srgb, var(--mg-text)    24%, transparent);
  --mg-border-accent: color-mix(in srgb, var(--mg-border)  75%, #bfd2f7 25%);
  --mg-muted:         color-mix(in srgb, var(--mg-text)    66%, transparent);
  --mg-ring:          color-mix(in srgb, var(--mg-accent)  24%, transparent);

  /* ── Shadows (identical to formation) ── */
  --mg-shadow-soft:   0 8px 24px  color-mix(in srgb, var(--mg-text) 10%, transparent);
  --mg-shadow-medium: 0 18px 48px color-mix(in srgb, var(--mg-text) 14%, transparent);

  /* ── Shape ── */
  --mg-card-radius:   18px;
  --mg-btn-radius:    999px;

  /* ── Typography (Elementor globals) ── */
  --mg-font:          var(--e-global-typography-text-font-family,    inherit);
  --mg-font-weight:   var(--e-global-typography-text-font-weight,    inherit);
  --mg-heading-font:  var(--e-global-typography-primary-font-family, var(--mg-font));
  --mg-heading-fw:    var(--e-global-typography-primary-font-weight, 700);

  /* ── Overridable via Elementor selectors ── */
  --mg-cols-d: 3;
  --mg-cols-t: 2;
  --mg-cols-m: 1;
  --mg-gap:    clamp(16px, 2.2vw, 26px);
  --mg-list-gap:       20px;
  --mg-list-img-width: 220px;
  --mg-card-pad:       24px;
  --mg-img-height:     240px;
  --mg-img-fit:        cover;

  /* button */
  --mg-btn-bg:          var(--mg-accent);
  --mg-btn-color:       #ffffff;
  --mg-btn-border:      var(--mg-accent);
  --mg-btn-hover-bg:    color-mix(in srgb, var(--mg-accent) 86%, #000000 14%);
  --mg-btn-hover-color: #ffffff;
  --mg-btn-hover-bdr:   color-mix(in srgb, var(--mg-accent) 86%, #000000 14%);
  --mg-btn-font-size:   1rem;
  --mg-btn-pad-v:       16px;
  --mg-btn-pad-h:       24px;

  /* badge */
  --mg-badge-bg:     color-mix(in srgb, var(--mg-accent) 13%, #ffffff 87%);
  --mg-badge-color:  color-mix(in srgb, var(--mg-accent) 82%, #000000  8%);
  --mg-badge-radius: 999px;

  color:       var(--mg-text);
  font-family: var(--mg-font);
  font-weight: var(--mg-font-weight);
  line-height: 1.55;
}

.mydev-guides-wrap *,
.mydev-guides-wrap *::before,
.mydev-guides-wrap *::after {
  box-sizing: border-box;
}

.mydev-guides-wrap a { color: inherit; }

/* --------------------------------------------------------------------------
   Block header
   -------------------------------------------------------------------------- */
.mydev-guides-header {
  margin-bottom: 22px;
}
.mydev-guides-header:empty { display: none; }

.mydev-guides-block-title {
  margin: 0 0 0.35em;
  color: var(--mg-heading);
  font-family: var(--mg-heading-font);
  font-weight: var(--mg-heading-fw);
  font-size: clamp(1.55rem, 2.2vw, 2.25rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.mydev-guides-block-intro {
  margin: 0;
  color: var(--mg-text);
  font-size: 1rem;
  line-height: 1.72;
}

/* --------------------------------------------------------------------------
   Grid layout
   -------------------------------------------------------------------------- */
.mydev-guides-grid {
  display: grid;
  grid-template-columns: repeat(var(--mg-cols-d, 3), minmax(0, 1fr));
  gap: var(--mg-gap);
}

/* --------------------------------------------------------------------------
   List layout
   -------------------------------------------------------------------------- */
.mydev-guides-list {
  display: grid;
  gap: var(--mg-list-gap);
}

.mydev-guides-list .mydev-guides-card {
  display: grid;
  grid-template-columns: minmax(0, var(--mg-list-img-width, 220px)) minmax(0, 1fr);
  align-items: stretch;
}

.mydev-guides-list-image {
  overflow: hidden;
  border-radius: var(--mg-card-radius) 0 0 var(--mg-card-radius);
  flex-shrink: 0;
}

.mydev-guides-list-image img {
  width: 100%;
  height: 100%;
  object-fit: var(--mg-img-fit, cover);
  display: block;
  transition: transform 0.35s ease;
}

.mydev-guides-list .mydev-guides-card:hover .mydev-guides-list-image img {
  transform: scale(1.035);
}

.mydev-guides-list .mydev-guides-img-placeholder {
  border-radius: var(--mg-card-radius) 0 0 var(--mg-card-radius);
  height: 100%;
  min-height: 140px;
}

.mydev-guides-list .mydev-guides-card-body {
  border-radius: 0 var(--mg-card-radius) var(--mg-card-radius) 0;
}

/* --------------------------------------------------------------------------
   Minimal layout  (ul/li rows)
   -------------------------------------------------------------------------- */
.mydev-guides-minimal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.mydev-guides-minimal .mydev-guides-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--mg-border) 66%, transparent);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  transform: none;
}

.mydev-guides-minimal .mydev-guides-card:last-child {
  border-bottom: none;
}

.mydev-guides-minimal .mydev-guides-card:hover {
  transform: none;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--mg-border) 66%, transparent);
  background: transparent;
}

.mydev-guides-minimal .mydev-guides-card:last-child:hover {
  border-bottom: none;
}

.mydev-guides-minimal-content {
  flex: 1 1 auto;
  min-width: 0;
}

.mydev-guides-minimal-content .mydev-guides-card-title { margin: 0 0 4px; }
.mydev-guides-minimal-content .mydev-guides-badge      { margin-bottom: 4px; }
.mydev-guides-minimal-content .mydev-guides-card-desc  { margin: 0; }

.mydev-guides-minimal-action { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Card  (shared grid + list)
   -------------------------------------------------------------------------- */
.mydev-guides-card {
  background: #ffffff;
  border: 1px solid var(--mg-border-accent);
  border-radius: var(--mg-card-radius);
  box-shadow: var(--mg-shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.mydev-guides-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mg-shadow-medium);
  border-color: color-mix(in srgb, var(--mg-accent) 22%, var(--mg-border));
}

/* --------------------------------------------------------------------------
   Card image  (grid — top)
   -------------------------------------------------------------------------- */
.mydev-guides-card-image {
  display: block;
  height: var(--mg-img-height, 200px);
  overflow: hidden;
  background: color-mix(in srgb, var(--mg-accent) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--mg-border) 72%, transparent);
  flex-shrink: 0;
}

.mydev-guides-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--mg-img-fit, cover);
  transition: transform 0.35s ease;
}

.mydev-guides-card:hover .mydev-guides-card-image img {
  transform: scale(1.035);
}

/* --------------------------------------------------------------------------
   Image placeholder
   -------------------------------------------------------------------------- */
.mydev-guides-img-placeholder {
  background: color-mix(in srgb, var(--mg-accent) 7%, #f8fafc 93%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: var(--mg-img-height, 200px);
}

.mydev-guides-img-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: 0.22;
  color: var(--mg-accent);
}

/* --------------------------------------------------------------------------
   Card body
   -------------------------------------------------------------------------- */
.mydev-guides-card-body {
  padding: var(--mg-card-pad);
  background: #ffffff;
  display: grid;
  gap: 12px;
  flex: 1;
}

/* Center text in grid cards by default (matches the target design) */
.mydev-guides-grid .mydev-guides-card-body {
  text-align: center;
}

.mydev-guides-grid .mydev-guides-badge {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Category badge  (same recipe as formation badge)
   -------------------------------------------------------------------------- */
.mydev-guides-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: var(--mg-badge-radius);
  background: var(--mg-badge-bg);
  color: var(--mg-badge-color);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Item title  (same as formation card title)
   -------------------------------------------------------------------------- */
.mydev-guides-card-title {
  margin: 0;
  color: var(--mg-heading);
  font-family: var(--mg-heading-font);
  font-weight: var(--mg-heading-fw);
  font-size: clamp(1.05rem, 1.1vw, 1.25rem);
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Item description
   -------------------------------------------------------------------------- */
.mydev-guides-card-desc {
  margin: 0;
  color: var(--mg-text);
  font-size: 0.9rem;
  line-height: 1.72;
}

/* --------------------------------------------------------------------------
   Card footer / button area
   -------------------------------------------------------------------------- */
.mydev-guides-card-footer {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   Download button  (identical system to formation's primary button)
   -------------------------------------------------------------------------- */
.mydev-guides-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: var(--mg-btn-pad-v, 10px) var(--mg-btn-pad-h, 22px);
  background: var(--mg-btn-bg);
  color: var(--mg-btn-color);
  border: 1px solid var(--mg-btn-border);
  border-radius: var(--mg-btn-radius);
  font-size: var(--mg-btn-font-size, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              background-color 0.2s ease, border-color 0.2s ease,
              color 0.2s ease;
}

.mydev-guides-btn:hover,
.mydev-guides-btn:focus-visible {
  background:   var(--mg-btn-hover-bg);
  color:        var(--mg-btn-hover-color);
  border-color: var(--mg-btn-hover-bdr);
  transform:    translateY(-1px);
  box-shadow:   0 10px 24px color-mix(in srgb, var(--mg-accent) 28%, transparent);
  text-decoration: none;
}

.mydev-guides-btn:active { transform: translateY(0); }

.mydev-guides-btn:focus-visible {
  outline:    0;
  box-shadow: 0 0 0 3px var(--mg-ring),
              0 10px 24px color-mix(in srgb, var(--mg-accent) 28%, transparent);
}

.mydev-guides-btn svg {
  flex-shrink: 0;
  display: block;
  width: 18px;
  height: 18px;
}

/* full-width variant (opt-in via Elementor) */
.mydev-guides-btn-block { width: 100%; }

/* no-file fallback */
.mydev-guides-muted {
  color: var(--mg-muted);
  font-size: 0.9rem;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.mydev-guides-empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--mg-muted);
  font-style: italic;
  background: var(--mg-surface-soft);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-card-radius);
  box-shadow: var(--mg-shadow-soft);
}

/* --------------------------------------------------------------------------
   Responsive — Tablet ≤ 1024px
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .mydev-guides-grid {
    grid-template-columns: repeat(var(--mg-cols-t, 2), minmax(0, 1fr));
  }

  .mydev-guides-list .mydev-guides-card {
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Responsive — Mobile ≤ 767px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mydev-guides-grid {
    grid-template-columns: repeat(var(--mg-cols-m, 1), minmax(0, 1fr));
  }

  /* List stacks vertically */
  .mydev-guides-list .mydev-guides-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .mydev-guides-list-image,
  .mydev-guides-list .mydev-guides-img-placeholder {
    border-radius: var(--mg-card-radius) var(--mg-card-radius) 0 0;
    max-height: 200px;
    min-height: 160px;
  }

  .mydev-guides-list .mydev-guides-card-body {
    border-radius: 0 0 var(--mg-card-radius) var(--mg-card-radius);
  }

  /* Minimal wraps */
  .mydev-guides-minimal .mydev-guides-card {
    flex-wrap: wrap;
    gap: 12px;
  }

  .mydev-guides-minimal-action {
    width: 100%;
  }

  .mydev-guides-btn {
    font-size: 0.88rem;
  }
}