/*
 * TLDsKing Phase 3 — responsive refinement for the existing V4 + Prism V5 UI.
 * Presentation only: no changes to URLs, Django forms, fields, prices, or model data.
 * Loaded after prism-v5.css to resolve inherited V4 breakpoint collisions.
 */

/* Long names, order identifiers and user-entered content should never widen a grid. */
.domain-card, .king-domain-card, .detail-card, .account-panel,
.cart-layout > *, .checkout-layout > *, .catalog-layout > *,
.detail-layout > *, .king-plan-card, .king-service-card,
.king-service-detail, .auth-card, .catalog-results { min-width: 0; }
.domain-card h3, .domain-card h3 a,
.king-domain-card h3, .king-domain-card h3 a,
.detail-hero h1, .detail-card h2,
.checkout-item-list li span, .cart-item-name,
.order-item-name, .account-panel .order-number,
.king-plan-card h3, .king-service-card h3 { overflow-wrap: anywhere; }

/* A focused keyboard user should get the same expanded rail as hover users. */
@media (min-width: 991px) and (hover: hover) {
  .site-header .tk-v5-rail:focus-within .tk-v5-label {
    max-width: 145px;
    opacity: 1;
    margin-left: 6px;
  }
}

/*
 * Tablet V4 inherited a two-column hero before its 760px mobile switch,
 * squeezing the real domain input to just a few pixels near 768px.
 * Stack the genuine search + art between 761px and 960px instead.
 */
@media (min-width: 761px) and (max-width: 960px) {
  .v4-hero-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    min-height: 0;
    padding-top: 65px;
  }
  .v4-hero-copy { max-width: 780px; padding: 0; }
  .v4-hero h1 { max-width: 780px; font-size: clamp(51px, 7.3vw, 70px); }
  .v4-hero-description { max-width: 700px; }
  .v4-search { width: 100%; max-width: 700px; }
  .v4-prism-scene { width: min(100%, 560px); min-height: 400px; margin-inline: auto; }
  .v4-prism-scene img { max-width: 500px; }
  .v4-prism-tag { display: none; }
}

/* Keep actual cart, filter and form content contained on narrow screens. */
@media (max-width: 760px) {
  .catalog-layout, .detail-layout, .cart-layout, .checkout-layout,
  .account-layout, .auth-layout, .king-service-editorial-grid,
  .king-service-hero-layout { min-width: 0; }
  .catalog-filters, .catalog-results, .account-panel,
  .auth-card, .king-plan-card { max-width: 100%; }
  .catalog-filters input, .catalog-filters select,
  .auth-card input, .auth-field input, .account-panel input,
  .account-panel select, .account-panel textarea { max-width: 100%; }
  .pagination { flex-wrap: wrap; justify-content: center; }
  .results-heading { flex-wrap: wrap; }
  .site-header .primary-nav.tk-v5-navigation {
    /* Long menus remain scrollable even in landscape or small viewports. */
    max-height: min(calc(100dvh - 72px), 800px);
    -webkit-overflow-scrolling: touch;
  }
  .site-header .tk-v5-rail .tk-v5-link,
  .site-header .tk-v5-rail .tk-v5-logout-form .tk-v5-link { min-height: 44px; }
}

/* Very narrow phones need a real full-width search button, not a 90px input. */
@media (max-width: 375px) {
  .v4-search {
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    column-gap: 9px;
    row-gap: 7px;
    padding: 7px;
  }
  .v4-search-icon { margin-left: 7px; }
  .v4-search input {
    width: 100%;
    min-width: 0;
    font-size: 15px;
  }
  .v4-search button {
    width: 100%;
    grid-column: 1 / -1;
    height: 44px;
    justify-content: center;
  }
  .v4-search-foot { gap: 5px 12px; }
  .v4-feature strong { overflow-wrap: normal; }
}

/* Avoid forcing hover-reflow on touch devices; focus styling still works. */
@media (hover: none) {
  .v4-feature:hover, .king-service-detail:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v4-search, .v4-feature, .king-service-detail,
  .king-domain-card, .domain-card, .king-plan-card { transition: none !important; }
}


/* ================================================================
   Phase 3.1 — 100% zoom desktop and mobile density correction
   The 1320px mobile breakpoint was collapsing the desktop nav and
   stacking large feature tiles too early. Header/menu CSS now switches
   at 1060px in V4 + V5, while tiles use their own, lower breakpoint.
   No Django forms, models, URLs, content or service logic are changed.
   ================================================================ */

/* Keep the four service shortcuts in one restrained row on laptops.
   Decouple card density from the hamburger/navigation breakpoint. */
@media (min-width: 901px) and (max-width: 990px) {
  .v4-featurebar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    padding: 6px 8px;
  }
  .v4-feature {
    min-height: 100px;
    min-width: 0;
    padding: 12px 10px;
    gap: 9px;
  }
  .v4-feature:nth-child(-n+2) { border-bottom: 0; }
  .v4-feature:nth-child(2) { border-right: 1px solid rgba(255,255,255,.13); }
  .v4-feature-icon { width: 37px; height: 37px; flex-basis: 37px; }
  .v4-feature-icon svg { width: 21px; height: 21px; }
  .v4-feature strong { font-size: 11px; }
  .v4-feature small { font-size: 10px; }
}

/* Tablets keep the 2x2 grid, but without oversized 150px+ tiles. */
@media (min-width: 461px) and (max-width: 900px) {
  .v4-featurebar { padding: 5px 8px; }
  .v4-feature {
    min-height: 94px;
    padding: 12px 13px;
    gap: 12px;
    align-items: center;
  }
  .v4-feature-icon { width: 41px; height: 41px; flex-basis: 41px; }
  .v4-feature strong { font-size: 12px; }
  .v4-feature small { font-size: 10px; }
}

/* Touch devices should not attempt a desktop-style expanding tile reflow. */
@media (hover: none) {
  .v4-feature:hover, .v4-feature:focus-visible {
    transform: none;
  }
}


/* In the expanded state, long labels (Business Email / Website Builder)
   get their natural content width instead of six equal-sized slots. */
@media (min-width: 991px) {
  .site-header .tk-v5-rail:hover .tk-v5-link,
  .site-header .tk-v5-rail:focus-within .tk-v5-link,
  .site-header .tk-v5-rail.tk5-open .tk-v5-link {
    flex: 1 1 auto;
    width: auto;
  }
}