/* Search Hub PC master composition. Mobile continues to use the original single-column view. */
.hub-card-visual,
.search-kicker {
  display: none;
}
.search-pc-header{display:none}

@media (min-width: 761px) {
  .app-shell.search-shell,
  .app-shell:has(.discovery-hub-page) {
    --guitto-shell-width: 1586px;
  }

  .search-page.discovery-hub-page {
    width: 100%;
    max-width: 1586px;
    min-height: calc(100dvh - 74px);
    padding: 58px clamp(28px, 3.8vw, 60px) 82px;
    background-color: #fffafb;
    background-image: linear-gradient(180deg, rgba(255, 250, 251, .16), rgba(255, 250, 251, .48)), url('/search/search-background.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }

  .discovery-hub-page .search-heading {
    padding: 0 0 38px;
  }

  .discovery-hub-page .search-kicker {
    display: block;
    margin-bottom: 10px;
    color: #f19aae;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .22em;
  }

  .discovery-hub-page .search-heading h1 {
    font-size: clamp(48px, 4.15vw, 66px);
    line-height: 1.05;
    letter-spacing: -.055em;
  }

  .discovery-hub-page .search-heading p {
    margin-top: 15px;
    color: #60606a;
    font-size: 18px;
    line-height: 1.65;
  }

  .discovery-hub {
    align-items: stretch;
    gap: 18px;
  }

  .discovery-hub .hub-card {
    display: flex;
    position: relative;
    min-height: 470px;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(231, 214, 220, .92);
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 34px rgba(92, 54, 67, .08);
  }

  /* The card is one canvas: copy keeps a protected left area and the visual floats on the right. */
  .discovery-hub .hub-card-main {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }

  .discovery-hub .hub-card-copy {
    display: flex;
    width: 52%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .discovery-hub .hub-card-visual {
    display: block;
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44%;
    height: 310px;
    overflow: hidden;
    border-radius: 0 18px 18px 0;
    background: #fbf5f6;
    z-index: 0;
    pointer-events: none;
  }

  .discovery-hub .hub-card-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Blend the independent photo into the card copy without dimming the subject. */
  .discovery-hub .hub-card-visual::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: '';
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .34) 8%, rgba(255, 255, 255, .08) 18%, rgba(255, 255, 255, 0) 30%);
  }

  .discovery-hub .hub-recommend .hub-card-visual img { object-position: calc(28% + 12px) 50%; }
  .discovery-hub .hub-interest .hub-card-visual img { object-position: 67% 48%; }
  .discovery-hub .hub-diagnosis .hub-card-visual img { object-position: 73% 66%; }

  .discovery-hub .hub-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 18px;
    font-size: 28px;
  }

  .discovery-hub .hub-card h2 {
    margin: 20px 0 10px;
    color: #292733;
    font-size: clamp(21px, 1.55vw, 26px);
    line-height: 1.24;
    letter-spacing: -.055em;
    white-space: nowrap;
  }

  .discovery-hub .hub-diagnosis h2 {
    font-size: clamp(21px, 1.48vw, 25px);
    letter-spacing: -.075em;
  }

  .discovery-hub .hub-card p {
    margin: 0;
    color: #696772;
    font-size: 15px;
    line-height: 1.72;
  }

  .discovery-hub .hub-card small {
    margin-top: 13px;
    font-size: 12px;
    line-height: 1.45;
  }

  .discovery-hub .hub-interest-preview {
    min-height: 68px;
    margin-top: 16px;
    gap: 8px;
    align-content: flex-start;
  }

  .discovery-hub .hub-interest-preview span {
    max-width: 100%;
    padding: 6px 10px;
    font-size: 11px;
  }

  .discovery-hub .hub-status { margin-top: 13px; }

  .discovery-hub .hub-action-area {
    display: flex;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    flex: 0 0 133px;
    min-height: 133px;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 12px;
  }

  .discovery-hub .hub-primary,
  .discovery-hub .hub-secondary {
    width: 100%;
    margin: 0;
    box-shadow: none;
  }

  .discovery-hub .hub-primary {
    min-height: 64px;
    border-radius: 999px;
    background: linear-gradient(100deg, #ef3d70, #ed4d79);
    box-shadow: 0 8px 16px rgba(223, 53, 102, .16);
    font-size: 17px;
  }

  .discovery-hub .hub-actions { display: grid; gap: 9px; margin: 0; }

  .discovery-hub .hub-secondary {
    min-height: 48px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    font-size: 16px;
  }
}

