/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* Responsive Utilities - Small (30em / 480px) */
@media screen and (min-width: 30em) {
  .grow-ns {
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: transform 0.25s ease-out;
  }

  .grow-ns:hover,
  .grow-ns:focus {
    transform: scale(1.05);
  }

  .grow-ns:active {
    transform: scale(.90);
  }

  .bg-light-gray-ns {
    background-color: #eee;
  }

  .fh-ns:hover {
    color: var(--buzz-red);
  }

  .w-49-ns { width: 49%; }
  .w-45-ns { width: 45%; }
  .w-55-ns { width: 55%; }

  .f1-ns { font-size: 64px; }
  .f2-ns { font-size: 48px; }
  .f3-ns { font-size: 34px; }
  .f4-ns { font-size: 28px; }
  .f5-ns { font-size: 21px; }
  .f6-ns { font-size: 18px; }
  .f7-ns { font-size: 16px; }

  .buzz-title-ns {
    font-family: var(--font-buzz);
    font-size: 90px;
  }

  .black-ns {
    color: var(--black);
  }

  .bg-white-ns {
    background: var(--white);
  }

  .hide-child-ns {
    position: absolute;
    width: 17.4em;
  }

  .hide-child-ns .child-ns {
    opacity: 0;
    transition: opacity .15s ease;
    display: none;
    position: absolute;
    width: 17.4em;
  }

  .hide-child-ns:hover,
  .hide-child-ns:focus,
  .hide-child-ns:active {
    transition: 0;
    padding-bottom: 12em;
  }

  .hide-child-ns:hover .child-ns,
  .hide-child-ns:focus .child-ns,
  .hide-child-ns:active .child-ns {
    opacity: 1;
    transition: opacity .6s ease;
    display: block;
  }

  .hover-bg-near-white-ns:hover,
  .hover-bg-near-white-ns:focus {
    background-color: #f4f4f4;
  }

  .card-ns {
    font-size: 120px;
  }

  .img-gradient-ns {
    position: relative;
    display: inline-block;
  }

  .img-gradient-ns:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002f4b', endColorstr='#00000000', GradientType=0);
  }

  .img-gradient-ns img {
    display: block;
  }

  .arrow-ns #arrow {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }

  .arrow-ns:hover #arrow {
    color: var(--buzz-red);
    filter: none;
    -webkit-filter: none;
  }

  .investor-ns img {
    transition: var(--transition-base);
    filter: grayscale(100%) opacity(40%);
    -webkit-filter: grayscale(100%) opacity(40%);
  }

  .investor-ns:hover img {
    filter: none;
    -webkit-filter: none;
  }

  .bg-party-2 {
    background: url(/img/bg-party-1160x450.svg);
    background-repeat: no-repeat;
    background-size: contain;
  }

  .calendar-digit-red,
  .calendar-digit-pink {
    font-size: 80px;
  }
}

/* Responsive Utilities - Medium (30em to 60em) */
@media screen and (min-width: 30em) and (max-width: 60em) {
  .grow-m {
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: transform 0.25s ease-out;
  }

  .grow-m:hover,
  .grow-m:focus {
    transform: scale(1.05);
  }

  .grow-m:active {
    transform: scale(.90);
  }

  .bg-light-gray-m {
    background-color: #eee;
  }

  .fh-m:hover {
    color: var(--buzz-red);
  }

  .w-49-m { width: 49%; }

  .f1-m { font-size: 64px; }
  .f2-m { font-size: 48px; }
  .f3-m { font-size: 34px; }
  .f4-m { font-size: 28px; }
  .f5-m { font-size: 21px; }
  .f6-m { font-size: 18px; }
  .f7-m { font-size: 16px; }

  .buzz-title-m {
    font-family: var(--font-buzz);
    font-size: 90px;
  }

  .black-m {
    color: var(--black);
  }

  .hide-child-m .child-m {
    opacity: 0;
    transition: opacity .15s ease-in;
    display: none;
  }

  .hide-child-m:hover .child-m,
  .hide-child-m:focus .child-m,
  .hide-child-m:active .child-m {
    opacity: 1;
    transition: opacity .15s ease-in;
    display: inline-block;
  }
}

