/* Responsive refinements — 320px → 1440px+ */

@media (min-width: 640px) {
  .cmp-hero { padding: 80px 16px; }
  .cmp-hero h1, .cmp-hero .cmp-hero-sub { font-size: 3rem; }
  .cmp-hero p.cmp-hero-lead { font-size: 18px; }
  .cmp-hero-form { padding-left: 24px; }
}
@media (min-width: 768px) {
  .cmp-hero h1, .cmp-hero .cmp-hero-sub { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
  .cmp-hero { padding: 96px 16px; }
  .cmp-hero h1, .cmp-hero .cmp-hero-sub { font-size: 4.5rem; }
}

@media (max-width: 1023px) {
  .cmp-detail-media { position: static; }
}

@media (max-width: 639px) {
  .cmp-header { top: 10px; padding-inline: 10px; }
  .glass-bar { padding: 6px 10px; gap: 6px; }
  .cmp-icon-btn { height: 44px; width: 44px; }
  .cmp-icon-btn svg { height: 20px; width: 20px; }
  .cmp-logo-text { font-size: 15px; }
  .cmp-share { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cmp-share-list { width: 100%; }
  .cmp-rating-body { grid-template-columns: 1fr; gap: 16px; }
  .cmp-rating-foot { flex-direction: column; align-items: flex-start; }
  .cmp-description { padding: 20px; font-size: 15px; }
  .cmp-content-card { padding: 22px; }
  .cmp-footer-inner { padding: 24px; }
  .cmp-browse { margin-top: 56px; }
  .cmp-related { margin-top: 48px; }
  .cmp-card-body { padding: 12px; }
  .cmp-search-overlay { padding-top: 72px; }
}

@media (max-width: 359px) {
  .cmp-grid { grid-template-columns: minmax(0, 1fr); }
  .cmp-style-card { flex-basis: 100%; }
}

/* nothing may create a horizontal scrollbar */
.cmp-grid, .cmp-detail { max-width: 100%; }
.cmp-wrap, .cmp-footer, .cmp-browse { max-width: min(100%, 1152px); margin-inline: auto; }
@media (min-width: 1440px) {
  .cmp-footer, .cmp-browse { max-width: min(100%, 1240px); }
}

/* ==========================================================================
   Layout containment — centered, controlled max-width, zero overflow
   ========================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
.cmp-wrap { max-width: 1152px; }
@media (min-width: 1440px) {
  .cmp-wrap { max-width: 1240px; padding-inline: 24px; }
  .cmp-header { max-width: 1240px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cmp-wrap { padding-inline: 20px; }
  .cmp-header { padding-inline: 20px; }
  .cmp-detail { gap: 20px; }
}
.cmp-detail, .cmp-detail-side, .cmp-detail-media, .cmp-block, .panel-card { min-width: 0; }
.cmp-block-text, .cmp-description, .cmp-content-card { overflow-wrap: anywhere; }
pre, code, table { max-width: 100%; overflow-x: auto; }

/* ---------- mobile header: [burger] [logo] .... [search] [theme] ---------- */
@media (max-width: 1023px) {
  .glass-bar { flex-wrap: nowrap; }
  .cmp-burger { order: -1; }
  .cmp-logo { order: 0; padding-left: 2px; }
  .cmp-actions { order: 1; margin-left: auto; }
  .cmp-drawer-nav a { min-height: 48px; }
  .cmp-drawer-foot .cmp-pill { height: 48px; }
}
@media (max-width: 400px) {
  .cmp-logo-text { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cmp-actions { gap: 4px; }
}

/* ---------- prompt box on small screens ---------- */
@media (max-width: 639px) {
  .cmp-block-text { max-height: 260px; font-size: 14.5px; }
  .cmp-block-actions { gap: 8px; }
  .cmp-copy-btn, .cmp-like-btn { padding: 10px 16px; min-height: 44px; }
  .cmp-save-btn { min-height: 38px; }
}

@media (max-width: 768px) {
    .site-header .custom-logo,
    .cmp-mobile-logo img,
    .custom-logo-link img {
        max-height: 34px !important;
        width: auto !important;
        object-fit: contain !important;
    }
}