/*
 * Shared responsive shell for Iranigram pages.
 * Mobile keeps the existing 480px application model. Tablet/desktop reuse the
 * same DOM and progressively expand into a real desktop layout.
 */

:root {
  --ir-public-content-max: 1180px;
  --ir-public-wide-max: 1280px;
  --ir-reading-max: 940px;
  --ir-form-max: 680px;
}

@media (min-width: 768px) {
  .ir-app--desktop-shell {
    width: calc(100% - 1.5rem) !important;
    max-width: 920px !important;
    margin-inline: auto;
  }

  .ir-app--desktop-shell .ir-navbar-inner,
  .ir-app--desktop-shell .ir-breadcrumb-inner,
  .ir-app--desktop-shell .ir-site-footer > section > div,
  .ir-app--desktop-shell .ir-site-footer > footer > div {
    max-width: 880px !important;
  }

  .ir-overlay-shell--wide,
  .ir-overlay-shell {
    max-width: 880px !important;
  }

  .ir-app--desktop-shell .ir-home-page,
  .ir-app--desktop-shell .ir-network-page,
  .ir-app--desktop-shell .ir-social-media-page,
  .ir-app--desktop-shell .ir-panel-shell,
  body.ir-page-virtual-number-shop [data-vn-shop] {
    width: 100%;
    max-width: 880px !important;
    margin-inline: auto;
    padding-inline: 1.5rem;
  }

  .ir-app--desktop-shell .ir-trust-page,
  .ir-app--desktop-shell .ir-rules-page {
    max-width: 820px !important;
  }

  body:has(.ir-blog-list-hero) .ir-app--desktop-shell main > div,
  body:has(.ir-blog-content) .ir-app--desktop-shell main > div {
    width: 100%;
    max-width: 880px !important;
    margin-inline: auto;
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .ir-app--desktop-shell {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0;
    border-radius: 0;
    box-shadow: none !important;
  }

  .ir-app--desktop-shell .ir-navbar-inner,
  .ir-app--desktop-shell .ir-breadcrumb-inner,
  .ir-app--desktop-shell .ir-site-footer > section > div,
  .ir-app--desktop-shell .ir-site-footer > footer > div {
    width: min(100%, var(--ir-public-content-max));
    max-width: var(--ir-public-content-max) !important;
    margin-inline: auto;
  }

  .ir-overlay-shell--wide,
  .ir-overlay-shell {
    width: min(100%, var(--ir-public-content-max));
    max-width: var(--ir-public-content-max) !important;
  }

  .ir-app--desktop-shell .ir-navbar-inner {
    min-height: 4.25rem;
    height: 4.25rem;
    gap: 1.25rem;
    padding-inline: 1.5rem;
  }

  .ir-app--desktop-shell .ir-navbar-brand {
    flex: 0 0 auto;
  }

  .ir-app--desktop-shell .js-sidebar-open {
    display: none !important;
  }

  .ir-app--desktop-shell .ir-navbar-logo img {
    height: 2.15rem;
    max-width: 6.5rem;
  }

  .ir-app--desktop-shell .ir-catalog-desktop-nav {
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
  }

  .ir-app--desktop-shell .ir-catalog-desktop-nav__link,
  .ir-app--desktop-shell .ir-catalog-support-link {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    padding: 0.5rem 0.8rem;
    color: rgb(75 85 99);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
  }

  .ir-app--desktop-shell .ir-catalog-desktop-nav__link:hover,
  .ir-app--desktop-shell .ir-catalog-support-link:hover {
    background: rgb(245 158 11 / 0.1);
    color: rgb(180 83 9);
  }

  .ir-app--desktop-shell .ir-catalog-desktop-nav__link.is-active {
    background: rgb(245 158 11 / 0.14);
    color: rgb(146 64 14);
    box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.16);
  }

  .dark .ir-app--desktop-shell .ir-catalog-desktop-nav__link,
  .dark .ir-app--desktop-shell .ir-catalog-support-link {
    color: rgb(209 213 219);
  }

  .dark .ir-app--desktop-shell .ir-catalog-desktop-nav__link:hover,
  .dark .ir-app--desktop-shell .ir-catalog-support-link:hover,
  .dark .ir-app--desktop-shell .ir-catalog-desktop-nav__link.is-active {
    background: rgb(245 158 11 / 0.15);
    color: rgb(252 211 77);
  }

  .ir-app--desktop-shell .ir-navbar-actions {
    flex: 0 0 auto;
  }

  .ir-app--desktop-shell .ir-breadcrumb-nav {
    padding-inline: 0 !important;
  }

  .ir-app--desktop-shell .ir-breadcrumb-inner {
    width: min(100%, var(--ir-public-content-max));
    padding-inline: 2rem !important;
  }

  .ir-app--desktop-shell .ir-breadcrumb-list {
    width: 100%;
  }

  .ir-app--desktop-shell .ir-site-footer > section > div,
  .ir-app--desktop-shell .ir-site-footer > footer > div {
    padding-inline: 2rem;
  }

  .ir-app--desktop-shell .ir-non-ir-payment-warning,
  .ir-app--desktop-shell [data-non-ir-payment-warning] {
    width: min(100%, var(--ir-public-content-max));
    max-width: var(--ir-public-content-max) !important;
    margin-inline: auto;
  }

  /* Public discovery pages */
  .ir-app--desktop-shell .ir-home-page,
  .ir-app--desktop-shell .ir-network-page,
  .ir-app--desktop-shell .ir-social-media-page {
    width: min(100%, var(--ir-public-content-max));
    max-width: var(--ir-public-content-max) !important;
    margin-inline: auto;
    padding-inline: 2rem;
  }

  .ir-app--desktop-shell .ir-home-page > .ir-hero-intro,
  .ir-app--desktop-shell .ir-network-page > .ir-hero-intro {
    max-width: 52rem;
    margin-inline: auto;
    padding-top: 3rem;
    padding-bottom: 2rem;
  }

  .ir-app--desktop-shell .ir-home-page > .ir-hero-intro h1,
  .ir-app--desktop-shell .ir-network-page > .ir-hero-intro h1 {
    font-size: clamp(2rem, 3vw, 2.75rem);
    line-height: 1.35;
  }

  .ir-app--desktop-shell .ir-home-page > .ir-hero-intro p,
  .ir-app--desktop-shell .ir-network-page > .ir-hero-intro p {
    font-size: 0.98rem;
  }

  /* Home */
  .ir-app--desktop-shell .ir-home-page > section:nth-of-type(2) > .mt-5.space-y-3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .ir-app--desktop-shell .ir-home-page > section:nth-of-type(2) > .mt-5.space-y-3 > * + * {
    margin-top: 0 !important;
  }

  .ir-app--desktop-shell .ir-home-page .grid:has(> article) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .ir-app--desktop-shell .ir-home-page .grid:has(> article) > article {
    height: 100%;
  }

  .ir-app--desktop-shell .ir-home-page .space-y-3:has(> figure) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .ir-app--desktop-shell .ir-home-page .space-y-3:has(> figure) > * + * {
    margin-top: 0 !important;
  }

  .ir-app--desktop-shell .ir-home-page .space-y-3:has(> figure) > figure {
    height: 100%;
  }

  .ir-app--desktop-shell .ir-home-page .ir-home-section {
    padding-block: 2rem;
  }

  /* Social-media gateway */
  .ir-app--desktop-shell .ir-social-media-page {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }

  .ir-app--desktop-shell .ir-social-media-hero {
    padding: 2rem;
  }

  .ir-app--desktop-shell .ir-social-media-hero h1 {
    font-size: 2rem;
    line-height: 1.4;
  }

  .ir-app--desktop-shell .ir-social-platform-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .ir-app--desktop-shell .ir-social-platform-card {
    min-height: 8.25rem;
    align-items: flex-start;
    padding: 1.25rem;
  }

  .ir-app--desktop-shell .ir-social-secondary-cta {
    max-width: 44rem;
    margin-inline: auto;
    margin-top: 2rem;
  }

  /* Network hubs such as /ig/ */
  .ir-app--desktop-shell .ir-network-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .ir-app--desktop-shell .ir-network-service-card {
    height: 100%;
    min-height: 7.5rem;
    align-items: flex-start;
  }

  .ir-app--desktop-shell .ir-network-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .ir-app--desktop-shell .ir-network-blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ir-app--desktop-shell .ir-network-section {
    padding-block: 2rem;
  }

  /* Account dashboard and every page that extends dashboard_base.html. */
  .ir-app--desktop-shell .ir-panel-shell {
    width: min(100%, var(--ir-public-content-max));
    max-width: var(--ir-public-content-max) !important;
    margin-inline: auto;
    padding: 1.75rem 2rem 3rem;
  }

  .ir-panel-shell #ordersAccordion,
  .ir-panel-shell #transactionsAccordion,
  .ir-panel-shell #ticketsAccordion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.85rem;
  }

  .ir-panel-shell #ordersAccordion > *,
  .ir-panel-shell #transactionsAccordion > *,
  .ir-panel-shell #ticketsAccordion > * {
    min-width: 0;
    margin-top: 0 !important;
  }

  .ir-panel-shell form:not([role="search"]) {
    max-width: 50rem;
  }

  /* Dashboard overview: stats and quick actions use desktop density. */
  .ir-panel-shell > div > section:nth-of-type(2) > .grid.grid-cols-2 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .ir-panel-shell > div > section:nth-of-type(3) > .grid.grid-cols-3 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .ir-panel-shell > div > section:nth-of-type(3) > .grid.grid-cols-3 > .col-span-3 {
    grid-column: span 2 / span 2;
  }

  /* Blog list: full desktop canvas with two-column article archive. */
  body:has(.ir-blog-list-hero) .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;
  }

  body:has(.ir-blog-list-hero) .ir-blog-list-hero {
    padding: 2.25rem 2.5rem;
  }

  body:has(.ir-blog-list-hero) section.space-y-4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  body:has(.ir-blog-list-hero) section.space-y-4 > * {
    min-width: 0;
    margin-top: 0 !important;
  }

  body:has(.ir-blog-list-hero) .ir-blog-list-slider-section .ir-blog-h-scroll__item {
    width: min(31rem, 38%) !important;
  }

  /* Article detail remains reading-width rather than stretching prose edge to edge. */
  body:has(.ir-blog-content) .ir-app--desktop-shell main > div {
    width: min(100%, var(--ir-reading-max));
    max-width: var(--ir-reading-max) !important;
    margin-inline: auto;
    padding: 2rem 2rem 4rem;
  }

  body:has(.ir-blog-content) .ir-blog-content {
    font-size: 1rem;
    line-height: 2;
  }

  body:has(.ir-blog-content) article > header h1 {
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    line-height: 1.5;
  }

  body:has(.ir-blog-content) article section .space-y-3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  /* Trust and rules use a wider desktop reading canvas. */
  .ir-app--desktop-shell .ir-trust-page,
  .ir-app--desktop-shell .ir-rules-page {
    width: min(100%, 1000px);
    max-width: 1000px !important;
    margin-inline: auto;
    padding: 2rem 2rem 4rem;
  }

  .ir-app--desktop-shell .ir-trust-page > header,
  .ir-app--desktop-shell .ir-rules-page > header {
    padding: 2.25rem 2.5rem;
  }

  .ir-app--desktop-shell .ir-rules-summary > .grid,
  .ir-app--desktop-shell .ir-trust-page .grid.sm\:grid-cols-2 {
    gap: 1rem;
  }

  /* Virtual number shop / checkout / order tracking. */
  body.ir-page-virtual-number-shop [data-vn-shop] {
    width: min(100%, 1040px);
    max-width: 1040px !important;
    margin-inline: auto;
    padding: 2rem 2rem 4rem;
  }

  body.ir-page-virtual-number-shop [data-vn-shop] > section:first-of-type {
    padding-bottom: 1.25rem;
  }

  body.ir-page-virtual-number-shop [data-vn-scroll-list] {
    max-height: 26rem;
  }

  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;
  }

  body.ir-page-virtual-number-orders .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;
  }

  /* Auth/password/payment outcome pages are intentionally form-width, but the
     surrounding chrome is desktop. Give them breathing room without stretching
     controls to a dashboard-sized canvas. */
  .ir-app--desktop-shell main > div.max-w-\[480px\] {
    margin-top: 1rem;
    margin-bottom: 2rem;
  }

  .ir-app--desktop-shell .ir-error-page {
    max-width: 760px;
    margin-inline: auto;
  }
}

@media (min-width: 1280px) {
  .ir-panel-shell #ordersAccordion,
  .ir-panel-shell #transactionsAccordion,
  .ir-panel-shell #ticketsAccordion {
    gap: 1rem;
  }
}

@media (min-width: 1440px) {
  .ir-app--desktop-shell .ir-navbar-inner,
  .ir-app--desktop-shell .ir-breadcrumb-inner,
  .ir-app--desktop-shell .ir-site-footer > section > div,
  .ir-app--desktop-shell .ir-site-footer > footer > div,
  .ir-app--desktop-shell .ir-home-page,
  .ir-app--desktop-shell .ir-network-page,
  .ir-app--desktop-shell .ir-social-media-page,
  .ir-app--desktop-shell .ir-panel-shell,
  body:has(.ir-blog-list-hero) .ir-app--desktop-shell main > div,
  .ir-overlay-shell--wide,
  .ir-overlay-shell {
    max-width: var(--ir-public-wide-max) !important;
  }
}