/* AA Gems Tools — additions on top of style.css (same design tokens/vars) */

/* Full-page background photo — url() here is relative to THIS file (src/tools.css),
   so it resolves correctly whether the page linking it is at / or /t/ */
body.has-photo-bg{
  background:
    linear-gradient(180deg, rgb(3 3 3 / .60) 0%, rgb(3 3 3 / .82) 45%, var(--dark) 85%),
    url('images/ri-hero-bg.jpg') center top / cover no-repeat fixed;
}
@media (max-width:768px){
  body.has-photo-bg{ background-attachment:scroll; }
}

.tools-hero{padding:150px 30px 60px;text-align:center;background:transparent;border-bottom:1px solid rgb(184 151 58 / .1)}
.tools-hero h1{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:16px}
.tools-hero p{max-width:560px;margin:0 auto;color:var(--text-muted);font-size:1rem}

.tools-grid-section{padding:70px 0 110px}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}

.tool-card{background:var(--dark-card);border:1px solid var(--dark-border);border-radius:2px;padding:28px 26px;display:flex;flex-direction:column;transition:var(--transition);text-decoration:none}
.tool-card:hover{transform:translateY(-4px);border-color:rgb(184 151 58 / .4);box-shadow:var(--shadow-luxury)}
.tool-card-icon{font-size:1.8rem;margin-bottom:14px}
.tool-card-badge{align-self:flex-start;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;padding:3px 10px;border-radius:12px;margin-bottom:10px}
.tool-card-badge.free{background:rgb(58 139 90 / .15);color:var(--success-light);border:1px solid rgb(58 139 90 / .3)}
.tool-card-badge.pro{background:rgb(184 151 58 / .15);color:var(--gold-light);border:1px solid rgb(184 151 58 / .3)}
.tool-card h3{font-size:1.2rem;margin-bottom:8px;color:var(--white)}
.tool-card p{font-size:.85rem;color:var(--text-muted);flex:1;margin-bottom:16px}
.tool-card-cta{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);border-bottom:1px solid rgb(184 151 58 / .3);align-self:flex-start;padding-bottom:2px}

.tool-page-wrap{max-width:680px;margin:0 auto;padding:150px 24px 100px}
.tool-page-header{margin-bottom:36px}
.tool-page-header h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:10px}
.tool-page-header p{color:var(--text-muted);font-size:.92rem}

.tool-box{background:var(--dark-card);border:1px solid var(--dark-border);border-radius:3px;padding:36px 32px;margin-bottom:32px}
.tool-field{margin-bottom:18px}
.tool-field label{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-bottom:6px;font-weight:500}
.tool-field select,.tool-field input{width:100%;background:var(--dark);border:1px solid var(--dark-border);color:var(--text);padding:12px 14px;font-family:var(--font-body);font-size:.9rem;border-radius:2px;outline:0}
.tool-field select:focus,.tool-field input:focus{border-color:var(--gold)}
.tool-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.tool-result{margin-top:24px;padding:20px;background:var(--dark);border-left:2px solid var(--gold);border-radius:2px}
.tool-result-label{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.tool-result-value{font-family:var(--font-display);font-size:1.8rem;color:var(--white)}

.tool-cta-box{background:linear-gradient(135deg,rgb(184 151 58 / .08),transparent);border:1px solid rgb(184 151 58 / .25);border-radius:3px;padding:26px 28px;text-align:center}
.tool-cta-box p{color:var(--text-muted);margin-bottom:14px;font-size:.9rem}

.back-to-tools{display:inline-block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);text-decoration:none;margin-bottom:24px}
.back-to-tools:hover{color:var(--gold-light)}

@media (max-width:640px){.tool-row{grid-template-columns:1fr}.tool-box{padding:26px 20px}}