/*
 * Page-level responsive coverage layered on top of site-responsive.css.
 * This file is structural only: desktop widths/grids/flow. Visual polish stays
 * in the page/component styles so mobile and desktop keep one shared DOM.
 */

@media (min-width: 768px) {
  .ir-app--desktop-shell .ir-non-ir-payment-warning > div {
    width: 100%;
    max-width: 880px !important;
    margin-inline: auto;
    padding-inline: 1.5rem;
  }

  .ir-app--desktop-shell [data-public-services],
  .ir-app--desktop-shell [data-vn-orders-page] {
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  /* Global warning/chrome follows the same content gutter as the page. */
  .ir-app--desktop-shell .ir-non-ir-payment-warning > div {
    width: min(100%, var(--ir-public-content-max));
    max-width: var(--ir-public-content-max) !important;
    padding-inline: 2rem;
  }

  /* Public API services catalog. */
  .ir-app--desktop-shell [data-public-services] {
    width: min(100%, var(--ir-public-content-max));
    max-width: var(--ir-public-content-max) !important;
    margin-inline: auto;
    padding: 2rem 2rem 4rem;
  }

  .ir-app--desktop-shell [data-public-services] > header {
    padding: 2rem 2.5rem;
  }

  .ir-app--desktop-shell [data-public-services] > header > p {
    max-width: 46rem;
  }

  .ir-app--desktop-shell [data-public-services] #serviceCatalogGroups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
  }

  .ir-app--desktop-shell [data-public-services] #serviceCatalogGroups > [data-service-network] {
    min-width: 0;
    margin-top: 0 !important;
  }

  /* Virtual-number history becomes a real desktop archive. */
  .ir-app--desktop-shell [data-vn-orders-page] {
    width: min(100%, var(--ir-public-content-max));
    max-width: var(--ir-public-content-max) !important;
    margin-inline: auto;
    padding: 2rem 2rem 4rem;
  }

  .ir-app--desktop-shell [data-vn-orders-page] [data-vn-order-list] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
  }

  .ir-app--desktop-shell [data-vn-orders-page] [data-vn-order-list] > * {
    min-width: 0;
    margin-top: 0 !important;
  }

  .ir-app--desktop-shell [data-vn-orders-page] > section[aria-label="خلاصه سفارش‌ها"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }

  /* The active virtual-number shop uses a readable wide work area. */
  body.ir-page-virtual-number-shop .ir-app--desktop-shell main > [data-vn-shop] {
    width: min(100%, 1040px);
    max-width: 1040px !important;
    margin-inline: auto;
    padding-inline: 2rem;
  }

  /* Checkout and detail are task pages: wider than mobile, but deliberately
     narrower than dashboard/catalog pages for easier scanning. */
  body.ir-page-virtual-number-checkout .ir-app--desktop-shell main > div,
  body.ir-page-virtual-number-order-detail .ir-app--desktop-shell main > div {
    width: min(100%, 900px);
    max-width: 900px !important;
    margin-inline: auto;
    padding-inline: 2rem;
  }

  /* Common account pages already share ir-panel-shell. Keep long forms readable
     while allowing surrounding cards/lists to use the full desktop canvas. */
  .ir-app--desktop-shell .ir-panel-shell .profile-tabs,
  .ir-app--desktop-shell .ir-panel-shell > form,
  .ir-app--desktop-shell .ir-panel-shell > .auth-form {
    width: 100%;
  }

  .ir-app--desktop-shell .ir-panel-shell .profile-tabs form,
  .ir-app--desktop-shell .ir-panel-shell form:not([role="search"]) {
    width: 100%;
    max-width: 50rem;
  }

  /* Status/auth/payment forms should not become giant just because the chrome
     is desktop. They remain focused cards inside the now-wide site shell. */
  .ir-app--desktop-shell main > div.max-w-\[480px\],
  .ir-app--desktop-shell main > div.max-w-md {
    width: min(100%, 34rem);
    max-width: 34rem !important;
    margin-inline: auto;
  }

  /* Home purchase paths share one row and one visual height. Content length in
     either card must not make the pair look uneven. */
  .ir-app--desktop-shell .ir-home-page > section:nth-of-type(2) > .mt-5.space-y-3 {
    align-items: stretch;
  }

  .ir-app--desktop-shell .ir-home-page > section:nth-of-type(2) > .mt-5.space-y-3 > a {
    height: 100%;
    min-height: 9.5rem;
  }

  /* Blog archive density: three columns on regular desktop. */
  body:has(.ir-blog-list-hero) section.space-y-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body:has(.ir-blog-list-hero) section.space-y-4 > .py-1 {
    grid-column: span 2 / span 2;
  }

  /* Article detail uses a reading column plus a dedicated desktop sidebar. */
  body:has(.ir-post-detail-layout) .ir-app--desktop-shell main > div {
    width: min(100%, var(--ir-public-content-max));
    max-width: var(--ir-public-content-max) !important;
    margin-inline: auto;
    padding: 2rem 2rem 4rem;
  }

  .ir-post-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18.5rem;
    align-items: start;
    gap: 2rem;
  }

  .ir-post-detail-main {
    min-width: 0;
    max-width: 50rem;
  }

  .ir-post-detail-mobile-toc,
  .ir-post-detail-mobile-latest {
    display: none !important;
  }

  .ir-post-detail-sidebar {
    display: block;
    min-width: 0;
  }

  .ir-post-detail-sidebar__inner {
    position: sticky;
    top: 5.75rem;
    display: grid;
    gap: 0.9rem;
  }

  .ir-post-sidebar-card,
  .ir-post-sidebar-cta {
    min-width: 0;
    border: 1px solid rgb(229 231 235);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 4px 14px rgb(15 23 42 / 0.04);
  }

  .dark .ir-post-sidebar-card,
  .dark .ir-post-sidebar-cta {
    border-color: rgb(55 65 81);
    background: rgb(31 41 55);
  }

  .ir-post-sidebar-card {
    padding: 0.85rem;
  }

  .ir-post-sidebar-card__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgb(243 244 246);
  }

  .dark .ir-post-sidebar-card__head {
    border-bottom-color: rgb(55 65 81);
  }

  .ir-post-sidebar-card__icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    background: rgb(245 158 11 / 0.1);
  }

  .ir-post-sidebar-card__head h2 {
    margin: 0;
    color: rgb(17 24 39);
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1.5;
  }

  .dark .ir-post-sidebar-card__head h2 {
    color: rgb(243 244 246);
  }

  .ir-post-sidebar-card__head p {
    margin: 0.1rem 0 0;
    color: rgb(107 114 128);
    font-size: 0.62rem;
    line-height: 1.5;
  }

  .ir-post-sidebar-toc {
    display: grid;
    gap: 0.18rem;
    padding-top: 0.55rem;
  }

  .ir-post-sidebar-toc__link {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 0;
    border-radius: 0.65rem;
    padding: 0.48rem 0.55rem;
    background: transparent;
    color: rgb(75 85 99);
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.65;
    text-align: right;
    cursor: pointer;
  }

  .ir-post-sidebar-toc__link:hover {
    background: rgb(245 158 11 / 0.08);
    color: rgb(180 83 9);
  }

  .dark .ir-post-sidebar-toc__link {
    color: rgb(209 213 219);
  }

  .ir-post-sidebar-toc__link.is-child {
    padding-inline-start: 1.1rem;
    font-weight: 600;
  }

  .ir-post-sidebar-toc__link span {
    min-width: 0;
  }

  .ir-post-sidebar-latest {
    display: grid;
    gap: 0.45rem;
    padding-top: 0.6rem;
  }

  .ir-post-sidebar-latest__item {
    display: block;
    border-radius: 0.7rem;
    padding: 0.55rem;
    color: rgb(31 41 55);
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease;
  }

  .ir-post-sidebar-latest__item:hover {
    background: rgb(249 250 251);
    color: rgb(180 83 9);
  }

  .dark .ir-post-sidebar-latest__item {
    color: rgb(229 231 235);
  }

  .dark .ir-post-sidebar-latest__item:hover {
    background: rgb(55 65 81 / 0.55);
    color: rgb(252 211 77);
  }

  .ir-post-sidebar-latest__item span {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.7;
  }

  .ir-post-sidebar-latest__item small {
    display: block;
    margin-top: 0.15rem;
    color: rgb(107 114 128);
    font-size: 0.6rem;
  }

  .ir-post-sidebar-cta {
    padding: 0.9rem;
    background: rgb(255 251 235);
    border-color: rgb(253 230 138);
  }

  .dark .ir-post-sidebar-cta {
    background: rgb(120 53 15 / 0.14);
    border-color: rgb(245 158 11 / 0.24);
  }

  .ir-post-sidebar-cta span {
    display: block;
    color: rgb(75 85 99);
    font-size: 0.67rem;
    line-height: 1.8;
  }

  .dark .ir-post-sidebar-cta span {
    color: rgb(209 213 219);
  }

  .ir-post-sidebar-cta a {
    display: flex;
    min-height: 2.4rem;
    margin-top: 0.65rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    background: rgb(245 158 11);
    color: rgb(17 24 39);
    font-size: 0.68rem;
    font-weight: 900;
    text-decoration: none;
  }
}

@media (min-width: 1280px) {
  /* Four-column blog archive on wide desktop. */
  body:has(.ir-blog-list-hero) section.space-y-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body:has(.ir-blog-list-hero) section.space-y-4 > .py-1 {
    grid-column: span 2 / span 2;
  }
}

@media (min-width: 1440px) {
  .ir-app--desktop-shell .ir-non-ir-payment-warning > div,
  .ir-app--desktop-shell [data-public-services],
  .ir-app--desktop-shell [data-vn-orders-page] {
    max-width: var(--ir-public-wide-max) !important;
  }

  .ir-post-detail-layout {
    grid-template-columns: minmax(0, 1fr) 19.5rem;
    gap: 2.5rem;
  }
}

/* Sidebar is desktop-only; mobile keeps the existing inline TOC/latest blocks. */
.ir-post-detail-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .ir-post-detail-sidebar {
    display: block;
  }
}

/* Toast/flash messages stay phone-width and centered even when the page shell
   expands to desktop width. */
.ir-overlay-shell:has(#flashToast) {
  width: 100% !important;
  max-width: 480px !important;
}