/* ======================================================
   1. DECK CARD COMPONENT (.m-deck)
====================================================== */

.m-deck {

  position: relative;
  display: flex;
  flex-direction: column;

  height: 200px;
  width: 100%;
  max-width: 100%;

  border-radius: 5px;
  overflow: hidden;

  cursor: pointer;

  box-shadow: var(--shadow-soft);
}


/* ======================================================
   2. VISIBILITY STATES
====================================================== */

.m-deck--restricted {
  box-shadow: 0 0 9px 3px #319be0;
}

.m-deck--hidden {
  box-shadow: 0 0 9px 3px #e03131;
}


/* ======================================================
   3. DECK IMAGE
====================================================== */

.m-deck--img-card {

  overflow: hidden;
}


.m-deck--img {

  display: block;
  height: 200px;
  max-width: none;

  background-color: #485461;
  background-image:
    linear-gradient(
      315deg,
      #485461 0%,
      #28313b 74%
    );
}


/* Non-placeholder image */

.m-deck--img:not(.placeholder) {

  filter: brightness(0.5);

  object-fit: cover;

  object-position: -59px -113px;

  width: 123%;
}


/* Column adjustments */

.col-md-4 .m-deck--img:not(.placeholder) {

  object-position: -46px -69px;
}


/* ======================================================
   4. RESPONSIVE IMAGE POSITIONING
====================================================== */

@media only screen and (max-width: 481px) {

  .col-md-4 .m-deck--img:not(.placeholder) {

    object-position: -41px -64px;
  }

}


@media only screen and (min-width: 481px) and (max-width: 768px) {

  .col-md-4 .m-deck--img:not(.placeholder) {

    object-position: -61px -95px;
  }

}


@media only screen and (min-width: 768px) and (max-width: 992px) {

  .m-deck--img:not(.placeholder) {

    object-position: -43px -69px;
    width: 137%;
  }

  .col-md-4 .m-deck--img:not(.placeholder) {

    object-position: -63px -47px;
    width: 155%;
  }

}


/* Desktop */

@media only screen and (min-width: 992px) {

  .col-md-4 .m-deck--img:not(.placeholder) {

    object-position: -37px -82px;
    width: 123%;
  }

}



/* ======================================================
   5. DECK CONTENT OVERLAY
====================================================== */

.m-deck--container {

  position: absolute;

  top: 20px;
  left: 20px;

  width: 92%;
  height: 81%;

  z-index: 20;

  color: var(--color-text-light);
}



/* ======================================================
   6. DECK TEXT CONTENT
====================================================== */


/* Plane + Name block */

.m-deck--name-plate {

  font-size: 0.9rem;
}


/* Deck Name */

.m-deck--name {

  position: absolute;

  left: 0;
  top: 20px;

  font-size: 1.45rem;
  font-weight: bold;

  color: #ffe376;
}


/* Owner */

.m-deck--owner {

  position: absolute;

  top: 0;
  right: 0;

  color: #bdbdbd;
}


/* Updated Date */

.m-deck--date {

  position: absolute;

  bottom: 0;
  right: 0;

  font-size: 0.8rem;
  font-style: italic;

  color: var(--color-text-soft-light);

  text-shadow: 0 0 4px #181818;
}


/* Mana Icons */

.m-deck--meta {

  position: absolute;

  bottom: 0;
  left: 0;

  transform: scale(1.5);
}


/* View Deck link */

.m-deck--link {

  position: absolute;

  bottom: 28px;

  display: none;

  color: var(--color-primary-dark) !important;
}



/* ======================================================
   7. DECK HEADER (View Deck Page)
====================================================== */

.deck-header {

  margin-bottom: 20px;
}


/* Title */

.deck-title__item {

  font-size: 28px;
  font-weight: 600;
}


.deck-title__icon {

  font-size: 20px;
  opacity: .85;
}


/* Action Buttons */

.deck-actions .btn {

  min-width: 36px;
}


/* Status Blocks */

.deck-status .alert {

  border-radius: 6px;
}



/* ======================================================
   8. DECK INFO BLOCKS
====================================================== */

.deck-info__container {

  margin-bottom: 1rem;

  font-size: 14px;

  opacity: .9;
}


.deck-info {

  margin: 0;
}


.deck-info b {

  font-weight: 600;
}


.deck-info--edited {

  color: #797979;
  font-size: 0.8rem;
}



/* ======================================================
   9. MANA DISPLAY
====================================================== */

.deck-mana {

  border-top: 1px solid rgba(255,255,255,.08);

  padding-top: 10px;
}


.deck-mana__row {

  display:flex;

  gap:6px;

  align-items:center;
}

/* =========================================
   Deck Card Wrapper
========================================= */

.deck-card-wrapper {

  margin-bottom:25px;
}


/* =========================================
   Deck Header Meta
========================================= */

.deck-card-meta {

  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:6px;

  font-size:15px;
}


.deck-card-user {

  font-weight:600;
  color:#444;
}


.deck-card-user a {

  color:#3a6fd8;
  text-decoration:none;
}


.deck-card-user a:hover {

  text-decoration:underline;
}


.deck-card-updated {

  color:#666;
  font-size:14px;
}



/* ======================================================
   10. LEGACY SUPPORT STYLES
   (Preserved exactly)
====================================================== */

.deck-name {

  font-weight: 600;

  letter-spacing: 0.1px;
}


.deck-item-link {

  display: block;

  text-decoration: none;

  color: #000;

  margin-bottom: 25px;
}


.deck-item-link:hover {

  text-decoration: none;

  color: #000;
}


h5.mgt-deck-name {

  font-size: 1rem;

  font-weight: normal;
}


.mtg-deck-name--subname {

  font-size: 1.25rem;

  font-weight: bold;

  display: block;
}


.mtg-deck-readmore {

  color: #da6d05;
}


.deck-notice-logo {

  font-size: 1.2rem;
}