/* Responsive Utilities - Large (60em / 960px) */
@media screen and (min-width: 60em) {
  .grow-l {
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: transform 0.25s ease-out;
  }

  .grow-l:hover,
  .grow-l:focus {
    transform: scale(1.05);
  }

  .grow-l:active {
    transform: scale(.90);
  }

  .bg-light-gray-l {
    background-color: #eee;
  }

  .fh-l:hover {
    color: var(--buzz-red);
  }

  .w-49-l { width: 49%; }

  .f1-l { font-size: 64px; }
  .f2-l { font-size: 48px; }
  .f3-l { font-size: 34px; }
  .f4-l { font-size: 28px; }
  .f5-l { font-size: 21px; }
  .f6-l { font-size: 18px; }
  .f7-l { font-size: 16px; }

  .buzz-title-l {
    font-family: var(--font-buzz);
    font-size: 90px;
  }

  .black-l {
    color: var(--black);
  }

  .hide-child-l .child-l {
    opacity: 0;
    transition: opacity .15s ease-in;
    display: none;
  }

  .hide-child-l:hover .child-l,
  .hide-child-l:focus .child-l,
  .hide-child-l:active .child-l {
    opacity: 1;
    transition: opacity .15s ease-in;
    display: inline-block;
  }

  .hover-card-shadow-l img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }

  .hover-card-shadow-l:hover {
    box-shadow: 0px 4px 10px rgba(81, 0, 0, 0.32);
    transition: var(--transition-base);
  }

  .hover-card-shadow-l:hover strong {
    color: var(--black);
  }

  .hover-card-shadow-l:hover img {
    -webkit-filter: none;
    filter: none;
  }

  .hover-colored-l img {
    -webkit-filter: grayscale(100%) brightness(150%);
    filter: grayscale(100%), brightness(0%);
  }

  .hover-colored-l:hover strong {
    color: var(--black);
    transition: var(--transition-base);
  }

  .hover-colored-l:hover img {
    -webkit-filter: none;
    filter: none;
    transition: var(--transition-base);
  }

  .party-bg {
    background: url(/img/calendar-format/party-bg.svg);
    background-repeat: no-repeat;
    background-size: 1031px 288px;
  }

  .party-bg-sec {
    background: url(/img/calendar-format/party-bg-sec.svg);
    background-repeat: no-repeat;
    background-size: 1031px 360px;
  }

  .hover-shadow-ns:hover {
    box-shadow: var(--shadow-xl);
    transition: var(--transition-base);
  }

  .bg-white-l {
    background: var(--white);
  }

  .monetize {
    background-size: 300px auto;
  }

  .advertise {
    background-size: 340px auto;
  }

  .inventory-selected-l {
    box-shadow: var(--shadow-xl);
  }

  .inventory-selected-l img {
    -webkit-filter: none;
    filter: none;
  }

  .inventory-selected-l strong {
    color: var(--black);
  }
}

/* Grid Card Desktop Margins */
@media (min-width: 769px) {
  /* Ensure grid cards have proper spacing */
  .row:not(.no-gutters) .col-md-6 {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Grid cards need side margins */
  .row .col-md-6 .card.post-card,
  .col-md-6 .card.post-card,
  div.row > div.col-md-6 > article.card.post-card,
  .grid-card {
    margin-left: 15px !important;
    margin-right: 15px !important;
    margin-bottom: 30px !important;
  }

  /* Grid card body styling */
  .row .col-md-6 .card.post-card .card-body,
  .col-md-6 .card.post-card .card-body,
  div.row > div.col-md-6 > article.card.post-card .card-body {
    margin-top: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

/* List Card Desktop Layout */
@media (min-width: 1025px) {
  .list-card-image-section {
    width: 440px;
    margin-right: 20px;
    display: flex;
    align-items: flex-start;
  }

  .card.post-card .list-card-image-link {
    padding-bottom: 48%;
    height: 0;
    width: calc(100% - 16px);
  }
}

/* List Card Mobile Layout */
@media (max-width: 1024px) {
  .list-card-content {
    flex-direction: column;
  }

  .list-card-image-section {
    width: 100%;
    padding: 16px;
  }

  .card.post-card .list-card-image-link {
    padding-bottom: 48%;
    height: 0;
    margin: 0;
    margin-bottom: 0;
    width: 100%;
  }
}

/* Mobile Styles */
@media (max-width: 768px) {
  .section-sm {
    padding: 60px 0;
  }

  .section-sm .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Reset grid columns to full width on mobile */
  .row > [class*="col-"],
  .row > .col-md-6,
  .row > .col-lg-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Reset row margins on mobile */
  .row:not(.no-gutters) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Reset grid card margins on mobile - no side margins, only bottom */
  .row .col-md-6 .card.post-card,
  .col-md-6 .card.post-card,
  div.row > div.col-md-6 > article.card.post-card,
  .grid-card,
  article.card.post-card,
  .card.post-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 30px !important;
    margin-top: 0 !important;
  }

  /* Mobile: Card images maintain 16px margins and rounded corners */
  /* Default styles from _cards.css apply - no override needed */

  /* Mobile card body padding */
  article.card.post-card .card-body,
  .card.post-card .card-body {
    padding: 20px !important;
  }

  .content h2 {
    font-size: 28px;
    margin-top: 36px;
  }

  .content h3 {
    font-size: 22px;
    margin-top: 28px;
  }

  .single-post-author {
    padding: 24px;
  }
}

/* Inventory Mobile */
@media screen and (max-width: 60em) {
  .inventory-item img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
  }

  .inventory-item:hover .dn {
    display: block;
  }

  .inventory-item:hover img {
    -webkit-filter: none;
    filter: none;
    height: auto;
  }

  .inventory-item:hover strong {
    color: var(--black);
  }

  .inventory-item:hover .db {
    display: none;
  }

  .inventory-item:hover .closed {
    display: none;
  }

  .inventory-item:hover .open {
    display: block;
  }
}

/* Print Styles */
@media print {
  .card.post-card:hover {
    transform: none;
    box-shadow: none;
  }

  .pagination {
    display: none;
  }
}

/* Focus States for Accessibility */
a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(244, 67, 54, 0.5);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Phosphor Icons Styling */
.ph,
i.ph {
  display: inline-block !important;
  vertical-align: middle;
  line-height: 1;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  font-family: "phosphor" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
}

/* Loading State */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.loading {
  background: linear-gradient(
    90deg,
    #f0f0f0 0px,
    #f8f8f8 40px,
    #f0f0f0 80px
  );
  background-size: 1000px;
  animation: shimmer 2s infinite;
}