/*
 * A three-card row needs at least 419px per card: after the 22px card
 * padding, the protected 52% copy area remains 195px wide, which keeps
 * the longest title on one line. Keep the ordinary two-column grid below
 * this point so additional search cards continue to flow naturally.
 */
@media (min-width: 761px) and (max-width: 1399px) {
  .discovery-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Human-verified: the fixed Search Hub composition remains valid inside the common shell from 1350px. */
@media (min-width: 1350px) {
  .app-shell.search-shell{width:100%;max-width:none;min-height:100dvh;padding:0 var(--pc-shell-gutter) 0 var(--pc-shell-sidebar-reserve);background:#fffafb}
  .search-pc-header{position:sticky;z-index:10;top:0;height:var(--pc-header-height);display:flex;align-items:center;justify-content:space-between;margin:0 calc(-1 * var(--pc-shell-gutter)) 0 calc(-1 * var(--pc-shell-sidebar-reserve));padding:0 38px;border-bottom:1px solid #f0e8eb;background:rgba(255,255,255,.94)}
  .search-pc-header .brand{color:#22212b;font-size:29px;font-weight:800;letter-spacing:-.04em;text-decoration:none}.search-pc-header .site-header-actions{display:flex;align-items:center;min-height:44px}
  .search-shell .app-bottom-nav{position:fixed;z-index:7;top:var(--pc-header-height);right:auto;bottom:0;left:0;width:var(--pc-sidebar-width);height:auto;display:grid;grid-template-columns:1fr;align-content:start;gap:var(--pc-nav-gap);margin:0;padding:28px 18px;border:0;border-right:1px solid #f0e8eb;background:rgba(255,255,255,.92);backdrop-filter:blur(16px)}
  .search-shell .app-bottom-nav a{display:flex;align-items:center;min-height:var(--pc-nav-item-height);padding:0 18px;border-radius:13px;color:#696674;font-size:14px;text-align:left}.search-shell .app-bottom-nav .active{color:#f43669;background:#fff0f4}
  .search-page.discovery-hub-page{min-height:calc(100dvh - 72px);max-width:none;padding:46px 0 64px}
  .discovery-hub{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .discovery-hub .hub-card{min-height:438px;padding:18px}
  .discovery-hub .hub-card-main{min-height:0}
  .discovery-hub .hub-card-copy{position:relative;z-index:1;width:56%}
  .discovery-hub .hub-card-visual{top:18px;right:18px;width:39%;height:236px;border-radius:16px}
  .discovery-hub .hub-card h2,.discovery-hub .hub-diagnosis h2{margin:16px 0 9px;font-size:clamp(20px,1.45vw,24px);line-height:1.28;letter-spacing:-.045em;white-space:normal;overflow-wrap:anywhere}
  .discovery-hub .hub-card p{font-size:14px;line-height:1.62}
  .discovery-hub .hub-card small{margin-top:10px;font-size:11px}
  .discovery-hub .hub-interest-preview{min-height:78px;margin-top:13px;gap:6px}
  .discovery-hub .hub-action-area{flex-basis:122px;min-height:122px;padding-top:8px}
  .discovery-hub .hub-primary{min-height:58px;font-size:16px}
  .discovery-hub .hub-secondary{min-height:46px;font-size:15px}
}

/* Sidebar desktop: copy and artwork occupy separate grid columns, never layers. */
@media (min-width: 1350px) {
  .discovery-hub .hub-card-main{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    align-items:stretch;
    gap:10px;
  }

  .discovery-hub .hub-card-copy{
    grid-column:1;
    width:auto;
    min-width:0;
  }

  .discovery-hub .hub-card-visual{
    position:static;
    grid-column:2;
    grid-row:1;
    align-self:stretch;
    width:auto;
    min-width:0;
    height:auto;
    min-height:236px;
    border-radius:16px;
  }

  .discovery-hub .hub-card-visual::before{display:none}
  .discovery-hub .hub-card-main::after{grid-column:2;grid-row:1;z-index:1;content:'';pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.34) 8%,rgba(255,255,255,.08) 18%,rgba(255,255,255,0) 30%)}
  .discovery-hub .hub-recommend .hub-card-visual img{object-position:17.5% 50%}
  .discovery-hub .hub-interest .hub-card-visual img{object-position:62.5% 48%}
  .discovery-hub .hub-diagnosis .hub-card-visual img{object-position:61.659% 66%}
}